WinJS.UI.TimePicker object

Allows users to select time values.
Syntax
var object = new WinJS.UI.TimePicker(parentObject);
<div data-win-control="WinJS.UI.TimePicker"></div>
Members
The TimePicker object has these types of members:
Constructors
The TimePicker object has these constructors.
| Constructor | Description |
|---|---|
| TimePicker |
Initializes a new instance of a TimePicker control. |
Events
The TimePicker object has these events.
| Event | Description |
|---|---|
| onchange |
Raised after any of the controls are changed by the user. |
Methods
The TimePicker object has these methods.
| Method | Description |
|---|---|
| addEventListener |
Registers an event handler for the specified event. |
| dispatchEvent |
Raises an event of the specified type and with additional properties. |
| dispose |
Releases resources held by this TimePicker. Call this method when the TimePicker is no longer needed. After calling this method, the TimePicker becomes unusable. |
| raiseEvent |
Raises an event of the specified type and with additional properties. |
| removeEventListener |
Removes a listener for the specified event. |
Properties
The TimePicker object has these properties.
| Property | Access type | Description |
|---|---|---|
|
Read/write |
Gets or sets the type of clock to display (12HourClock or 24HourClock). It defaults to the user setting. | |
|
Read/write |
Gets or sets the current time of the TimePicker. Note that the date value is always July 15, 2011. | |
|
Read/write |
Gets or sets a value that specifies whether the TimePicker is disabled. | |
|
Read-only |
Gets the DOM element for the TimePicker. | |
|
Read/write |
Gets or sets the display pattern for the hour. The default hour pattern is hour.integer(2). You can change the hour pattern by changing the number of integers displayed. | |
|
Read/write |
Gets or sets the minute increment. For example, 15 specifies that the TimePicker minute control should display only the choices 00, 15, 30, 45. | |
|
Read/write |
Gets or sets the display pattern for the minute. The default minute pattern is minute.integer(2). You can change the minute pattern by changing the number of integers displayed. | |
|
Read/write |
Gets or sets the display pattern for the period. The default period pattern is period.abbreviated(2). You can change the period pattern by changing the number of integers displayed. |
Remarks
For more info about using the TimePicker, see Quickstart: Adding a TimePicker.
Styling the TimePicker
CSS classes
To customize a TimePicker, you can define your own styles for these Cascading Style Sheets (CSS) classes (defined by the Windows Library for JavaScript style sheets):
| CSS class | Description |
|---|---|
|
Styles the entire TimePicker control. | |
|
Styles the hour control. | |
|
Styles the minute control. | |
|
Styles the period (AM/PM) control. |
You can also customize the TimePicker by determining the order of the minute/hour/period elements. Use the win-order CSS class to specify the order. For example, to specify that the period control should appear first, you would specify win-order0.
Examples
The following code shows how to instantiate a TimePicker declaratively and then get a reference to it in the code by using the special winControl property. You can use this property only on elements that host a WinJS control. For more info, see Quickstart: adding WinJS controls and styles.
<div id="time" data-win-control="WinJS.UI.TimePicker"></div> <script type="text/javascript"> WinJS.UI.processAll(); var control = document.getElementById("time).winControl; </script>
The following code shows how to instantiate a TimePicker programmatically.
<div id="time"></div> <script type="text/javascript"> var dateDiv = document.getElementById("time"); var datePicker = new WinJS.UI.TimePicker(dateDiv); </script>
Requirements
|
Minimum WinJS version |
WinJS 1.0 |
|---|---|
|
Namespace |
WinJS.UI |
See also