Jamaica Geek Jamaica Geek - 2 months ago 19
Javascript Question

Jquery TimePicker : How to dynamically change parameters

I am using a Jquery Timepicker .

I have two input fields - to Accept times .

<input id="startTime" size="30" type="text" />
<input id="endTime" size="30" type="text" />


I am using a Jquery UI timer as per documentation

$('#startTime').timepicker({
'minTime': '6:00am',
'maxTime': '11:30pm',
'onSelect': function() {
//change the 'minTime parameter of #endTime <--- how do I do this ?
}
});
$('#endTime').timepicker({
'minTime': '2:00pm',
'maxTime': '11:30pm',
'showDuration': true
});


I want that when the first timePicker is selected , the 'minTime' parameter for the second gets changed . Basically I am trying to collect the start time and end time for certain activity . And I want that the second input box shows the options from the value of the first input field (start time ) itself .

Answer

You would do something like this,

$('#startTime').timepicker({
                'minTime': '6:00am',
                'maxTime': '11:30pm',
                    'onSelect': function() {

                    $('#endTime').timepicker('option', 'minTime', $(this).val());                        
              }
            });

What you are doing here is that in the onSelect function of the #startTime, you set the option minTime of #endTime to the value of #startTime

See this JS Fiddle.

Comments