Windows Dev Center

Guidelines for date and time controls

Date and time controls let you view and set the date and time. This article provides design guidelines and helps you pick the right control.

Which date or time control should you use?

There are four date and time controls to choose from:

ControlFeatures
Calendar viewExample of calendar viewDisplays a single date or a range of dates in month, year, or decade format. Doesn't have a picker surface.
Calendar date pickerExample of calendar date pickerHas calendar view's functionality, but includes a picker surface that allows you to select a single date or a range of dates.
Date pickerExample of date pickerA compact alternative to calendar date picker. It can be used in forms, or just when space is at a premium.
Time pickerExample of time pickerCompact picker that lets you choose a single time. Doesn't display the current time.

 

Calendar view

Calendar view lets you see a single date or a range of dates in month, year, or decade format. This control is read-only and has no picker surface for date entry. If you'd like a similar control with a picker surface, see the calendar date picker control.

Calendar view has three expanded views: month, year, and decade.

Month view, a standard monthly calendar:

Example of the calendar view, month view

 

Year view, the calendar year with months:

Example of the calendar view, year view

 

Decade view, a 10-year range:

Example of the calendar view, decade view

 

Calendar date picker

Calendar date picker is the same as calendar view, but with a date entry field above the calendar. You can select a single date or a range of dates in month, year, or decade format. The entry point displays placeholder text if a date has not been set.

The three expanded views include month, year, and decade. Each expanded view includes the date entry field at the top.

Month view, a standard monthly calendar:

Example of the calendar date picker, month view

 

Year view, the calendar year with months:

Example of the calendar date picker, year view

 

Decade view, a 10-year range:

Example of the calendar date picker, decade view

 

Date picker

The date picker control provides a standardized way to choose a specific date. The entry point displays the chosen date, and selecting the entry point expands a picker surface for the user to make a selection. The date picker overlays other UI; it doesn't push other UI out of the way.

Tapping on the entry point expands a picker surface for the user to make a selection:

Example of the date picker control, in expanded state

Selecting the control's entry point expands it vertically from the middle:

Example of the date picker expanding

Time picker

The time picker is used to select a single time for things like appointments. It's a static display that is set by the user and doesn't display the current time. The entry point displays the chosen time, and selecting the entry point expands a picker surface for the user to make a selection. The time picker overlays other UI; it doesn't push other UI out of the way.

Tapping on the control's entry point expands it vertically from the middle:

Example of the time picker expanding

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

Related topics

For developers (XAML)
CalendarView class
CalendarDatePicker class
DatePicker class
TimePicker class
For developers (HTML)
Quickstart: Adding a DatePicker
Quickstart: Adding a TimePicker
WinJS.UI.TimePicker object

 

 

Show:
© 2015 Microsoft