Search code examples
jquerydatepickermaxdatemindate

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


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?


Solution

  • 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.