如何動態設置jQuery Mobile的日期框的minHour選項

Question

我有兩個類型為“文本”的輸入date-role =“ datebox”

一是開始時間。 另一個是結束時間。

我想做的是，當用戶選擇開始時間時，我將結束時間日期框的minHour選項更改為他們選擇的小時。

那可能嗎？ 如果是這樣，怎么辦？

謝謝

Answer 1

從我可以看到，minHour似乎默認將時間選擇器彈出窗口設置為正確的時間，但是無論如何它可以讓您選擇更早的時間。 如果您選擇的時間比minHour更早，則日期框會顯示更早的時間，但在您調用datebox（'getTheDate'）時會顯示； 它返回minHour。 因此，我想出了一種解決方法，可以為您完成這項工作。

這是一個演示

每個日期框都有onclose的回調：

<input name="Date1" id="Date1" type="date" data-role="datebox" 
data-options='{"mode": "timebox", "closeCallback": "Date1Close();"}' /> 
...
<input name="Date2" id="Date2" type="date" data-role="datebox" 
data-options='{"mode": "timebox", "closeCallback": "Date2Close();"}' /> 

開始時間的回調獲取選定時間的小時，然后將結束時間框的minHour設置為該小時+1。然后，“解決方法”是結束時間的回調，它將結束時間框的時間設置為“ getTheDate”為了更正顯示框。

function Date1Close(){
    var startdate = $('#Date1').datebox('getTheDate');
    var minH = startdate.getHours() + 1;
    if (minH > 23) minH = 23;
    $('#Date2').datebox({"minHour": minH});
}

function Date2Close(){
    var enddate = $('#Date2').datebox('getTheDate');
    $('#Date2').datebox('setTheDate', enddate);
    $('#Date2').trigger('datebox', {'method':'doset'});
}

在第二個回調中，您也可以僅將結束時間與星空時間進行比較，如果end小於開始時間，則將第二個日期框設置為開始時間。

您可能需要聯系Datebox開發人員，以查看minHour功能是否存在錯誤...