Jquery-UI 从 datepicker 日历中动态增加日期

Question

我使用 jquery ui 中的 datepicker 创建了 two calendars，我想根据 first calendar 中的选定日期更改 second calendar 中的选定日期。例如，如果我从第一个日历中选择5/21/2016，那么当我单击第二个输入字段以打开第二个日历时，我需要此日历将其选择的日期动态更改为first calendar selected day + 4 days

这是我的代码：

<input class="datepicker begin" type="text" />
<input class="datepicker end" type="text"/>

    $(function () {
        $(".datepicker.begin").datepicker({
            minDate: '+2d',
            maxDate: '+2y'
        })
        $(".datepicker.end").datepicker({
            minDate: '+4d',
            maxDate: '+2y'
        });
    });

上面的代码应该改成这样：

$(function () {
    $(".datepicker.begin").datepicker({
        minDate: '+2d',
        maxDate: '+2y'
    })
    $(".datepicker.end").datepicker({
        minDate: $(".datepicker.begin") + 4d,
        maxDate: '+2y'
    });
});

Answer 1

您可以将onSelect 函数用于您的第一个日期选择器，以便设置第二个日期的值：

$(".datepicker.begin").datepicker({
        minDate: '+2d',
        maxDate: '+2y',
        onSelect: function(dateText, inst) {
           // Resolve the current date
           var begin = new Date($(this).val());
           var d = begin.getDate();
           var m = begin.getMonth();
           var y = begin.getFullYear();
           // Update your target date in your other date picker
           $(".datepicker.end").datepicker('setDate', new Date(y, m, d+2));
        }
});

示例

您可以see a working example of this in action here并在下面演示：