I'm trying to write a web page which tells user to input a date of booking, this input field has jQuery calender. I've also successfully disable specific dates so no 2 users book a same date.
My question is how can I read a file from server, get Dates, process and disable them in jQuery calender? Or is there a way to send data from PHP to JavaScript? JSFiddle. Here is my code:
var eventDates = ["28/1/2018", "27/1/2018", "2/2/2018"];
$(function() {
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
});
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
Date: <input id="iDate">
</body>
</html>
Make an ajax request like below, that php service will return disabled dates.
$.get('your_file.php').done(function(eventDates){
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
});
or directly print out your array into html output like below:
<?php
$disabledDates = array("2012-01-01", "2012-02-02");
?>
<script type="text/javascript">
var eventDates = <?php echo json_encode($disabledDates); ?>
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
</script>
Related
i need to highlight a disabled date from datepicker
what i have now is like this
the only available day is Tuesday, so i wanted to highlight the disabled day
this is my javascript
<script>
var idf = '';
var hari = '';
$('.divradio').hide();
$(".divradio input").prop('disabled','disabled');
function getIndex(data, id) {
var date = $('#' + data).datepicker('getDate');
var dayOfWeek = date.getDay();
$('.divradio').hide();
$(".radio" + idf + hari + " input").prop('checked', false);
// $(".radio" + idf + hari + " input").attr('disabled','disabled');
$('.radio' + id + dayOfWeek).show();
$(".radio" + id + dayOfWeek + " input").removeAttr('disabled');
idf = id;
hari = dayOfWeek;
// console.log(".radio" + idf + hari + " input");
};
</script>
what should i do to achieve that?
With jQuery UI you can use Theming with CSS to do this. Consider the following example.
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(dt) {
if (dt.getDay() == 2) {
return [true, ""];
} else {
return [false, ""];
}
}
});
});
.ui-datepicker-calendar .ui-datepicker-unselectable span {
background-color: yellow;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date:
<div id="datepicker"></div>
I would like to get the following script to run when the window first loads.
var now = newDate();
var years = now.getFullYear();
var month = now.getMonth();
var days = now.getDate();
month = month +1;
var today = days + "." + month + "." + years;
var checkdate = 11.05.2020;
if (today >= checkdate)
{
alert("Today is the day");
document.location.href="today.html";
}
else
{
alert("Today is " + today);
}
Please help.
Try this.
function myFunction() {
var now = new Date();
var years = now.getFullYear();
var month = now.getMonth();
var days = now.getDate();
var today = days + "." + month + "." + years;
var checkdate = "11.05.2020";
if (today >= checkdate) {
alert("Today is the day");
document.location.href = "today.html";
} else {
alert("Today is " + today);
}
}
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
run the code after the page has been loaded
$(function() {
// ...Code goes here
});
or
$(document).ready(function() {
// ...Code goes here
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
var dates = new Array();
function addDates(date) {
if (dates.length > 0) {
dates = [];
}
if (jQuery.inArray(date, dates) < 0){
var i;
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
for (i=1;i<14;i++){
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
} else {
if (month == 12) {
month = 0;
year = year + 1;
day = 0;
}
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
}
console.log(dateIsValid);
console.log(dates);
}
}
}
function isDate(val) {
var date = new Date(val);
return !isNaN(date.valueOf());
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDates(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
I've created a script where it highlights the next 14 days then it checks if the date is valid or not. If Not it will change the date.
Problem is:
When i select the date October 31, 2017
the array should look like this
10/31/2017, 11/1/2017, 11/2/2017,...
But the array returns:
10/31/2017, 11/1/2017, 11/1/2017, 11/2/2017, ...
thanks in advance
Here is the solution using moment.js , it is very easy , you don't need to use that complicated coding which you have. It is add a 14 days in selected date.Moment.js is automatically handle the month change , year change etc , so you don't need that extra conditions which is for change month,year,date etc.
var dates = new Array();
function addDa(date){
dates = [];
var selected_date = moment(date);
var last_date = moment(date).add(14, 'days');
for (var dat=selected_date; dat <= last_date; dat.add(1, 'days'))
{
dates.push(dat.format('MM/DD/YYYY'));
}
console.log(dates);
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDa(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.0/moment.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
error in :
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
you pushed value : 11/1/2017 to datas.
then day=1, month=11 :
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
}
you push again value : 11/1/2017 . you can add day++ to
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
day++;
same as below :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
var dates = new Array();
function addDates(date) {
if (dates.length > 0) {
dates = [];
}
if (jQuery.inArray(date, dates) < 0){
var i;
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
for (i=1;i<14;i++){
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
} else {
if (month == 12) {
month = 0;
year = year + 1;
day = 0;
}
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
day++;
}
console.log(dateIsValid);
console.log(dates);
}
}
}
function isDate(val) {
var date = new Date(val);
return !isNaN(date.valueOf());
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDates(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
Btw found a solution adding a day++ after pushing it when the date is not valid :)
I am having great difficulty getting the current date to be inputted into a text box within a form i am creating as a default value. at the moment i have the following code, which i believe creates the current date, followed by the text box code which i am unsure on how to modify in order for the date to be displayed inside.
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring();
}
<input type="text" name="frmDateReg" required id="frmDate" value="getDate()">
if anyone could suggest how to create todays date and input it into the textbox as default it would be greatly appreciated. (Please excuse any format issues as i am new to stack overflow) Thanks
You've got the right idea. It's just out of order:
<input type="text" name="frmDateReg" required id="frmDate" value="">
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring;
}
getDate();
Your code is correct, except that adding the function call in the value doesn't do anything. You need something else to trigger the function. The way I have it there, it will execute automatically when the page loads.
Aslo, datestring is not a function. It's just a variable. So you can leave off the ()
Try this Jquery code, this will work
$(document).ready(function () {
var dateNewFormat, onlyDate, today = new Date();
dateNewFormat = today.getFullYear() + '-';
if (today.getMonth().length == 2) {
dateNewFormat += (today.getMonth() + 1);
}
else {
dateNewFormat += '0' + (today.getMonth() + 1);
}
onlyDate = today.getDate();
if (onlyDate.toString().length == 2) {
dateNewFormat += "-" + onlyDate;
}
else {
dateNewFormat += '-0' + onlyDate;
}
$('#mydate').val(dateNewFormat);
});
razor view for this
#Html.TextBoxFor(m => m.StartedDate, new { #id = "mydate", #type = "date", #class = "form-control" })
This simple solution worked out for me. You can show the current date using window.onload function of javascript. See the output.
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
window.onload = function(){
document.getElementById("date").value = datestring;
}
<input type="text" id="date"/ >
<html>
<body onload="myFunction()">
Date: <input type="text" id="demo"/>
<script>
function myFunction() {
document.getElementById('demo').value= Date();
}
</script>
</body>
</html>
Use this code. this will helpful
<input type="text" name="frmDateReg" required id="frmDate" >
<script>
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring; //don't need ()
}
document.getElementById("frmDate").onload = getDate();
</script>
html
<input type="text" id="frmDate"></input>
JavaScript
var date = new Date();
document.getElementById("frmDate").value = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
Jsfiddle Demo
<script TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
var currentDate = new Date();
var date1 = currentDate.getMonth()+1;
var mon = currentDate.getDate();
if (mon<10)
mon="0"+mon
var year = currentDate.getYear();
var hour = currentDate.getHours();
var dn="pm"
if (hour<12)
dn="am"
if (hour>12)
hour=hour-12
if (hour==0)
hour=12
var minute = currentDate.getMinutes();
if (minute < 10){
minute = "0" + minute
}
var second = currentDate.getSeconds();
if (second < 10){
second = "0" + second
}
var today = date1+"/"+mon+"/"+year+" Time: "+hour+":"+minute+":"+second+" "+dn
var filePath = "\\\\servername\\maindirectory\\somedirectory\\filenametopostto.xlsx";
function setDate()
{
f1.tDate.value=today;
}
</script>
Result in your text box is:
5/28/2019 Time: 3:03:01 pm
If you want to show the current date on the input field date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
// today = yyyy + '/' + mm + '/' + dd;
today = `${yyyy}-${mm}-${dd}`;
document.getElementById('dateto1').value = today;
<div class="col-lg-4">
<label>Date</label>
<input type="date" name="dateto1" id="dateto1" class="form-control">
</div>
I am using the following javascript code that spits out a date in the format of mmddyy. Is there a way to add the results to a URL link, so that it spits out:
<a href="http://test.com/mmddyy.html">test
</a>
JS code I am using is
<script type="text/javascript">
function formatDate(d) {
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
year = year.toString().substr(2, 2);
month = month + 1;
month = month + "";
if (month.length == 1) {
month = "0" + month;
}
day = day + "";
if (day.length == 1) {
day = "0" + day;
}
return month + day + year;
}
var d = new Date();
document.write(formatDate(d));
</script>
Thanks for any help.
Create a HTMLAnchorElement
function pad2(x) { // pad/truncate number to 2 digits
return ('00' + x).slice(-2);
}
function formatDate(d) { // format your date output
return pad2(d.getMonth() + 1)
+ pad2(d.getDate())
+ pad2(d.getFullYear());
}
function generateLink(url, text) { // create an <a>
var a = document.createElement('a');
a.setAttribute('href', url);
a.appendChild(document.createTextNode(text));
return a;
}
var a = generateLink(
'http://test.com/' + formatDate(new Date) + '.html',
'test'
); // HTMLElement test
Now you can append this node as desired, e.g. if you wanted to convert back to String.
new XMLSerializer().serializeToString(a);
Or append to <body>
document.body.appendChild(a);
There are multiple ways to do this.
First, you should avoid using document.write. Instead, the simplest way is to create a div to write to, like this:
<body>
<div id="myDiv"></div>
</body>
You can then add a link to it like this
document.getElementById('myDiv').innerHTML = 'test';
If there is an existing link, for example test, you can set the url like this
document.getElementById('myLink').href = 'http://test.com/'+formatDate(d)+'.html';
You can concat the string with the link URL:
var link = "http://www.test.com/"+formatDate(d)+".html";
Then alter the <a> tag accordingly:
document.getElementById('link_id').href = link;