开发者

Dual datepicker calendars with autofocus and min date

I'm using 2 jquery datepickers, one for depart and one for return.

I want the 2nd one to auto open and have the min date set to the value selected in the first calendar + 1 day (i.e.开发者_开发技巧 first calendar date was May 21st, 2nd calendar should have the min date set to May 22nd).

As of right now I can get it auto filling the default date of the 2nd calendar to the date selected in the first one.

$( "#dep_date" ).datepicker({dateFormat: 'dd/mm/yy', numberOfMonths: 3, minDate: +2, onSelect: function(dateText, inst){$("#ret_date").val(dateText);}});
$( "#ret_date" ).datepicker({dateFormat: 'dd/mm/yy', numberOfMonths: 3});   


How about something like this:

$("#dep_date").datepicker({
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 3,
    minDate: +2,
    onSelect: function(dateText, inst) {
        var date = $.datepicker.parseDate('dd/mm/yy', dateText);
        date.setDate(date.getDate() + 1);

        var $ret_date = $("#ret_date");

        $ret_date.datepicker("option", "minDate", date);            
        $ret_date.datepicker("setDate", date);

        $(this).datepicker("hide");

        $ret_date.datepicker("show");
    }
});

$("#ret_date").datepicker({
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 3
});

Details:

  • Uses the setDate method on datepicker
  • Sets the minDate option on datepicker
  • Calls the show method on the next datepicker

Here's a working example: http://jsfiddle.net/4tay7/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜