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

  • Lenovo recommends Windows 8 Pro. "I dropped my laptop getting out of the taxi." This probably sounds familiar to most IT professionals. If your employees are traveling, you know their devices are in for a rough go. Whether it's a trip to the conference room or a convention out of town, any time equipment leaves a user's desk it is at risk of being put into harm's way. Stay connected at all times, whether at the office or on the go, with agile, durable, and flexible devices like the Lenovo® …

  • U.S. companies are desperately trying to recruit and hire skilled software engineers and developers, but there is simply not enough quality talent to go around. Tiempo Development is a nearshore software development company. Our headquarters are in AZ, but we are a pioneer and leader in outsourcing to Mexico, based on our three software development centers there. We have a proven process and we are experts at providing our customers with powerful solutions. We transform ideas into reality.

Most Popular Programming Stories

More for Developers

RSS Feeds

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