Restricting time intervals in DateTime Picker

问题

I'm using this to select date and time. The documentation does not mention about time picker, but it works anyhow.

HTML:

<div class="dateTimePicker">
        <input name="start" type="text" value="">
        <span class="add-on"><i class="time-icon"></i></span>
</div>

JS:

$(".dateTimePicker").datetimepicker({
    pickDate: false,
    pickTime: true,
    useSeconds: false,
    format: 'hh:mm'
});

This works all fine. It shows a selector with intervals of 1 hour for hours, 3 minutes for minutes and 3 seconds for seconds.

My aim is to change the intervals of minutes from 3 to 15. Currently, the selector for minutes shows: 00 03 06 etc. Can I change it to 00 15 30 45. Is this even possible or are there any other time pickers which give me this flexibility?

回答1:

You need to use stepping, this page explains it all, http://eonasdan.github.io/bootstrap-datetimepicker/Options/#stepping

$(".dateTimePicker").datetimepicker({
    pickDate: false,
    pickTime: true,
    useSeconds: false,
    format: 'hh:mm',
    stepping: 15 //will change increments to 15m, default is 1m
});

回答2:

$(".dateTimePicker").datetimepicker({
    step: 15 
});

This is how sets interval in jquery datetimepicker

回答3:

$(".dateTimePicker").datetimepicker({
  .
  .
  "stepMinute" : 5 //Will Change Minute Interval as 00, 05, 10 ... 55
  .
  .
});

回答4:

Try this For Interval in The Kendo UI TimePicker

<input id="timePicker" />
<script>
   $("#timePicker").kendoTimePicker({
      interval: 15
   });

回答5:

Since you are looking for a bootstrap compliant timepicker library, I would suggest the bootstrap-timepicker library which supports the time range and stepping features.

A sample would be based on your source code:

$(".dateTimePicker").timepicker({({
  secondStep: 30, // "minuteStep" is also an alternative option 
  showSeconds: true
});

来源：https://stackoverflow.com/questions/26971015/restricting-time-intervals-in-datetime-picker

标签

jquery

datetimepicker