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
Windows 10 requirements
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.

Date picker control

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&lt;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 keyDescription
DatePickerSpacerFillSpacer color
DatePickerSpacerFillDisabledSpacer color when disabled
DatePickerHeaderForegroundHeader text color
DatePickerHeaderForegroundDisabledHeader text color when disabled
DatePickerButtonForegroundButton text color
DatePickerButtonForegroundPointerOverButton text color on hover
DatePickerButtonForegroundPressedButton text color when pressed
DatePickerButtonForegroundDisabledButton text color when disabled
DatePickerButtonForegroundFocusedButton text color when focused
DatePickerButtonBackgroundButton background color at rest
DatePickerButtonBackgroundPointerOverButton background color on hover
DatePickerButtonBackgroundPressedButton background color when pressed
DatePickerButtonBackgroundDisabledButton background color when disabled
DatePickerButtonBackgroundFocusedButton background color when focused
DatePickerButtonBorderBrushButton border color at rest
DatePickerButtonBorderBrushPointerOverButton border color on hover
DatePickerButtonBorderBrushPressedButton border color when pressed
DatePickerButtonBorderBrushDisabledButton border color when disabled
DateTimePickerFlyoutButtonForegroundPointerOverFlyout button foreground color on hover
DateTimePickerFlyoutButtonForegroundPressedFlyout button foreground color when pressed
DateTimePickerFlyoutButtonBackgroundFlyout button background color at rest
DateTimePickerFlyoutButtonBackgroundPointerOverFlyout button background color on hover
DateTimePickerFlyoutButtonBackgroundPressedFlyout button background color when pressed
DateTimePickerFlyoutButtonBorderBrushFlyout button border color at rest
DateTimePickerFlyoutButtonBorderBrushPointerOverFlyout button border color on hover
DateTimePickerFlyoutButtonBorderBrushPressedFlyout 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 systemIdentifier stringLocalized?
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.

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.

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

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 patternformat 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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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

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

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"/>
Value
DataTemplate DataTemplate DataTemplate DataTemplate

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.

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.

Additional features and requirements
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.
Additional features and requirements
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.

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

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.

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

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 patternformat 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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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

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"/>
Value
Orientation Orientation Orientation Orientation

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

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 patternformat 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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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

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

See Also