Search code examples
jquerytimepicker

JQuery Timepicker 1.3.5 Use start time to determine end time's starting point

I have already tried many solutions online.

For date picker and time picker, I use:

<link rel="stylesheet"
href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

When I use "on 'changeTime'", the block does not even execute:

                    $('#t1').on(
                            'changeTime',
                            function() {
                                alert("hahaha");
                                $('#t2').timepicker('setTime',
                                        $('#t1').timepicker('getTime'));
                            });
                    $('#t2').timepicker({
                        timeFormat : 'hh:mm a',
                        interval : 30,
                        maxTime : '11:00pm',
                        startTime : '08:00',
                        dynamic : false,
                        dropdown : true,
                        scrollbar : true
                    });

What is the right way to capture the changed start time and set it to the starting point of the end time? Even better, plus 30 minutes for the end time starting point.

Is this a problem of jquery timepicker's version? However, when I tried to use different timepicker versions, it doesn't work at all, which means the timepicker cannot even be clicked open...

Solution

  • I found the answer myself:

    Need to use ".timepicker('option', 'change', function(time)"

    https://github.com/wvega/timepicker/issues/72

    Works perfect now.