如何在jQuery-timepicker中设置不同的开始步长值?

时间:2017-07-27 13:14:54

标签: jquery datetimepicker

我正在使用jQuery-timepicker在选择输入字段中选择时间。根据“开始”输入中的选择,“结束输入”字段将具有距“开始”字段15分钟的最短时间。如何指定step应在第二次输入中从15分钟开始? 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'
        });

    });

1 个答案:

答案 0 :(得分:1)

您需要的是durationTime - 时间戳的属性,用于设置计算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'
    });