Jquery TimePicker : How to dynamically change parameters

Question

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 .

I think the same question would be valid for other JQuery elements as well. — geeky_monster, Jun 09 '12 at 04:36
That page has an example (last one) where it does this along with the [source](http://jonthornton.github.com/jquery-timepicker/lib/datepair.js). — sachleen, Jun 09 '12 at 04:51

Ranhiru Jude Cooray · Accepted Answer · 2012-06-09T05:00:18.550

10

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.

edited Jun 09 '12 at 05:00

answered Jun 09 '12 at 04:43

Ranhiru Jude Cooray

19,542
20
83
128

1

This JS Fiddle shows no change of minTime. It's always 2PM – ivanacorovic Apr 22 '16 at 06:35

Raghav · Answer 2 · 2016-09-05T15:45:19.930

10

You can go for onchange event:

        $('#startTime').timepicker();

        $('#endTime').timepicker({
            'minTime': '12:00am',
            'showDuration': true
        });

        $('#startTime').on('changeTime', function() {
            $('#endTime').timepicker('option', 'minTime', $(this).val());
        });

I modified the code a bit posted in first reply here is the working fiddle for it http://jsfiddle.net/NXVy2/215/

You can use on('change'... too

    $('#startTime').on('change', function() {
        $('#endTime').timepicker('option', 'minTime', $(this).val());
    });

edited Sep 05 '16 at 15:45

answered Sep 05 '16 at 15:26

Raghav

8,772
6
82
106

The accepted answer doesn't work (anymore?), but this one worked perfectly for me. – nematoth Nov 03 '16 at 03:49

score 4 · Answer 3 · answered Jun 09 '12 at 04:55

4

jQuery-UI widgets generally support an options method that allows you to change the options on an existing instance. Widget methods are called by supplying a string as the first argument to the plugin call:

$(...).widget_name('method_name', arg...)

so this should work for you:

$('#endTime').timepicker('option', 'minTime', new_min_time)

answered Jun 09 '12 at 04:55

mu is too short

426,620
70
833
800

Option works perfectly, This should be marked as a correct answer! – ivanacorovic Apr 22 '16 at 06:40

Jquery TimePicker : How to dynamically change parameters

3 Answers3

Linked