將最小日期設置為上一個日期選擇器中選擇的日期

Question

我有兩個日期選擇器。 一startdate和enddate 。

我設置代碼的方式是，直到第一個日期選擇器被更改后，第二個日期選擇器才會啟動。 enddate datepicker用startdate上的當前日期初始化。 唯一的問題是，如果你改變了時間上的第一個日期選擇器不會刷新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都會進行初始化，然后每次更改#startdate元素時， #startdate #enddate小部件都會獲得一個更新的minDate選項。

這是一個演示： 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的onSelect事件代替文本框的change事件。 在這種情況下，您將selected日期作為第一個參數，可以將其設置為結束日期數據selected minDate 。

$( "#startdate" ).datepicker({ 
    minDate: currentTime,
    onSelect: function(date){

        //if the datepicker is not initialized
        $("#enddate").datepicker({ minDate: date });

        //if the datepicker is already initialized
        $("#enddate").datepicker("option", "minDate", date);
    } 
});

演示版

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