time to display in dropdown lists

问题

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/

来源：https://stackoverflow.com/questions/26167944/time-to-display-in-dropdown-lists

标签

javascript

jquery

html

dojo