javascript - 如何动态设置 jquery mobile 日期框的 minHour 选项

Question

我有两个 type="text" 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();"}' /> 

starttime 上的回调获取所选时间的小时，然后将 endtime 框的 minHour 设置为该小时 + 1。然后“解决方法”是 endtime 的回调，它将框的时间设置为“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'});
}

在第二个回调中，您也可以将结束时间与开始时间进行比较，如果结束时间小于开始时间，则将第二个日期框设置为开始时间。

您可能想联系 Datebox 开发人员以查看 minHour 功能是否存在错误...