DatePicker
DatePicker
DatePicker
DatePicker
Class
Definition
Represents a control that allows a user to pick a date value.
public : class DatePicker : Control, IDatePicker, IDatePicker2public class DatePicker : Control, IDatePicker, IDatePicker2Public Class DatePicker Inherits Control Implements IDatePicker, IDatePicker2// This API is not available in Javascript.
<DatePicker .../>
- Inheritance
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Remarks
Use a DatePicker to let a user enter a date value. The user picks the date using ComboBox selection for month, day, and year values. You can customize the DatePicker in various ways to suit your app.

You can use a DateTimeFormatter object to format the contents of each ComboBox selector. For more info, see Date picker.
Note
Some date formats should be avoided if the date picker might be displayed in a small area, such as adding the full string value of the day of week. These strings can be long and might be clipped if the DatePicker's width is forced to be small.
DateTime and Calendar values
The date objects used in a DatePicker have a different representation depending on your programming language. C# and Visual Basic use the System.DateTimeOffset structure that is part of .NET. Visual C++ component extensions (C++/CX) uses the Windows::Foundation::DateTime structure. A related concept is the Calendar class, which influences how dates are interpreted in context. All Windows Runtime apps can use the Windows.Globalization.Calendar class. C# and Visual Basic apps can alternatively use the System.Globalization.Calendar class, which has very similar functionality. (Windows Runtime app can use the base .NET Calendar class but not the specific implementations for example GregorianCalendar.)
.NET also supports a type named DateTime, which is implicitly convertible to a DateTimeOffset. So you might see a "DateTime" type being used in .NET code that's used to set values that are really DateTimeOffset. For more info on the difference between DateTime and DateTimeOffset, see Remarks in DateTimeOffset.
Control style and template
You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.
Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.
This table shows the resources used by the DatePicker control.
| Resource key | Description |
|---|---|
| DatePickerSpacerFill | Spacer color |
| DatePickerSpacerFillDisabled | Spacer color when disabled |
| DatePickerHeaderForeground | Header text color |
| DatePickerHeaderForegroundDisabled | Header text color when disabled |
| DatePickerButtonForeground | Button text color |
| DatePickerButtonForegroundPointerOver | Button text color on hover |
| DatePickerButtonForegroundPressed | Button text color when pressed |
| DatePickerButtonForegroundDisabled | Button text color when disabled |
| DatePickerButtonForegroundFocused | Button text color when focused |
| DatePickerButtonBackground | Button background color at rest |
| DatePickerButtonBackgroundPointerOver | Button background color on hover |
| DatePickerButtonBackgroundPressed | Button background color when pressed |
| DatePickerButtonBackgroundDisabled | Button background color when disabled |
| DatePickerButtonBackgroundFocused | Button background color when focused |
| DatePickerButtonBorderBrush | Button border color at rest |
| DatePickerButtonBorderBrushPointerOver | Button border color on hover |
| DatePickerButtonBorderBrushPressed | Button border color when pressed |
| DatePickerButtonBorderBrushDisabled | Button border color when disabled |
| DateTimePickerFlyoutButtonForegroundPointerOver | Flyout button foreground color on hover |
| DateTimePickerFlyoutButtonForegroundPressed | Flyout button foreground color when pressed |
| DateTimePickerFlyoutButtonBackground | Flyout button background color at rest |
| DateTimePickerFlyoutButtonBackgroundPointerOver | Flyout button background color on hover |
| DateTimePickerFlyoutButtonBackgroundPressed | Flyout button background color when pressed |
| DateTimePickerFlyoutButtonBorderBrush | Flyout button border color at rest |
| DateTimePickerFlyoutButtonBorderBrushPointerOver | Flyout button border color on hover |
| DateTimePickerFlyoutButtonBorderBrushPressed | Flyout button border color when pressed |
Constructors
DatePicker() DatePicker() DatePicker() DatePicker()
Initializes a new instance of the DatePicker class.
public : DatePicker()public DatePicker()Public Sub New()// This API is not available in Javascript.
Properties
CalendarIdentifier CalendarIdentifier CalendarIdentifier CalendarIdentifier
Gets or sets the calendar system to use.
public : PlatForm::String CalendarIdentifier { get; set; }public string CalendarIdentifier { get; set; }Public ReadWrite Property CalendarIdentifier As string// This API is not available in Javascript.
<DatePicker CalendarIdentifier="calendarSystem"/>
- Value
- PlatForm::String string string string
The calendar system to use.
Examples
To set the CalendarIdentifier in XAML, use the identifier string, as shown here.
<DatePicker x:Name="julianDatePicker" CalendarIdentifier="JulianCalendar"/>
To set the CalendarIdentifier on code, use the value returned by the corresponding CalendarIdentifiers property, as shown here.
DatePicker julianDatePicker = new DatePicker();
julianDatePicker.CalendarIdentifier = Windows.Globalization.CalendarIdentifiers.Julian;
Remarks
Set the CalendarIdentifier property to specify the calendar system used by the DatePicker. The DatePicker supports all calendar systems in the CalendarIdentifiers class. To set the CalendarIdentifier in XAML, use the identifier string. To set it in code, use the corresponding CalendarIdentifiers property. See the Examples section.
This table lists the supported calendar systems. See the CalendarIdentifiers documentation for more information about each calendar system.
| Calendar system | Identifier string | Localized? |
|---|---|---|
| Gregorian | "GregorianCalendar" | Yes. |
| Hebrew | "HebrewCalendar" | No. Strings always in Hebrew. |
| Hijri | "HijriCalendar" | No. Strings always in Arabic. |
| Japanese | "JapaneseCalendar" | No. Strings always in Japanese. |
| Julian | "JulianCalendar" | Yes. |
| Korean | "KoreanCalendar" | Yes. |
| Taiwan | "TaiwanCalendar" | Yes. |
| Thai | "ThaiCalendar" | Yes. |
| UmAlQura | "UmAlQuraCalendar" | No. Strings always in Arabic. |
The string content of each ComboBox in the DatePicker is created by a DateTimeFormatter. The DateTimeFormatter uses the CalendarIdentifier set on the DatePicker to determine which calendar to use to format the content. If the CalendarIdentifier is not set, the DateTimeFormatter uses the default calendar for the app’s preferred language (see ApplicationLanguages ).
If the specified calendar system is localized, it will display in the app’s preferred language. For example, if you specify a Korean calendar and the app language is "en-us", the DatePicker will display in English because there are translations for the Korean calendar. However, if you specify a Japanese calendar and the app preferred language is "en-us", the DatePicker will still display in Japanese because there are no translations for the Japanese calendar.
- See Also
CalendarIdentifierProperty CalendarIdentifierProperty CalendarIdentifierProperty CalendarIdentifierProperty
Gets the identifier for the CalendarIdentifier dependency property.
public : static DependencyProperty CalendarIdentifierProperty { get; }public static DependencyProperty CalendarIdentifierProperty { get; }Public Static ReadOnly Property CalendarIdentifierProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the CalendarIdentifier dependency property.
Date Date Date Date
Gets or sets the date currently set in the date picker.
public : DateTime Date { get; set; }public DateTimeOffset Date { get; set; }Public ReadWrite Property Date As DateTimeOffset// This API is not available in Javascript.
- Value
- DateTime DateTimeOffset DateTimeOffset DateTimeOffset
The date currently set in the picker.
Remarks
The Date property can't be set as a XAML attribute string, because the Windows Runtime XAML parser doesn't have a conversion logic for converting strings to dates as DateTime / DateTimeOffset objects. Here are some suggested ways these objects can be defined in code and set to a date other than the current date.
- DateTime: Instantiate a Windows.Globalization.Calendar object (it is initialized to the current date). Set properties such as Day or Year, or call methods such as AddMonths, to adjust the date. Then, call Calendar.GetDateTime and use the returned DateTime to set Date.
- DateTimeOffset: Call the constructor. For the inner System.DateTime, use the constructor signature. Or, construct a default DateTimeOffset (it is initialized to the current date) and call methods such as AddMonths.
Another possible technique is to define a date that's available as a data object or in the data context, then set Date as a XAML attribute that references a {Binding} markup extension that can access the date as data.
- See Also
DateProperty DateProperty DateProperty DateProperty
Gets the identifier for the Date dependency property.
public : static DependencyProperty DateProperty { get; }public static DependencyProperty DateProperty { get; }Public Static ReadOnly Property DateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Date dependency property.
DayFormat DayFormat DayFormat DayFormat
Gets or sets the display format for the day value.
public : PlatForm::String DayFormat { get; set; }public string DayFormat { get; set; }Public ReadWrite Property DayFormat As string// This API is not available in Javascript.
<DatePicker DayFormat="formatString"/>
- Value
- PlatForm::String string string string
The display format for the day value.
Examples
Here's a DatePicker formatted using format templates, and a DatePicker formatted using format strings. Both DatePicker controls look the same when the app is run because the formatting is equivalent.
<!-- DatePicker formatted using format templates. -->
<DatePicker DayFormat="day" MonthFormat="month.numeric" YearFormat="year.abbreviated"/>
<!-- DatePicker formatted using format patterns. -->
<DatePicker DayFormat="{}{day.integer}" MonthFormat="{}{month.integer}" YearFormat="{}{year.abbreviated}"/>
Here's a DatePicker that combines 2 format patterns to display both the numeric date and the day of the week in the day picker. There is no equivalent format template for this format.
<DatePicker DayFormat="{}{day.integer} {dayofweek.abbreviated}"/>
Remarks
Change the format of the day picker by setting the DayFormat property.
The string content of each ComboBox in the DatePicker is created by a DateTimeFormatter. You inform the DateTimeFormatter how to format the day value by providing a string that is either a format template or a format pattern. Common templates and patterns for day values are listed in the following table.
| format pattern | format template |
|---|---|
{day.integer} | {day.integer(n)} | day |
{dayofweek.full} | {dayofweek.abbreviated} | {dayofweek.abbreviated(n)} | dayofweek | dayofweek.full | dayofweek.abbreviated |
In some cases, using a format pattern gives you more precise control over the formatting. For example, you can use a format pattern to specify that the day picker always shows 2 digits, including a leading 0 when needed. You can also combine multiple format patterns. For example, you can combine the {day} and {dayofweek.abbreviated} formats to make the day picker show both the numeric date and the day of the week, like this: 14 Thu. See the Examples section for more info.
For the complete list of format templates and format patterns, see the Remarks section of the DateTimeFormatter class documentation.
Note
Some date formats should be avoided if the date picker might be displayed in a small area, such as adding the full string value of the day of week. These strings can be long and might be clipped if the DatePicker's width is forced to be small.
- See Also
DayFormatProperty DayFormatProperty DayFormatProperty DayFormatProperty
Gets the identifier for the DayFormat dependency property.
public : static DependencyProperty DayFormatProperty { get; }public static DependencyProperty DayFormatProperty { get; }Public Static ReadOnly Property DayFormatProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the DayFormat dependency property.
DayVisible DayVisible DayVisible DayVisible
Gets or sets a value that indicates whether the day selector is shown.
public : PlatForm::Boolean DayVisible { get; set; }public bool DayVisible { get; set; }Public ReadWrite Property DayVisible As bool// This API is not available in Javascript.
<DatePicker DayVisible="bool"/>
- Value
- PlatForm::Boolean bool bool bool
true if the day selector is shown; otherwise, false. The default is true.
Remarks
By default, the DatePicker shows ComboBox elements to select the month, day, and year. Set DayVisible to false to hide the ComboBox that displays or changes the day component of a date.
- See Also
DayVisibleProperty DayVisibleProperty DayVisibleProperty DayVisibleProperty
Gets the identifier for the DayVisible dependency property.
public : static DependencyProperty DayVisibleProperty { get; }public static DependencyProperty DayVisibleProperty { get; }Public Static ReadOnly Property DayVisibleProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the DayVisible dependency property.
Header Header Header Header
Gets or sets the content for the control's header.
public : PlatForm::Object Header { get; set; }public object Header { get; set; }Public ReadWrite Property Header As object// This API is not available in Javascript.
<DatePicker Header="headerString"/>
- Value
- PlatForm::Object object object object
The content of the control's header. The default is null.
Remarks
You can set a data template for the Header value by using the HeaderTemplate property.
- See Also
HeaderProperty HeaderProperty HeaderProperty HeaderProperty
Identifies the Header dependency property.
public : static DependencyProperty HeaderProperty { get; }public static DependencyProperty HeaderProperty { get; }Public Static ReadOnly Property HeaderProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Header dependency property.
HeaderTemplate HeaderTemplate HeaderTemplate HeaderTemplate
Gets or sets the DataTemplate used to display the content of the control's header.
public : DataTemplate HeaderTemplate { get; set; }public DataTemplate HeaderTemplate { get; set; }Public ReadWrite Property HeaderTemplate As DataTemplate// This API is not available in Javascript.
<DatePicker HeaderTemplate="resourceReferenceToDataTemplate"/>
The template that specifies the visualization of the header object. The default is null.
- See Also
HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty
Identifies the HeaderTemplate dependency property.
public : static DependencyProperty HeaderTemplateProperty { get; }public static DependencyProperty HeaderTemplateProperty { get; }Public Static ReadOnly Property HeaderTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the HeaderTemplate dependency property.
LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode
Gets or sets a value that specifies whether the area outside of a light-dismiss UI is darkened.
public : LightDismissOverlayMode LightDismissOverlayMode { get; set; }public LightDismissOverlayMode LightDismissOverlayMode { get; set; }Public ReadWrite Property LightDismissOverlayMode As LightDismissOverlayMode// This API is not available in Javascript.
- Value
- LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode
A value of the enumeration that specifies whether the area outside of a light-dismiss UI is darkened. The default is Auto.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Remarks
Transient UI, such as the open DatePickerFlyout of a DatePicker, closes when you click or tap outside of it. This is called light-dismiss. "Overlay" refers to the area outside of a light-dismiss UI.
By default, the "overlay" is darkened on the Xbox, and not darkened on other devices families. You can set LightDismissOverlayMode to On to make your app darken the "overlay" area on all device families, or set it to Off to not darken the "overlay" area on all device families.
Version compatibility
The LightDismissOverlayMode property is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.
To avoid exceptions when your app runs on previous versions of Windows 10, do not set this property in XAML or use it without performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this property before you set it.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.DatePicker", "LightDismissOverlayMode"))
{
datePicker1.LightDismissOverlayMode = LightDismissOverlayMode.On;
}
}
LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty
Identifies the LightDismissOverlayMode dependency property.
public : static DependencyProperty LightDismissOverlayModeProperty { get; }public static DependencyProperty LightDismissOverlayModeProperty { get; }Public Static ReadOnly Property LightDismissOverlayModeProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the LightDismissOverlayMode dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
MaxYear MaxYear MaxYear MaxYear
Gets or sets the maximum Gregorian year available for picking.
public : DateTime MaxYear { get; set; }public DateTimeOffset MaxYear { get; set; }Public ReadWrite Property MaxYear As DateTimeOffset// This API is not available in Javascript.
- Value
- DateTime DateTimeOffset DateTimeOffset DateTimeOffset
The maximum Gregorian year available for picking.
Remarks
The MaxYear property can't be set as a XAML attribute string, because the Windows Runtime XAML parser doesn't have a conversion logic for converting strings to dates as DateTime / DateTimeOffset objects. Here are some suggested ways these objects can be defined in code and set to a date other than the current date.
- DateTime: Instantiate a Windows.Globalization.Calendar object (it is initialized to the current date). Set Year, or call AddYears, to adjust the date. Then, call Calendar.GetDateTime and use the returned DateTime to set MaxYear.
- DateTimeOffset: Call the constructor. For the inner System.DateTime, use the constructor signature. Or, construct a default DateTimeOffset (it is initialized to the current date) and call AddYears.
Another possible technique is to define a date that's available as a data object or in the data context, then set MaxYear as a XAML attribute that references a {Binding} markup extension that can access the date as data.
- See Also
MaxYearProperty MaxYearProperty MaxYearProperty MaxYearProperty
Gets the identifier for the MaxYear dependency property.
public : static DependencyProperty MaxYearProperty { get; }public static DependencyProperty MaxYearProperty { get; }Public Static ReadOnly Property MaxYearProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the MaxYear dependency property.
MinYear MinYear MinYear MinYear
Gets or sets the minimum Gregorian year available for picking.
public : DateTime MinYear { get; set; }public DateTimeOffset MinYear { get; set; }Public ReadWrite Property MinYear As DateTimeOffset// This API is not available in Javascript.
- Value
- DateTime DateTimeOffset DateTimeOffset DateTimeOffset
The minimum Gregorian year available for picking.
Remarks
The MinYear property can't be set as a XAML attribute string, because the Windows Runtime XAML parser doesn't have a conversion logic for converting strings to dates as DateTime / DateTimeOffset objects. Here are some suggested ways these objects can be defined in code and set to a date other than the current date.
- DateTime: Instantiate a Windows.Globalization.Calendar object (it is initialized to the current date). Set Year, or call AddYears, to adjust the date. Then, call Calendar.GetDateTime and use the returned DateTime to set MinYear.
- DateTimeOffset: Call the constructor. For the inner System.DateTime, use the constructor signature. Or, construct a default DateTimeOffset (it is initialized to the current date) and call AddYears.
Another possible technique is to define a date that's available as a data object or in the data context, then set MinYear as a XAML attribute that references a {Binding} markup extension that can access the date as data.
- See Also
MinYearProperty MinYearProperty MinYearProperty MinYearProperty
Gets the identifier for the MinYear dependency property.
public : static DependencyProperty MinYearProperty { get; }public static DependencyProperty MinYearProperty { get; }Public Static ReadOnly Property MinYearProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the MinYear dependency property.
MonthFormat MonthFormat MonthFormat MonthFormat
Gets or sets the display format for the month value.
public : PlatForm::String MonthFormat { get; set; }public string MonthFormat { get; set; }Public ReadWrite Property MonthFormat As string// This API is not available in Javascript.
<DatePicker MonthFormat="formatString"/>
- Value
- PlatForm::String string string string
The display format for the month value.
Examples
Here's a DatePicker formatted using format templates, and a DatePicker formatted using format strings. Both DatePicker controls look the same when the app is run because the formatting is equivalent.
<!-- DatePicker formatted using format templates. -->
<DatePicker DayFormat="day" MonthFormat="month.numeric" YearFormat="year.abbreviated"/>
<!-- DatePicker formatted using format patterns. -->
<DatePicker DayFormat="{}{day.integer}" MonthFormat="{}{month.integer}" YearFormat="{}{year.abbreviated}"/>
Here's a DatePicker that combines 2 format patterns to display both the month number and name in the month picker. There is no equivalent format template for this format.
<DatePicker MonthFormat="{}{month.integer} {month.abbreviated}"/>
Remarks
Change the format of the month picker by setting the MonthFormat property.
The string content of each ComboBox in the DatePicker is created by a DateTimeFormatter. You instruct the DateTimeFormatter how to format the month value by providing a string that is either a format template or a format pattern. Common templates and patterns for month values are listed in the following table.
| format pattern | format template |
|---|---|
{month.integer} | {month.integer(n)} | month.numeric |
{month.full} | {month.abbreviated} | {month.abbreviated(n)} | month | month.full | month.abbreviated |
In some cases, using a format pattern gives you more precise control over the formatting. For example, you can use a format pattern to specify that the month picker always shows 2 digits, including a leading 0 when needed. You can also combine multiple format patterns. For example, you can combine the {month.integer} and {month.abbreviated} formats to make the month picker show the month number and name, like this: 12 Dec. See the Examples section for more info.
For the complete list of format templates and format patterns, see the Remarks section of the DateTimeFormatter class documentation.
Note
Some date formats should be avoided if the date picker might be displayed in a small area, such as adding the full string value of the day of week. These strings can be long and might be clipped if the DatePicker's width is forced to be small.
- See Also
MonthFormatProperty MonthFormatProperty MonthFormatProperty MonthFormatProperty
Gets the identifier for the MonthFormat dependency property.
public : static DependencyProperty MonthFormatProperty { get; }public static DependencyProperty MonthFormatProperty { get; }Public Static ReadOnly Property MonthFormatProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the MonthFormat dependency property.
MonthVisible MonthVisible MonthVisible MonthVisible
Gets or sets a value that indicates whether the month selector is shown.
public : PlatForm::Boolean MonthVisible { get; set; }public bool MonthVisible { get; set; }Public ReadWrite Property MonthVisible As bool// This API is not available in Javascript.
<DatePicker MonthVisible="bool"/>
- Value
- PlatForm::Boolean bool bool bool
true if the month selector is shown; otherwise, false. The default is true.
Remarks
By default, the DatePicker shows ComboBox elements to select the month, day, and year. Set MonthVisible to false to hide the ComboBox that displays or changes the month component of a date.
- See Also
MonthVisibleProperty MonthVisibleProperty MonthVisibleProperty MonthVisibleProperty
Gets the identifier for the MonthVisible dependency property.
public : static DependencyProperty MonthVisibleProperty { get; }public static DependencyProperty MonthVisibleProperty { get; }Public Static ReadOnly Property MonthVisibleProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the MonthVisible dependency property.
Orientation Orientation Orientation Orientation
Gets or sets a value that indicates whether the day, month, and year selectors are stacked horizontally or vertically.
public : Orientation Orientation { get; set; }public Orientation Orientation { get; set; }Public ReadWrite Property Orientation As Orientation// This API is not available in Javascript.
<DatePicker Orientation="Horizontal"/>
-or-
<DatePicker Orientation="Vertical"/>
A named constant of the enumeration that indicates whether the day, month, and year selectors are stacked horizontally or vertically. The default is Horizontal.
Remarks
By default, the DatePicker shows the month, day, and year pickers in a horizontal row. You can change them to a vertical stack by setting the Orientation property to Vertical.
OrientationProperty OrientationProperty OrientationProperty OrientationProperty
Gets the identifier for the Orientation dependency property.
public : static DependencyProperty OrientationProperty { get; }public static DependencyProperty OrientationProperty { get; }Public Static ReadOnly Property OrientationProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Orientation dependency property.
YearFormat YearFormat YearFormat YearFormat
Gets or sets the display format for the year value.
public : PlatForm::String YearFormat { get; set; }public string YearFormat { get; set; }Public ReadWrite Property YearFormat As string// This API is not available in Javascript.
<DatePicker YearFormat="formatString"/>
- Value
- PlatForm::String string string string
The display format for the year value.
Examples
Here's a DatePicker formatted using format templates, and a DatePicker formatted using format strings. Both DatePicker s look the same when the app is run because the formatting is equivalent.
<!-- DatePicker formatted using format templates. -->
<DatePicker DayFormat="day" MonthFormat="month.numeric" YearFormat="year.abbreviated"/>
<!-- DatePicker formatted using format patterns. -->
<DatePicker DayFormat="{}{day.integer}" MonthFormat="{}{month.integer}" YearFormat="{}{year.abbreviated}"/>
Remarks
Change the format of the year picker by setting the YearFormat property.
The string content of each ComboBox in the DatePicker is created by a DateTimeFormatter. You inform the DateTimeFormatter how to format the year value by providing a string that is either a format template or a format pattern. Common templates and patterns for year values are listed in the following table.
| format pattern | format template |
|---|---|
{year.full} | {year.abbreviated} | {year.abbreviated(n)} | year | year.full | year.abbreviated |
{era.full} | {era.abbreviated} | {era.abbreviated(n)} | n/a |
Note
"Era" only applies when the CalendarIdentifier is set to the Japanese calendar. For the Japanese calendar, era is shown in the year picker.
For the complete list of format templates and format patterns, see the Remarks section of the DateTimeFormatter class documentation.
Note
Some date formats should be avoided if the date picker might be displayed in a small area, such as adding the full string value of the day of week. These strings can be long and might be clipped if the DatePicker's width is forced to be small.
- See Also
YearFormatProperty YearFormatProperty YearFormatProperty YearFormatProperty
Gets the identifier for the YearFormat dependency property.
public : static DependencyProperty YearFormatProperty { get; }public static DependencyProperty YearFormatProperty { get; }Public Static ReadOnly Property YearFormatProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the YearFormat dependency property.
YearVisible YearVisible YearVisible YearVisible
Gets or sets a value that indicates whether the year selector is shown.
public : PlatForm::Boolean YearVisible { get; set; }public bool YearVisible { get; set; }Public ReadWrite Property YearVisible As bool// This API is not available in Javascript.
<DatePicker YearVisible="bool"/>
- Value
- PlatForm::Boolean bool bool bool
true if the year selector is shown; otherwise, false. The default is true.
Remarks
By default, the DatePicker shows ComboBox elements to select the month, day, and year. Set MonthVisible to false to hide the ComboBox that displays or changes the year component of a date.
- See Also
YearVisibleProperty YearVisibleProperty YearVisibleProperty YearVisibleProperty
Gets the identifier for the YearVisible dependency property.
public : static DependencyProperty YearVisibleProperty { get; }public static DependencyProperty YearVisibleProperty { get; }Public Static ReadOnly Property YearVisibleProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the YearVisible dependency property.
Events
DateChanged DateChanged DateChanged DateChanged
Occurs when the date value is changed.
public : event EventHandler DateChanged<DatePickerValueChangedEventArgs>public event EventHandler DateChanged<DatePickerValueChangedEventArgs>Public Event DateChanged<DatePickerValueChangedEventArgs>// This API is not available in Javascript.
<DatePicker DateChanged="eventhandler" />
Remarks
When you handle this event, use the OldDate and NewDate properties of the DatePickerValueChangedEventArgs event data for your logic. These properties use different data types depending on your programming language (C# and Visual Basic use System.DateTimeOffset; Visual C++ component extensions (C++/CX) uses Windows::Foundation::DateTime).
- See Also