更改jQuery UI Datepicker月需要2次单击 [英] jQuery UI Datepicker Month change requires 2 clicks

问题描述

我有两个输入字段，一个用于到达，一个用于离开.当用户输入arrivalDate时，我会在必要的约束下打开arrivalDate日期选择器.

I have two input fields, one for a arrival and one for the departure. When a user enters the arrivalDate I open the departureDate datepicker with the necessary constraints.

但是，当我打开第二个日期选择器时，以编程方式更改为下个月需要两次单击并再次触发show事件(?).但是，按预期方式选择当前月份内的日期即可.

But when I open the second datepicker programatically changing to the next month requires two clicks and triggers the show event again(?). However selecting a date within the current month works as expected.

在这里摆弄一个小提琴来显示问题: http://jsfiddle.net/rrPAy/3/

Heres a fiddle to show the issue: http://jsfiddle.net/rrPAy/3/

HTML:

<form>
   <label for="arrivalDate">Arrival</label>
   <input type="text" name="arrivalDate" id="arrivalDate" autocomplete="off">
   <br>
   <label for="departureDate">Departure</label>
   <input type="text" name="departureDate" id="departureDate" autocomplete="off">
</form>

JAVASCRIPT:

JAVASCRIPT:

$("#arrivalDate,#departureDate").datepicker({
    minDate: +1,
    firstDay: 1,
    dateFormat: "dd.mm.yy",
    showOn: 'both',
    gotoCurrent: true,
    buttonImageOnly: true,
    buttonText: 'Date',
    numberOfMonths: 1,
    inline: true,
    changeMonth: true,
    changeYear: true,
    beforeShow: function customRange(input)
    {
        if (input.id == 'departureDate') {
            var arrivalDate = jQuery('#arrivalDate').datepicker("getDate");
            if(arrivalDate) {
                arrivalDate.setDate(arrivalDate.getDate()+1); // Add 1 Day for Departure Date
                return {minDate: arrivalDate};
            }
        }
    },
    onClose: function() {
        if ($(this).attr('id') == 'arrivalDate') {
            $("#departureDate").datepicker("show");
            $("#departureDate").focus();
        }
    }
});

推荐答案

尝试一下:

$("#arrivalDate,#departureDate").datepicker({
        minDate: +1,
        firstDay: 1,
        dateFormat: "dd.mm.yy",
        showOn: 'both',
        gotoCurrent: true,
        buttonImageOnly: true,
        buttonText: 'Date',
        numberOfMonths: 1,
        inline: true,
        changeMonth: true,
        changeYear: true,
        onSelect: function(dateText, inst) {
            if ($(this).attr('id') == 'arrivalDate') {
                var d =  $('#arrivalDate').datepicker('getDate');
                d.setDate(d.getDate()+1);
                $('#departureDate').datepicker('option', 'minDate', d);
                $('#departureDate').datepicker('show');
                inst.preventDefault();
            }
        }
    });

请参见小提琴

这篇关于更改jQuery UI Datepicker月需要2次单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！