Working with the New DatePicker Control in Windows 8.1

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
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
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



Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: January 28, 2015 Check out this webcast and join Jeff Sloyer, IBM Developer Evangelist and Master Inventor, for a tutorial for building cloud-based applications. Using IBM's platform as a service, Bluemix, Jeff will show you how to architect and assemble cloud-based applications built for cloud scale. Leveraging the power of microservices, developers can quickly translate monolithic applications to a cloud-based microarchitecture. This hour-long session introduces the concepts and …

  • Even with today's emphasis on mobility, desktop innovation still matters. The ThinkCentre® Tiny-in-One 23 sets a new standard for transformational PC possibilities, bringing breakthrough modular all-in-one ease of use, Intel® performance, integrated security, and legendary durability together with the ThinkCentre Tiny PC family. The ThinkCentre Tiny-in-One 23 gives IT a single desktop platform that carefully balances performance, efficiency, and flexibility. The breakthrough all-in-one form factor …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date