0

I have a lot of things going on in my datepicker file to achieve a few tasks. 1.) I needed to be able to block select dates or weekends (code not included below as it works) 2.) I needed a min and max date on each field to ensure the end user can't select anything less than, say, 3 days from the start date (see below)

My problem is that my website allows visitors to come BACK to the page they selected the dates on and change them if necessary to extend or shorten their stay. But when I come back, I can't seemingly pre-populate the fields properly so that my min/max date rules stay in-tact. How can I modify my code below to ensure my min/max rules are preserved while (re)inserting the values.

//CORE DATEPICKER FUNCTION
$(document).ready(function () {
$.datepicker.setDefaults({dateFormat: 'mm/dd/yy',minDate: +3,maxDate: "1Y +3D",changeMonth: true,firstDay: 1,changeYear: true,numberOfMonths: 2,constrainInput:true,beforeShowDay:nationalDays,});

$('#datepicker_start').datepicker({
            onSelect: function(selectedDate) {
    var minDate = $(this).datepicker('getDate');
    if (minDate) {minDate.setDate(minDate.getDate() + 3);}//min nights required
    $('#datepicker_end').datepicker('option', 'minDate', minDate || 1);
    days();
}}).val('12/11/2012');
$('#datepicker_end').datepicker({minDate: 1, onSelect: function(selectedDate) {
    var maxDate = $(this).datepicker('getDate');    
    if (maxDate) {maxDate.setDate(maxDate.getDate() - 1);}
    $('#datepicker_start').datepicker('option', 'maxDate', maxDate); // Date - 1    
    days();
}}).val('12/15/2012');
    $('#datepicker_start,#datepicker_end').change()
        });
4

1 回答 1

1

Essentially you need to be able to run the same code as in the onSelect option. By wrapping that code in a separate function you can call the function when the page loads as well as in the onSelect handler. 

function setEndMin(){
     var minDate = $('#datepicker_start').datepicker('getDate');  
        if (minDate) {
            minDate.setDate(minDate.getDate() + 3);
        } //min nights requires
        $('#datepicker_end').datepicker('option', 'minDate', minDate || 1);

}

$('#datepicker_start').val('12/11/2012').datepicker({       
    onSelect: function(selectedDate) {
       setEndMin();
    }
});
/* after create both pickers can process  min/max*/
setEndMin()

DEMO : http://jsfiddle.net/XtS9B/4/

于 2012-11-15T11:20:53.527 回答