问题:

I can use jquery or dojo or simple HTML to show hours and minutes in separate dropdown list. Please suggest. Below is the sample code:

<input id="time" data-dojo-type="dijit/form/TimeTextBox" required="true" data-dojo-props="constraints: { timePattern: 'HH:mm:ss', clickableIncrement: 'T00:05:00', visibleIncrement: 'T00:05:00', visibleRange: 'T01:00:00' }" />

回答1:

I don't know much about dojo but i got this far if it helps:

Time: <input id="timeHours" data-dojo-type="dijit/form/TimeTextBox" required="true" data-dojo-props="constraints: { timePattern: 'HH', clickableIncrement: 'T01:05:00', visibleIncrement: 'T01:00:00', visibleRange: 'T24:00:00' }" /> : <input id="timeMins" data-dojo-type="dijit/form/TimeTextBox" required="true" data-dojo-props="constraints: { timePattern: 'mm', clickableIncrement: 'T00:05:00', visibleIncrement: 'T00:05:00', visibleRange: 'T00:60:00' }" />  require([     "dojo/_base/lang", "dijit/registry", "dojo/ready", "dijit/form/TimeTextBox", "dojo/parser" ], function(lang, registry, ready) {     ready(function() {         var timeH = registry.byId("timeHours"),             timeM = registry.byId("timeMins");     }); });

回答2:

Since I'm working on Dojo and looking at lots of TimeTextBox questions on SO, I figured I can answer some of them.

Here's a JS Fiddle I made just for this question. I used increments of an hour and only display the hours, then I do the same for the minutes. If you want 5 minute intervals instead, change

pickerMax: 'T00:59:00', clickableIncrement: 'T00:01:00', visibleIncrement: 'T00:01:00'

pickerMax: 'T00:55:00', clickableIncrement: 'T00:05:00', visibleIncrement: 'T00:05:00'

NOTE: pickerMin and pickerMax require Dojo 1.10.4.

h = new dijit.form.TimeTextBox({     constraints: {         timePattern: 'HH',         pickerMin: 'T00:00:00',         pickerMax: 'T23:00:00',         clickableIncrement: 'T01:00:00',         visibleIncrement: 'T01:00:00'     } }); m = new dijit.form.TimeTextBox({     constraints: {         timePattern: 'mm',         pickerMin: 'T00:00:00',         pickerMax: 'T00:59:00',         clickableIncrement: 'T00:01:00',         visibleIncrement: 'T00:01:00'     } });

Try it here: http://jsfiddle.net/tfpjmbs2/1/

转载请标明出处:time to display in dropdown lists

文章来源: time to display in dropdown lists

标签

dojo