UWP - How to use DatePicker

UWP DatePicker

The DatePicker class represents a control that allows a UWP app user to pick a date value. The UWP app developers can use a DatePicker control to let UWP app users enter a date value. The user picks the date using ComboBox selection for month, day, and year values. The UWP app developers can customize the DatePicker widget’s default look.

The DatePicker widget shows the day, month, and year by default. The UWP app developers can hide any field that they don't need. To hide a field from the DatePicker widget, set its corresponding fieldVisible property to false.

A DateTimeFormatter creates the string content of each ComboBox in the DatePicker. The .net developers can use a string that is either a format template or a format pattern to specify the format.

The DatePicker DateChanged event occurs when the date value is changed in a DatePicker widget. So, using this event, the UWP developers can instantly get the DatePicker widget’s selected date.

The DatePicker class’s Date property allows us to get or set the date currently set in the date picker. This Date property value type is DateTimeOffset which represents the date currently set in the picker.

The DatePicker widget has both Date and SelectedDate properties. The difference between the Date and SelectedDate properties is that Date is not nullable, while SelectedDate is nullable.

The following UWP app development tutorial will demonstrate how to use the DatePicker widget and how can get the DatePicker widget’s selected date while a user makes a change. Here we also format the DatePicker widget’s selected date using the ToString() method.

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel 
        x:Name="stack_panel1" 
        Orientation="Horizontal"
        Background="GhostWhite"
        Padding="50"
        >
        <DatePicker
            x:Name="DatePicker1"
            DateChanged="DatePicker1_DateChanged"
            />
        <TextBlock
            x:Name="TextBlock1"
            Foreground="Navy"
            FontSize="22"
            TextWrapping="Wrap"
            Margin="10,75,10,10"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void DatePicker1_DateChanged(object sender, DatePickerValueChangedEventArgs e)
        {
            // Get the instance of DatePicker object
            DatePicker datePicker = sender as DatePicker;

            // When date changed
            TextBlock1.Text = "You selected:";

            // Get the DatePicker selected date
            TextBlock1.Text += "\n" + datePicker.Date;

            // Format the DatePicker selected date
            TextBlock1.Text += "\n" + datePicker.Date.ToString("dd-MM-yyyy");
            TextBlock1.Text += "\n" + datePicker.Date.ToString("dd/MMM/yyyy");
        }
    }
}