如何动态设置jQuery Mobile的日期框的minHour选项

Question

I have two inputs of type="text" date-role="datebox"

One is the start time. The other is the end time.

What I would like to do is that when the user picks the start time, I change the minHour option of the end time datebox to the hour they selected.

Is that possible? If so, how?

Thanks

Answer 1

From what I can see minHour seems to default the time picker popup to the right hour, but it then lets you pick an earlier hour anyway. If you pick an earlier hour than minHour, the datebox displays the earlier hour, but when you call datebox('getTheDate'); it returns the minHour. So I came up with a workaround that might do the job for you.

Here is a DEMO

Each of the dateboxes has callback for 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();"}' /> 

The callback on the starttime gets the hour of the selected time and then sets the minHour of the endtime box to that hour + 1. Then the 'workaround' is the callback for the endtime which sets the time of the box to the 'getTheDate' of the box in order to correct the display.

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'});
}

In the second callback you could also just compare the endtime to the startime and if end is less than start, set the second datebox to the starttime.

You might want to contact the Datebox developer to see if there is a bug with the minHour feature...