Below i have a 2 datepicker which user have to select them and then
the 2nd datepicker will change the min date according to datepicker1
but my goal is to set the 3rd date in datepicker1 and set 7th date in
datepicker 2 without selecting them(Auto).
So far i can able to display the first datepicker with last available
day(3rd date) while i still can't achieve the dates for 2nd
datepicker(7th) :(
Any suggestion?
Here's the code
$(document).ready(function() {
var array = ["15-01-2020","18-01-2020"];
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$('#datepicker1').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(3)
});
$('#datepicker1').change(function () {
var from = $('#datepicker1').datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
$('#datepicker2').val('').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + date_diff + extra;
})
(7)
});
});
$( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100);
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
Note
The first datepicker min date is from tomorrow and maxdate is 3 days
which exclude holidays and sundays while the 2nd datepicker mindate is
based on 1st datepicker date and maxdate is 7 days which exclude
holidays and sundays. I just want the last 3rd and 7th date display in
the datepicker input without selecting them.Both input should not
available for choosing(Read-Only).
Updated: At first, I thought there was a bug with the answer code(I didn't really look at it) I provided you from the previous answer. But after looking through the old code again, I realized there isn't a bug with the old code since the datepicker class get remove every time the date picker object get initialize. Thus, I updated this answer to reflect that.
For this code, it is similar to the other code I gave you. It just that when it come to datepicker in a division it is different. However, I commented that into code. For the third datepicker, I compose that datepicker when the first maxDate function run for the first datepicker, then against when the second date picker function maxDate function is run. Since you don't want the user to do anything with the third datepicker, except seeing it, I used a division instead of an input field as a place holder for the third datepicker. They can still select the date but it will not do anything. You probably can add style to those dates to make it seem their selected and unselected states are the same. Also, tool tips can be added.
For this answer, I also give you two versions. The second version is better optimized and more flexible. Version 1 and 2 are the same code. Nonetheless, the second version assign the jQuery object of the 3 datepickers to 3 variables so that every time those divisions is needed to be used, it does not cause jQuery to look up those division objects again. Also, it is easier for you to change their naming context from one place.
Try to play around selecting the first day and you will see the days will dynamically change. Also, if you refer to any of my answer and find any bugs with in them, feel free to notify me of the bugs in the comment. Thank you.
Version 1:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
var array = ["15-01-2020","18-01-2020"];
// Store date for datepicker3 here
var dp3 = [];
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
function dp2ini () {
var from = $('#datepicker1').datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
/*
* For an input field, the hasDatepicker class have to removed
* for the options to take effect if re-initialize. This, can
* also be done with the destroy option of datepicker
* $('#datepicker2').datepicker("destroy"). However, it seem,
* removing its class is faster in this case.
*
* On the other hand if a datepicker widget is a part
* or a division, it has to be destroy as the html
* for the widget is placed as html content inside that division,
* and simply just removing the hasDatepicker class from that division
* will cause the reinitializer to write in a second datepicker widget.
*
* In a division where it only contained the picker
* object, it is faster to just set the HTML to blank
* and remove the hasDatepicker class. On the otherhand,
* for more complicated division, it is better to use,
* the destroy option from "datepicker".
*/
$('#datepicker2').val('').removeClass("hasDatepicker");
$('#datepicker2').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
dp3[1] = new Date();
dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
dp3[1] = dp3[1].toDateString();
// Destroy dp3 and re-initalize it.
//$('#datepicker3').datepicker("destroy");
$('#datepicker3').empty();
$('#datepicker3').removeClass("hasDatepicker");
$( "#datepicker3" ).datepicker({
maxDate: max + date_diff + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]
|| date.toDateString() == dp3[1]
];
}
});
return max + date_diff + extra;
})(7)
});
}
$('#datepicker1').datepicker({
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
/* Initialize datepicker 3 here. */
// NOTE: If dp1 needed to be reinitialize dp3
// also have to be destroyed and reinitialize.
// The last day will always be a pick-able one...
// Because if it wasn't another day would had been added to it.
dp3[0] = new Date();
dp3[0].setDate( dp3[0].getDate() + max + extra );
dp3[0] = dp3[0].toDateString();
$( "#datepicker3" ).datepicker({
maxDate: max + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]];
}
});
return max + extra;
})
(3)
});
$( "#datepicker1" ).change(dp2ini);
// Also trigger the change event.
$( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>
Version 2:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
var array = ["15-01-2020","18-01-2020"];
// Store date for datepicker3 here
var dp3 = [];
var datepicker1 = $('#datepicker1')
datepicker2 = $('#datepicker2'),
datepicker3 = $('#datepicker3');
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
function dp2ini () {
var from = datepicker1.datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
/*
* For an input field, the hasDatepicker class have to removed
* for the options to take effect if re-initialize. This, can
* also be done with the destroy option of datepicker
* $('#datepicker2').datepicker("destroy"). However, it seem,
* removing its class is faster in this case.
*
* On the other hand if a datepicker widget is a part
* or a division, it has to be destroy as the html
* for the widget is placed as html content inside that division,
* and simply just removing the hasDatepicker class from that division
* will cause the reinitializer to write in a second datepicker widget.
*
* In a division where it only contained the picker
* object, it is faster to just set the HTML to blank
* and remove the hasDatepicker class. On the otherhand,
* for more complicated division, it is better to use,
* the destroy option from "datepicker".
*/
datepicker2.val('').removeClass("hasDatepicker");
datepicker2.datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = datepicker1.datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
dp3[1] = new Date();
dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
dp3[1] = dp3[1].toDateString();
// Destroy dp3 and re-initalize it.
//$('#datepicker3').datepicker("destroy");
datepicker3.empty();
datepicker3.removeClass("hasDatepicker");
datepicker3.datepicker({
maxDate: max + date_diff + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]
|| date.toDateString() == dp3[1]
];
}
});
return max + date_diff + extra;
})(7)
});
}
datepicker1.datepicker({
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
/* Initialize datepicker 3 here. */
// NOTE: If dp1 needed to be reinitialize dp3
// also have to be destroyed and reinitialize.
// The last day will always be a pick-able one...
// Because if it wasn't another day would had been added to it.
dp3[0] = new Date();
dp3[0].setDate( dp3[0].getDate() + max + extra );
dp3[0] = dp3[0].toDateString();
datepicker3.datepicker({
maxDate: max + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]];
}
});
return max + extra;
})
(3)
});
datepicker1.change(dp2ini);
// Also trigger the change event.
datepicker1.datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>
I have two Jquery datepickers namely "startDate" and "endDate". I initialize them like this.
$(function() {
$("#startdate").datepicker({ dateFormat: 'yy-mm-dd' });
$("#enddate").datepicker({ dateFormat: 'yy-mm-dd' });
});
Now i convert this date to epoch by doing this.
var sDate = startdate.split('-');
var eDate = enddate.split('-');
var sepoch = new Date(sDate[0], sDate[1] - 1, sDate[2]).getTime() / 1000;
var eepoch = new Date(eDate[0], eDate[1] - 1, eDate[2]).getTime() / 1000;
startdate = sepoch.toString();
enddate = eepoch.toString();
Now when i check the dates after converting them back from epoch, they differ by one day. So one day has been reduced from them. I can't figure out where i am going wrong. Please help me out here.
Please have a look at the fiddle, I have added a bit of code and I am getting the date that I chose from the datepicker
FIDDLE
$("#startdate").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
DoStuff();
}
});
function DoStuff() {
var startdate = $("#startdate").val();
var sDate = startdate.split('-');
var sepoch = new Date(sDate[0], sDate[1] - 1, sDate[2]).getTime() / 1000;
var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
d.setUTCSeconds(sepoch);
console.log(sDate[2]);
console.log(d);
}
I have the following JavaScript code that uses of a StartDate & EndDate field.
What this code does is to restrict the dates on the EndDate field to the day you have chosen in the StartDate field.
What I am trying to do is to restrict time as well, for example the "datetimepicker" consists of a drop-down with Hours.
How do I restrict the EndDate field to one hour(according to the hour I have chosen from the StartDate field plus one) and maybe disable the rest of available hours?
$(document).ready(function () {
var dates = $('#StartDate, #EndDate').datetimepicker({
dateFormat: 'dd/mm/yy',
hourMin: 9,
hourMax: 17,
minDate: '1',
maxDate: null,
controlType: 'select',
timeFormat: 'hh:mm tt',
beforeShowDay: $.datepicker.noWeekends,
firstDay: 1,
changeFirstDay: false,
onSelect: function (selectedDate) {
var option = this.id == "StartDate" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datetimepicker._defaults.dateFormat,
selectedDate, instance.settings);
var edate;
var otherOption;
var d;
if (option == "minDate") {
otherOption = "maxDate";
d = date.getDate() + 0;
}
else if (option == "maxDate") {
otherOption = "minDate";
d = date.getDate() - 0;
}
var m = date.getMonth();
var y = date.getFullYear();
edate = new Date(y, m, d);
dates.not(this).datetimepicker("option", option, date);
dates.not(this).datetimepicker("option", otherOption, edate);
}
});
});
If you are using this plugin:
DateTimePicker
, then you can:
$('#rest_example_3').datetimepicker({
minDate: new Date(2010, 11, 20, 8, 30),
maxDate: new Date(2010, 11, 31, 17, 30)
});
Basically you need pass min date and end date with hours
I have this code to restrict various "datepicker dates". :
$(function() {
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
})({
changeMonth: true,
changeYear: true
});
$(".datepicker").datepicker;
});
var calcDate = function() {
var start = $('#conference_date_in').datepicker('getDate');
var end = $('#conference_date_out').datepicker('getDate');
var days = (end - start) / 1000 / 60 / 60 / 24;
document.getElementById('total_days').value = days;
}
$('#conference_date_out').change(calcDate);
({ minDate: -20, maxDate: "+1M +10D" });
$('#conference_date_in').change(calcDate);
</script>
Is my min/max date in the wrong section?
You have to set mindate and max date like this
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
Example
Reference: mindate and maxdate
And if you want to disable a specific date range you can use the following code
// unavailable dates range
var dateRange = ["2012/05/20","2012/05/29"]; // yyyy/MM/dd
function unavailable(date) {
var startDate = new Date(dateRange[0]);
var endDate = new Date(dateRange[1]);
var day = date.getDay();
if(date > startDate && date < endDate )
return [false, "disabled"];
else if(day > 0 && day < 6)
return [true, "enabled"];
else
return [false, "disabled"];
}
$('#iDate').datepicker({ beforeShowDay: unavailable });
Working Fiddle
I'm using beforeShowDay to exclude holidays and weekends, however I want the beforeShowDays to be excluded when calculating the minDate.
E.g. if the current day of the week is friday and the minDate is 2, I want the weekend to be excluded from the equation. So instead of monday being the first date you can select, I want it to be wednesday.
This is my jQuery:
$( "#date" ).datepicker({
minDate: 2, maxDate: "+12M", // Date range
beforeShowDay: nonWorkingDates
});
Does anyone know how to do this?
How about something like this:
function includeDate(date) {
return date.getDay() !== 6 && date.getDay() !== 0;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$("#date").datepicker({
beforeShowDay: function(date) {
return [includeDate(date)];
},
minDate: (function(min) {
var today = new Date();
var nextAvailable = getTomorrow(today);
var count = 0;
var newMin = 0; // Modified 'min' value
while(count < min) {
if (includeDate(nextAvailable)) {
count++;
}
newMin++; // Increase the new minimum
nextAvailable = getTomorrow(nextAvailable);
}
return newMin;
})(2) // Supply with the default minimum value.
});
Basically, figure out where the next valid date is, leveraging the method you've already defined for beforeShowDay. If my logic is correct (and you're only excluding weekends), this value can only be either 2 or 4: 2 If there are weekends in the way (Thurs. or Friday) and 2 if not.
It gets more complicated if you have other days you're excluding, but I think the logic still follows.
Here's the code on fiddle: http://jsfiddle.net/TpSLC/