CODEWITHSUNDEEP
kendo-ui
jrmack
jrmack

Reputation: 105

Kendo UI Timepicker custom interval format

What i'm looking to do with the kendoTimePicker is have the 30 minute interval for all times leading up to 11:30PM, but after 11:30 display all subsequent times up to 12AM in minute interval. Not sure if this control supports it.

Basically looking to have something like this:

10:30 PM
11:00 PM
11:30 PM
11:31 PM
11:32 PM
11:33 PM
..etc

Upvotes: 2

Views: 3180

Answers (2)

George K
George K

Reputation: 1763

Another option is to define a list of times, as Date objects. Check the dates option. Each timepicker has timeView property, which actually is the popup element. This object has a dataBind method, which accepts a list of Date objects:

var timeView = $("#timepicker").data("kendoTimePicker").timeView;

//bind list
timeView.dataBind([new Date()]);

You can use this method to dynamically update list of the available times.

Nevertheless, you always can modify the UL element, like the CodingWithSpike suggested.

Upvotes: 0

CodingWithSpike
CodingWithSpike

Reputation: 43728

The only way I could think of doing it is to manually change the list of times in the dropdown. Kendo just dynamically adds a <ul> to your page that is shown as the popup, so you could clear and rebuild the list yourself.

Something like:

<input id="timepicker" />

$("#timepicker").kendoTimePicker();
var listOfTimes = $("#timepicker_timeview");

// remove all existing <li> elements
listOfTimes.empty();

// add the times you want...
listOfTimes.append('<li tabindex="-1" role="option" class="k-item" unselectable="on">12:00 PM</li>');
listOfTimes.append('<li tabindex="-1" role="option" class="k-item" unselectable="on">12:01 PM</li>');
listOfTimes.append('<li tabindex="-1" role="option" class="k-item" unselectable="on">12:02 PM</li>');
// ...etc...

Or start with a fully populated list and just remove the ones you don't want. Either way, you can manipulate the list by just editing the <ul> with jQuery.

Upvotes: 2

Related Questions