Working with the New DatePicker Control in Windows 8.1

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Overview

As part of Windows 8.1, Microsoft plans to introduce over 5000 new APIs, making more features accessible to Windows developers. To make it easy for Windows Store developers, Microsoft is introducing a bunch of new controls to make common tasks easier.

One such control, which is being released as part of Windows 8.1, is the DatePicker control. As the name suggests, the DatePicker control allows a user to pick a localized date value. The DatePicker control resides in the Windows.UI.Xaml.Controls namespace and offers comboboxes – one each for month, day and year, which the users choose the value from. DatePicker control, supports customization to suit application requirements. The DatePicker control supports all the 9 calendar systems supported by Windows.

• Gregorian
• Hebrew
• Hijri
• Japanese
• Julian
• Korean
• Taiwan
• Thai
• UmAlQura

Using a DatePicker control is very simple. Simply drag and drop a DatePicker control into your XAML and you can start using it.

Hands On

Let’s create a simple Windows application that uses DatePicker control.

Create a new Windows Store project titled Windows8.1DatePickerDemo in Visual Studio 2013.

New Project

Drag a DatePicker and a Button control from ToolBox and drop it on MainPage.xaml.

Users will choose a date using the DatePicker control and the button will echo back the selected date when it is clicked.

Name the DatePicker control ‘myDatePicker’ and the button ‘buttonShowChosenDate’.

Add nine radio buttons, one for each CalendarIdentifer supported by Windows.

• Gregorian
• Hebrew
• Hijri
• Japanese
• Julian
• Korean
• Taiwan
• Thai
• UmAlQura

In our application, we will switch the calendars depending on the chosen CalendarIdentifier.

For that, we need to handler the Checked event for the radiobuttons.

        private void radioButtonGregorian_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonGregorian.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.Gregorian;
        }
 
        private void radioButtonJapanese_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonJapanese.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.Japanese;
        }
 
        private void radioButtonTaiwan_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonTaiwan.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.Taiwan;
        }
 
        private void radioButtonHebrew_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonHebrew.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.Hebrew;
        }
 
        private void radioButtonJulian_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonJulian.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.Julian;
        }
 
        private void radioButtonThai_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonThai.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.Thai;
        }
 
        private void radioButtonHijri_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonHijri.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.Hijri;
        }
 
        private void radioButtonKorean_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonKorean.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.Korean;
        }
 
        private void radioButtonUmAlQura_Checked(object sender, RoutedEventArgs e)
        {
            if ((bool)radioButtonUmAlQura.IsChecked)
                myDatePicker.CalendarIdentifier = CalendarIdentifiers.UmAlQura;
        }

Next, we will echo the chosen date in the Click event of the button.

        private async void buttonShowChosenDate_Click(object sender, RoutedEventArgs e)
        {
            Windows.UI.Popups.MessageDialog md = new Windows.UI.Popups.MessageDialog(myDatePicker.Date.ToString());
            await md.ShowAsync();
        }

Now, when we execute the application, you will notice that the date format presented in the DatePicker control varies depending on the Calendar chosen (through the radio buttons).

The date format presented in the DatePicker control varies depending on the Calendar chosen

Summary

In this article, we learned about the DatePicker control and how it can be used in a Windows Store application. I hope you have found this information useful.

About the Author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com