CODEWITHSUNDEEP
jquerydatetimepicker
user2354302
user2354302

Reputation: 1903

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?

Upvotes: 5

Views: 39859

Answers (5)

Fabricio Foga&#231;a
Fabricio Foga&#231;a

Reputation: 91

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

This is how sets interval in jquery datetimepicker

Upvotes: 9

Nana Partykar
Nana Partykar

Reputation: 10548

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

Upvotes: 2

Clinton Green
Clinton Green

Reputation: 9977

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
});

Upvotes: 7

tmarwen
tmarwen

Reputation: 16374

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
});

Upvotes: 0

Parth Akbari
Parth Akbari

Reputation: 651

Try this For Interval in The Kendo UI TimePicker

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

Upvotes: 0

Related Questions