Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

WinJS.UI.TimePicker object

Applies to Windows only

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.

ConstructorDescription
TimePicker

Initializes a new instance of a TimePicker control.

 

Events

The TimePicker object has these events.

EventDescription
onchange

Raised after any of the controls are changed by the user.

 

Methods

The TimePicker object has these methods.

MethodDescription
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.

PropertyAccess typeDescription

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 classDescription

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 supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Minimum supported phone

None supported

Namespace

WinJS.UI

Library

Ui.js

See also

HTML DatePicker and TimePicker controls sample (Windows)

 

 

Show:
© 2014 Microsoft