Question

我有两个datepicker字段，一个是'开始日期'，另一个是' end_date '。

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

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

如何在jQuery datepicker中实现？我应该定义什么是datepicker选项？

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

Answer 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 )
        }});
});

Answer 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);
        }
    });

Answer 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

更改jQuery datepicker中显示的月份，具体取决于另一个datepicker实例

3 个答案: