WinJS.UI.TimePicker object

Article
01/26/2017

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
Events
Methods
Properties

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
clock	Read/write	Gets or sets the type of clock to display (12HourClock or 24HourClock). It defaults to the user setting.
current	Read/write	Gets or sets the current time of the TimePicker. Note that the date value is always July 15, 2011.
disabled	Read/write	Gets or sets a value that specifies whether the TimePicker is disabled.
element	Read-only	Gets the DOM element for the TimePicker.
hourPattern	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.
minuteIncrement	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.
minutePattern	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.
periodPattern	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
win-timepicker	Styles the entire TimePicker control.
win-timepicker-hour	Styles the hour control.
win-timepicker-minute	Styles the minute control.
win-timepicker-period	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

Share via