Share via


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
  • 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

See also

HTML DatePicker and TimePicker controls sample (Windows)