UWP CalendarDatePicker
The CalendarDatePicker class represents a control that allows a UWP app user to pick a date from a calendar display. The UWP app developers can use a CalendarDatePicker to show a drop-down control that is optimized for picking a single date from a calendar view where the fullness of the calendar is important.
The CalendarDatePicker control is similar to the DatePicker control, but the DatePicker has no calendar view. The windows app developers can customize the CalendarDatePicker widget with a minimal amount of XAML or other code. The CalendarDatePicker control has an internal calendar view for picking a date. It also has a subset of CalendarView properties to let the windows developers customize it.
The CalendarDatePicker DateChanged event occurs when the date value is changed in a CalendarDatePicker widget. So, using this event, the Windows UWP developers can instantly get the CalendarDatePicker control’s selected date.
The CalendarDatePicker class’s Date property allows us to get or set the date currently set in the calendar picker. This Date property value type is DateTimeOffset which represents the date currently set in the calendar picker.
The following Windows UWP app development tutorial will demonstrate how to use the CalendarDatePicker control and how the developers can get the CalendarDatePicker widget’s selected date while a user makes a change. In this tutorial code, we also format the CalendarDatePicker control’s selected date using the ToString() method.
The CalendarDatePicker control is similar to the DatePicker control, but the DatePicker has no calendar view. The windows app developers can customize the CalendarDatePicker widget with a minimal amount of XAML or other code. The CalendarDatePicker control has an internal calendar view for picking a date. It also has a subset of CalendarView properties to let the windows developers customize it.
The CalendarDatePicker DateChanged event occurs when the date value is changed in a CalendarDatePicker widget. So, using this event, the Windows UWP developers can instantly get the CalendarDatePicker control’s selected date.
The CalendarDatePicker class’s Date property allows us to get or set the date currently set in the calendar picker. This Date property value type is DateTimeOffset which represents the date currently set in the calendar picker.
The following Windows UWP app development tutorial will demonstrate how to use the CalendarDatePicker control and how the developers can get the CalendarDatePicker widget’s selected date while a user makes a change. In this tutorial code, we also format the CalendarDatePicker control’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="Vertical"
Background="AntiqueWhite"
Padding="50,175,50,25"
>
<CalendarDatePicker
x:Name="CalendarDatePicker1"
Header="Select A Date"
DateChanged="CalendarDatePicker1_DateChanged"
/>
<TextBlock
x:Name="TextBlock1"
Foreground="DarkBlue"
FontSize="21"
TextWrapping="Wrap"
FontFamily="Consolas"
Margin="20"
/>
</StackPanel>
</Page>
MainPage.xaml.cs
using Windows.UI.Xaml.Controls;
namespace UniversalAppTutorials
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void CalendarDatePicker1_DateChanged(CalendarDatePicker sender, CalendarDatePickerDateChangedEventArgs args)
{
// Get the instance of CalendarDatePicker object
CalendarDatePicker calendarDatePicker = sender as CalendarDatePicker;
// Get the CalendarDatePicker selected date
TextBlock1.Text = "" + calendarDatePicker.Date;
// Format CalendarDatePicker selected date using ToString method.
TextBlock1.Text += "\nShort date: " + calendarDatePicker.Date.Value.ToString("d");
TextBlock1.Text += "\nLong date: " + calendarDatePicker.Date.Value.ToString("D");
TextBlock1.Text += "\nFull date and short time: " + calendarDatePicker.Date.Value.ToString("f");
TextBlock1.Text += "\nFull date and long time: " + calendarDatePicker.Date.Value.ToString("F");
TextBlock1.Text += "\nGeneral date time (short time): " + calendarDatePicker.Date.Value.ToString("g");
TextBlock1.Text += "\nGeneral date time (long time): " + calendarDatePicker.Date.Value.ToString("G");
TextBlock1.Text += "\nMonth pattern: " + calendarDatePicker.Date.Value.ToString("M");
TextBlock1.Text += "\nYear pattern: " + calendarDatePicker.Date.Value.ToString("Y");
}
}
}


- UWP - TimePicker example
- UWP - Format DatePicker selected date
- UWP - DatePicker example
- UWP - PasswordBox example
- UWP - Get ComboBox selected value
- UWP - ComboBox ItemsSource example
- UWP - ScrollViewer scroll to bottom
- UWP - ScrollViewer example
- UWP - How to add a Hyperlink to a TextBlock
- UWP - How to make TextBlock text selectable
- UWP - How to change TextBox style
- UWP - Select TextBox all text when get focus
- UWP - FlipView SelectionChanged event example
- UWP - Simple FlipView example
- UWP - How to set app window minimum size