Jquery Datepicker set only 3 dates from before and after the corrsponding date

Question

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?

Answer 1

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.

Answer 2

$(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.