如何动态设置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功能是否存在错误...