Formatting of the Dojo dijit/form/TimeTextBox dropdown

Question

I have a TimeTextBox in Dojo - it currently looks like this:

However, I want it to look like this (with the hours emphasized - but with 10 minute increments instead of 15):

What's the simplest way to do this? Currently, I have these props set:

<input id="${ns}atdExamStartTime" type="text" name="examStartTime" data-dojo-type="dijit/form/TimeTextBox"
style="width:8em;" required="true"
data-dojo-props="promptMessage:'Enter the start time for the exam', 
    invalidMessage:'This is not a valid time',
    rangeMessage:'Exams must be scheduled between 8am and 10pm',
    constraints:{min:'T08:00',max:'T21:59',clickableIncrement:'T00:10:00',visibleIncrement:'T00:10:00'}" />    

Thanks in advance!

Answer 1

I know this answer is a bit late, but I hope it can help someone in some way. It looks like your code should work, to me at least. Here is a working JS Fiddle with 10 minute increments displayed like you want:

dijit.form.TimeTextBox({
    type:"text",
    name:"timePicker",
    constraints:{
        formatLength:"short",
        pickerMin:"T08:00:00",
        pickerMax:"T22:00:00",
        clickableIncrement:"T00:10:00"
    }
});

Try it here: http://jsfiddle.net/skyWB/104/