Ivan Topić Ivan Topić - 1 year ago 99
jQuery Question

How to set different begin step value in jQuery-timepicker?

I am using jQuery-timepicker for selecting time in select input fields. Depending on selection in Start input, End input field will have minimum time 15 minutes from the Start field. How can I specify that

step
should start from 15 min in second input? enter image description here

http://jsfiddle.net/Lqj858o0/1/

var timepickerStart = $('#timepicker-start');

var timepickerEnd = $('#timepicker-end');

// Properties for End time
timepickerEnd.timepicker({
'timeFormat': 'H:i',
'minTime': '7:00am',
'maxTime': '9:00pm',
// This step should remain at 15, but it shouldn't start from 0 but from 15
'step': 15,
'showDuration': true
});

// Properties for Start time
timepickerStart.timepicker({
'timeFormat': 'H:i',
'minTime': '7:00am',
'maxTime': '10:00pm',
'step': 15,
'lang': {
mins: 'min',
hrs: 'hr'
}
}).on('changeTime', function(){

// When Start time is changed, get start time value and add 15 minutes to it
var selectedStartTime = timepickerStart.val();
var minimumStartTime = moment(selectedStartTime, ["h:mm"]).add(15, 'minutes').format('hh:mm');

// Set new value for End time
timepickerEnd.timepicker('option', {
'minTime': minimumStartTime + 'am',
'timeFormat': 'H:i'
});

});

Answer Source

What you need is durationTime - a property of the timepicker that sets the hour against which showDuration is computed. If you don't specify it, it will set itself to be equal to minTime, which is where your problem comes from.

Use it like this:

// When Start time is changed, get start time value and add 15 minutes to it
  var selectedStartTime = timepickerStart.val();
  var minimumStartTime = moment(selectedStartTime, ["h:mm"]).add(15, 'minutes').format('hh:mm');

// Set new value for End time
    timepickerEnd.timepicker('option', { 
    'durationTime': selectedStartTime, // <- This is the line I added.
    'minTime': minimumStartTime + 'am',
    'timeFormat': 'H:i'
    });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download