設置在日期選擇器中選擇的最短日期

我有兩個日期選擇器。 A startdate和enddate。設置在日期選擇器中選擇的最短日期

我的代碼設置的方式是，第二個datepicker將不會啓動，直到第一個已更改。 enddate datepicker使用startdate上的當前日期進行初始化。唯一的問題是，如果您更改第一個日期選擇器上的時間，它不會刷新enddate上的mindate。

$(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 }); 
    });

來源

2012-02-21 David Allen

您將需要使用option方法的文檔（http://jqueryui.com/demos/datepicker/#method-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小部件每次更改#startdate元素時都會更新minDate選項。

這裏是一個演示：文本框的http://jsfiddle.net/VP25m/

來源

2012-02-21 18:28:03 Jasper

+1提琴圖 – Devjosh 2012-02-21 18:35:46

非常感謝你！ +1 – 2012-02-21 19:55:39

編輯：嘗試使用的日期選擇器的刷新（）函數：

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

    });

OLD回答以下：

你可能會想結束日期日期選擇器設置爲可變的，所以你可以當開始日期改變時銷燬並重新初始化它。

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

    });

來源

2012-02-21 18:27:36

http://jqueryui.com/demos/datepicker/#method-option - 所有的jQuery UI組件必須更新選項的能力導通即時。通常有一個可以使用的「選項」方法。 – Jasper 2012-02-21 18:33:51

使用datepicker的onSelect事件，而不是change事件。在這種情況下，您可以將selected日期作爲第一個參數，您可以使用它將其設置爲enddate datapicker的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); 
    } 
});

Demo

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

來源

2012-02-21 18:29:13 ShankarSangoli

設置在日期選擇器中選擇的最短日期

回答

相關問題