User Tools

Site Tools


Date/Time Controls in UWP


Use CalendarDatePicker to pick a single date from a CalendarView.

<CalendarDatePicker x:Name="CalendarDatePicker1"
                    PlaceholderText="Select a date" />
// CalendarDatePicker1.Date is of type DateTimeOffset?
if (CalendarDatePicker1.Date != null)
    DateTime date = CalendarDatePicker1.Date.Value.Date;
    // ...
    CalendarDatePicker1.Date = null;


Use CalendarView to allow users to select multiple dates. The CalendarView has three views: the month view, year view, and decade view. You can specify a startup view by setting the DisplayMode property.


<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <CalendarView />

Quirk: You need to set the Grid's background to a ThemeResource to make the CalendarView work properly. Otherwise, your app will throw an AccessViolationException (more info here).


A value selected in a DatePicker is of type DateTimeOffset.

<DatePicker Header="When were you born?" />

Example: Format the day field to show the day of the month and the abbreviated day of the week. The year field is hidden by setting the YearVisible property to False:

<DatePicker DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False"/>

Example: Set a date programmatically:

// Set the default date to 3 months from the current date.
DatePicker1.Date = DateTimeOffset.Now.AddMonths(3);
// Set the default date to a specific date.
DatePicker1.Date = new DateTimeOffset(new DateTime(2014, 3, 28));
// Set the minimum year to the current year.
DatePicker1.MinYear = DateTimeOffset.Now;
// Set the minimum year and the maximum year.
// Note that we set the month to 2 to avoid time zone issues with January 1. 
DatePicker1.MinYear = new DateTimeOffset(new DateTime(2010, 2, 1));
DatePicker1.MaxYear = new DateTimeOffset(new DateTime(2030, 2, 1));

Example: Format a date programmatically:

// Example #1
DatePicker1.DayFormat = "{day.integer} ({dayofweek.full})";
// Example #2
DatePicker1.MonthFormat = "{month.integer}";

Example: Handle the DateChanged event. Also, format the selected date using DateTimeFormatter.The DateTimeFormatter class formats dates and times with the user's default settings.

<DatePicker x:Name="DatePicker1" Header="Select a date:" DateChanged="DatePicker1_DateChanged" />
using Windows.Globalization.DateTimeFormatting;
private void DatePicker1_DateChanged(object sender, DatePickerValueChangedEventArgs args)
    // Method #1
    DateTimeFormatter dateFormatter = new DateTimeFormatter("shortdate");
    Debug.WriteLine(dateFormatter.Format(args.NewDate)); // 10/19/2014
    // Method #2
    Debug.WriteLine(DateTimeFormatter.ShortDate.Format(args.NewDate)); // 10/19/2014

Example: Combine the values of the a TimePicker and a DatePicker into a single DateTimeOffset:

using Windows.Globalization.DateTimeFormatting;
DateTimeFormatter dateFormatter = new DateTimeFormatter("shortdate");
DateTimeFormatter timeFormatter = new DateTimeFormatter("shorttime");
// Use a calendar to determine Daylight Savings Time transition days.
Calendar calendar = new Calendar();
// The value of the selected time in a TimePicker is stored as a TimeSpan, 
// so it is possible to add it directly to the value of the selected date.
DateTimeOffset selectedDate = DatePicker1.Date;
DateTimeOffset combinedValue = new DateTimeOffset(
    new DateTime(selectedDate.Year, selectedDate.Month, selectedDate.Day) + TimePicker1.Time);
// If the day does not have 24 hours, then the user has selected a day in which 
// a Daylight Savings Time transition occurs.
// Validate the combination of the date and time values.
if (calendar.NumberOfHoursInThisPeriod != 24)
    Debug.WriteLine("A DST transition day selected");
    Debug.WriteLine("Combined value: " + 
        dateFormatter.Format(combinedValue) + " " + 


A value selected in a TimePicker is of type TimeSpan.

  • The TimePicker can use a 12-hour or 24-hour clock.
  • The pop-up portion of the TimePicker control uses TimePickerFlyout.


<TimePicker x:Name="TimePicker1" 
            Header="Select time" />

TimeSpan time = TimePicker1.Time;


<TimePicker ClockIdentifier="24HourClock" 
            Header="Worked hours" 
            Time="{Binding Path=WorkedHours, Mode=TwoWay" />

Example: Set the TimePicker's time programmatically:

// Set the time to 8 A.M.
TimePicker1.Time = new TimeSpan(8, 0, 0);

Example: Handle the TimeChanged event:

<TimePicker x:Name="TimePicker1" 
            Header="Select a time:" 
            TimeChanged="TimePicker1_TimeChanged" />
private void TimePicker1_TimeChanged(object sender, TimePickerValueChangedEventArgs args)
notes/uwp/datetimecontrols.txt · Last modified: 2020/08/26 (external edit)