WinJS.UI.DatePicker object

Article
01/26/2017

Allows users to pick a date value.

Syntax

<div data-win-control="WinJS.UI.DatePicker"></div>

var datePicker = new WinJS.UI.DatePicker(element, options);

Members

The DatePicker object has these types of members:

Constructors
Events
Methods
Properties

Constructors

The DatePicker object has these constructors.

Constructor	Description
DatePicker	Initializes a new instance of the DatePicker control.

Events

The DatePicker object has these events.

Event	Description
onchange	Raised after any of the controls are changed by the user.

Methods

The DatePicker object has these methods.

Method	Description
addEventListener	Adds an event listener.
dispatchEvent	Raises an event of the specified type and with additional properties.
dispose	Releases resources held by this DatePicker. Call this method when the DatePicker is no longer needed. After calling this method, the DatePicker becomes unusable.
raiseEvent	Raises an event of the specified type and with additional properties.
removeEventListener	Removes an event handler that the addEventListener method registered.

Properties

The DatePicker object has these properties.

Property	Access type	Description
calendar	Read/write	Gets or sets the calendar to use.
current	Read/write	Gets or sets the current date of the DatePicker. You can use either a date string or a Date object to set this property.
datePattern	Read/write	Gets or sets the display pattern for the date. The default date pattern is day.integer(2). You can change the date pattern by changing the number of integers displayed.
disabled	Read/write	Gets or sets whether the DatePicker is disabled.
element	Read/write	Gets or sets the DOM element for the DatePicker.
maxYear	Read/write	Gets or sets the maximum Gregorian year available for picking.
minYear	Read/write	Gets or sets the minimum Gregorian year available for picking.
monthPattern	Read/write	Gets or sets the display pattern for the month.
yearPattern	Read/write	Gets or sets the display pattern for the year.

Remarks

For more info about the DatePicker, see Quickstart: Adding a DatePicker.

Styling the DatePicker

CSS classes

To customize a DatePicker, 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-datepicker	Styles the entire DatePicker control.
win-datepicker-date	Styles the date control.
win-datepicker-month	Styles the month control.
win-datepicker-year	Styles the year control.

You can also customize the DatePicker by determining the order of the day/month/year elements. Use the win-order CSS class to specify the order. For example, to specify that the year control should appear first, you would specify win-order0.

Examples

The following code shows how to instantiate a DatePicker 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="date" data-win-control="WinJS.UI.DatePicker"></div>
<script type="text/javascript">
    WinJS.UI.processAll();
    var control = document.getElementByID("date").winControl;
</script>

The following code shows how to instantiate a DatePicker programmatically.

<div id="date"></div>
<script type="text/javascript">
    var dateDiv = document.getElementById("date");
    var datePicker = new WinJS.UI.DatePicker(dateDiv);
</script>

Requirements

Minimum WinJS version	WinJS 1.0
Namespace	WinJS.UI