Question

我有两个日期选择器。 startdate和enddate。

我设置代码的方式是在第一个日期选择器更改之前不会启动第二个日期选择器。使用enddate上的当前日期初始化startdate datepicker。唯一的问题是，如果您更改第一个日期选取器上的时间，则不会刷新mindate上的enddate。

   $(function(){
   $( "#startdate" ).datepicker({ minDate: currentTime });

        //When the startdate changes change the mindate for the enddate picker
        $( "#startdate" ).change(function (){
             startTime = ($("#startdate").val());
            $("#enddate").datepicker({ minDate: startTime });

       });

       //$( "#enddate" ).datepicker({ minDate: currentTime });
  });

Answer 1

您需要使用文档（http://jqueryui.com/demos/datepicker/#method-option）中所述的option方法来更新已初始化的小部件的minDate选项：

$( "#startdate, #enddate" ).datepicker({ minDate: currentTime });

$('#startdate').change(function () {
    var startTime = ($("#startdate").val());
    $("#enddate").datepicker('option', 'minDate', startTime);
});

注意我在var变量的前面放了一个startTime语句，因此它将在事件处理程序的本地范围内声明。此外，两个Datepickers都会初始化为strait-off，然后#enddate窗口小部件每次更改minDate元素时都会获得更新的#startdate选项。

以下是演示：http://jsfiddle.net/VP25m/

Answer 2

编辑：尝试在datepicker上使用refresh（）函数：

$( "#startdate" ).change(function (){
    startTime = ($("#startdate").val());
    $("#enddate").datepicker({ minDate: startTime });
    $("#enddate").datepicker('refresh');

  });

以下的老答案：

您可能希望将结束日期datepicker设置为变量，以便在开始日期更改时销毁并重新初始化它。

$( "#startdate" ).change(function (){
    startTime = ($("#startdate").val());
    if($("#enddate").datepicker("enabled")) {
          endDatePicker.datepicker( "destroy" );
    }
    var endDatePicker = $("#enddate").datepicker({ minDate: startTime });

  });

Answer 3

使用datepicker的{{1}}事件代替文本框的onSelect事件。在这种情况下，您将change日期作为第一个参数，您可以将其设置为enddate datapicker的selected。

minDate

<强> Demo

参考：http://jqueryui.com/demos/datepicker/#event-onSelect

设置在上一个datepicker中选择的最小日期

3 个答案: