根据另一个 datepicker 实例更改 jQuery datepicker 中显示的月份答案

【问题标题】：Change displayed month in jQuery datepicker, depending on another datepicker instance根据另一个 datepicker 实例更改 jQuery datepicker 中显示的月份
【发布时间】：2011-03-15 15:34:18
【问题描述】：

我有两个日期选择器字段，一个是“开始日期”，另一个是“end_date”。

我希望有这样的功能，在用户选择“开始日期”后，“结束日期”日历应默认显示包含“ 开始日期'。

反之亦然，如果用户首先选择结束日期，则开始日期的日历应显示包含所选结束日期的月份。

如何在 jQuery datepicker 中实现？我应该定义哪些日期选择器选项？

$("#start_date").datepicker({
  //which datepicker options should put here?
})

【问题讨论】：

您可能想查看半官方的 jQuery UI date range picker。这并不完全符合您的要求，但它可能是一个不错的选择。它提供了一些不错的功能。
我会看看半官方的，但现在我想根据我所拥有的:)
尝试使用“onSelect”功能更改“defaultDate”选项。

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

这会根据需要设置其他日历的默认日期。如果已选择日期，则不会更改它。

    $(document).ready(function() {
        $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker2" ).datepicker( "option", "defaultDate", dateText );
        }});
        $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker" ).datepicker( "option", "defaultDate", dateText );
        }});
    });

如果您想强制其他日期选择器将其已选择的日期重置为其他日历月份，请使用：

$(document).ready(function() {
        $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker2" ).datepicker( "setDate" , dateText )
        }});
        $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker" ).datepicker( "setDate" , dateText )
        }});
});

【讨论】：

有时 datepicker1 将它的值设置为 currentDate，在“set defaultDate”事件期间可能有一些分配

【解决方案2】：

您可以尝试这样做以避免用户选择end-date 小于start-date 和start-date 大于end-date。

    $("#start_date").datepicker({
        defaultDate: '-7d',
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateStr) {
            $("end-date").datepicker('option', 'minDate', $(this).datepicker('getDate') || '-1m');
        }
    });
    $("end-date").datepicker({
        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateStr) {
            $("#start_date").datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0);
        }
    });

【讨论】：

【解决方案3】：

我的建议是将所选日期保存在 datepicker1 中，并在显示 datepicker2 之前手动设置相同的日期。所以，datepicker1.date == datepicker2.date。希望对你有帮助。

var dateselected = '';

$( "#datepicker1" ).datepicker({
  onSelect: function(dateText, inst) {
    dateselected = dateText;
  } 
});
$( "#datepicker2" ).datepicker({
  beforeShow: function(input, inst) {
    if(dateselected != '')
       $( "#datepicker2" ).datepicker('setDate',dateselected);
  } 
});

您可以在以下链接中看到它正在运行：http://jsbin.com/orizi4

【讨论】：