Jquery Datepicker set only 3 dates from before and after the corrsponding date
-
12-06-2021 - |
문제
I have used two jquery datepickers.
In first date picker I choose the date like "18-MAR-2012" and The next date picker should show only the date from 15-MAR-2012 to 21-MAR-2012.
It should add only 3 days from before and after the particular date("18-MAR-2012")
How can I do this?
해결책
This is related to range datepicker. I found solution and may be this wud help you. The working fiddle is here(Stylings missing in fiddle). Here I'm setting the limit for next date picker at "onSelect" function of first datepicker.
var d;var tempdate; var tempdate1; var da; var da1;
$('#nam1').datepicker({
minDate: 0,
dateFormat: 'd/m/yy',
buttonImageOnly: true,
showAnim: 'slideDown',
duration: 0,
onSelect: function(dateStr) {
d = $.datepicker.parseDate('d/m/yy', dateStr); //Get selected date
tempdate = new Date(d);
tempdate1 = new Date(d);
tempdate.setDate(tempdate.getDate() - 3); //Subtracted 3 days
tempdate1.setDate(tempdate1.getDate() + 3); // added 3 days
da = new Date(tempdate);
da1 = new Date(tempdate1);
}
});
$('#nam2').datepicker({
dateFormat: 'd/m/yy',
buttonImageOnly: true,
showAnim: 'slideDown',
duration: 0,
beforeShow: function(input)
{
//setting min and max date for second datepicker
if(da1 != undefined) return { minDate: da, maxDate: da1 };
}
});
There wud be even better way to handle date variable. Try it by yourself.
다른 팁
$(function(){
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
var threeDays = 259200000;
$('#datepicker2').datepicker("option", "minDate", new Date(Date.parse(dateText)-threeDays));
$('#datepicker2').datepicker("option", "maxDate", new Date(Date.parse(dateText)+threeDays));
$('#datepicker2').datepicker("setDate", dateText);
}
});
$('#datepicker2').datepicker();
});
...259200000 is 3 days in micro-seconds.
every time you select a date in the first datepicker, it restricts the range in the 2. one.
Unfortunately, if i leave out $('#datepicker2').datepicker("setDate", dateText);
, the date in the second datepicker is set to the last possible value.