dijit/form/TimeTextBox¶
Authors: | Doug Hays, Nikolai Onken, Marcus Reimann, Craig Riecke |
---|---|
Developers: | ?- |
since: | V? |
TimeTextBox widgets are time input controls that allow either typing or choosing a time from any time-picker widget.
Introduction¶
dijit/form/TimeTextBox
:
- is a mapped form control
- validates against locale-specific i18n rules
- also validates against developer-provided
constraints
likemin
,max
, etc.
Options defined by the dojo.date package to alter the way times are formatted and parsed can be specified in the TimeTextBox constraints
object.
Usage¶
Standard Time Format¶
To prevent the ambiguity in specifying time formats, TimeTextBox allows only one time format THH:MM:SS
when specifying times declaratively in HTML markup or when communicating with a server:
- T00:00:30 means 30 seconds after midnight
- T17:30:00 means 5:30 PM
However, when you get the widget’s current value
programmatically on the client, the returned value will be the native JavaScript Date object.
The date portion of this value should be ignored.
Examples¶
Programmatic example¶
require(["dojo/ready", "dijit/form/TimeTextBox"], function(ready, TimeTextBox){
ready(function(){
new TimeTextBox({name: "progval", value: new Date(),
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00'
}
}, "progval");
});
});
<label for="progval">Drop down Time box:</label>
<input id="progval" />
Declarative example¶
require(["dojo/parser", "dijit/form/TimeTextBox"]);
<label for="time1">Drop down Time box:</label>
<input type="text" name="date1" id="time1" value="T15:00:00"
data-dojo-type="dijit/form/TimeTextBox"
onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
required="true" />
<br>string value: <input id="val" value="value not changed" readonly="readonly" disabled="disabled" />
Accessibility¶
See the Accessibility Section in dijit.form.ValidationTextBox
The time picker popup associated with the TimeTextBox is not yet fully accessible. However, the TimeTextBox will still meet accessibility requirements as long as the developer provides the validation parameters promptMessage and invalidMessage when creating the TimeTextBox. These messages are implemented in a format that is accessible to all users.