next() method is not getting fired..!!!

[Pullal0215]

I am working on a functionality same as outlook appointment where on change of start time the end time should change.
On the change event of start time i have written the code to set the next time in the endtime control but the next method does seems to work.
below is the code.

jQuery(function ($) {
   $('#starttime').timepicker({
       scrollbar: true,
       change: function (time) {
           var timepicker = $('#endtime').timepicker(),
               instance = timepicker,
               object = null;
           instance.setTime(time);
           instance.next();
       }
   });
});

jQuery(function ($) {
   $('#endtime').timepicker({
       scrollbar: true,
       change: function (time) {

       }
   });
});

Please help me out.

[wvega]

@Pullal0215, I just discovered that the method cannot be called from the change callback of another Timepicker. I think that's a bug.

Anyway, the next() method doesn't do what I think you need. It just highlights the next time entry in the timepicker dropdown, but it doesn't actually sets the time to that value.

I have created a fiddle with your code and added an implementation that may help you with your project. You can check it out here: http://jsfiddle.net/wvega/kc1ggrcc/. Let me know if that helps. The updated code appears below as well, for completeness:

jQuery(function ($) {
   $('#starttime').timepicker({
       scrollbar: true,
       change: function (time) {
           setTimeout( function() {
                var endtime = $( '#endtime' ),
                    instance = endtime.timepicker();

                instance.setTime( time );
                // select (as in highlight) next time entry after time
                instance.next();
                // set this field time to the time entry highlighted in the previous step
                instance.setTime( instance.selected().text() );
                // focus on the #endtime field to allow user to adjust the selected time,
                // by typing another time entriy or selecting a new one with the UP and DOWN
                // keys.
                endtime.focus();
            }, 10 );
       }
   });
});

jQuery(function ($) {
   $('#endtime').timepicker({
       scrollbar: true,
       change: function (time) {

       }
   });
});

I used a setTimeout as workaround to the bug that prevents the next (and other methods) from being fired.

[Pullal0215]

@wvega thanks a lot for your quick response.
Will implement your code in my project.

Also there is one more thing that you should know is when I scroll down the timepicker with mouse the control seems to disappear.

Let me know if there is a workaround.

[wvega]

@Pullal0215 I'm glad it helped.

Let's talk about the other problem in a different issue :): #56