如何在 jQuery-timepicker 中设置不同的开始步长值?
How to set different begin step value in jQuery-timepicker?
我正在使用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?
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'
});
});
您需要的是 durationTime
- timepicker 的 属性,它设置计算 showDuration
所依据的小时。如果您不指定它,它将自己设置为等于 minTime
,这就是您的问题所在。
这样使用:
// 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'
});
我正在使用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?
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'
});
});
您需要的是 durationTime
- timepicker 的 属性,它设置计算 showDuration
所依据的小时。如果您不指定它,它将自己设置为等于 minTime
,这就是您的问题所在。
这样使用:
// 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'
});