WinJS.UI.DatePicker object
.png)
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 |
|---|---|---|
Read/write |
Gets or sets the calendar to use. |
|
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. |
|
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. |
|
Read/write |
Gets or sets whether the DatePicker is disabled. |
|
Read/write |
Gets or sets the DOM element for the DatePicker. |
|
Read/write |
Gets or sets the maximum Gregorian year available for picking. |
|
Read/write |
Gets or sets the minimum Gregorian year available for picking. |
|
Read/write |
Gets or sets the display pattern for the month. |
|
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 |