共用方式為


WinJS.UI.DatePicker object

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

See also

HTML DatePicker and TimePicker controls sample (Windows)