WinJS.UI.DatePicker object (Windows)

8 out of 17 rated this helpful - Rate this topic

Allows users to pick a date value.

Syntax


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

JavaScript


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

Members

The DatePicker object has these types of members:

Events
Methods
Properties

Events

The DatePicker object has these events.

Event	Description
onchange	Occurs when any of the controls are changed by the user.

Methods

The DatePicker object has these methods.

Method	Description
addEventListener	Adds an event listener.
DatePicker	Initializes a new instance of the DatePicker control.
dispatchEvent	Raises an event of the specified type and with additional properties.
raiseEvent	Raises an event of the specified type and with additional properties.
removeEventListener	Removes a listener for the specified event.

Properties

The DatePicker object has these properties.

Property	Description
calendar	Gets or sets the calendar to use.
current	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	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	Specifies whether the DatePicker is disabled.
element	Gets the DOM element for the DatePicker.
maxYear	Gets or sets the maximum Gregorian year available for picking.
minYear	Gets or sets the minimum Gregorian year available for picking.
monthPattern	Gets or sets the display pattern for the month. The default month pattern is month.abbreviated. You can change the month pattern to the following values: month.full. The full name of the month. month.abbreviated(n). You can use abbreviated with or without specifying the number of letters in the abbreviation. If you do specify the number of letters, the actual length of the month name that appears may vary. month.solo.full. A representation of the month that is suitable for stand-alone display. You can also use month.solo.abbreviated(n). month.integer(n). You can use integer with or without specifying the number of integers.
yearPattern	Gets or sets the display pattern for the year. The default year pattern is year.full. You can change the year pattern to the following values: year.abbreviated(n). You can use abbreviated with or without specifying the number of letters in the abbreviation.

Remarks

To find out more about the DatePicker, see Quickstart: Adding a DatePicker.

For more information about using the DatePicker, see the Date and time picker sample at Windows Store app samples.

Styling the DatePicker

CSS classes

To customize a DatePicker, you can define your own styles for these 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 Windows Library for JavaScript (WinJS) control. For more information, see Quickstart: adding WinJS controls and styles .

JavaScript


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

JavaScript


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

Requirements

Minimum supported client	Windows 8 [Windows Store apps only]
Minimum supported server	Windows Server 2012 [Windows Store apps only]
Namespace	WinJS.UI
Library	Ui.js

Build date: 12/5/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)