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

  • This report outlines the future look of Forrester's solution for security and risk (S&R) executives working on building an identity and access management strategy for the extended enterprise. We designed this report to help you understand and navigate the major business and IT trends affecting identity and access management (IAM) during the next five years. IAM in 2012 has become a tool not just for security but also for business agility. Competitive challenges push businesses into the cloud and encourage …

  • On-demand Event Event Date: February 12, 2015 The evolution of systems engineering with the SysML modeling language has resulted in improved requirements specification, better architectural definition, and better hand-off to downstream engineering. Agile methods have proven successful in the software domain, but how can these methods be applied to systems engineering? Check out this webcast and join Bruce Powel Douglass, author of Real-Time Agility, as he discusses how agile methods have had a tremendous …

Most Popular Programming Stories

More for Developers

RSS Feeds

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