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

  • Live Event Date: December 11, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT Market pressures to move more quickly and develop innovative applications are forcing organizations to rethink how they develop and release applications. The combination of public clouds and physical back-end infrastructures are a means to get applications out faster. However, these hybrid solutions complicate DevOps adoption, with application delivery pipelines that span across complex hybrid cloud and non-cloud environments. Check out this …

  • CentreCorp is a fully integrated and diversified property management and real estate service company, specializing in the "shopping center" segment, and is one of the premier retail service providers in North America. Company executives travel a great deal, carrying a number of traveling laptops with critical current business data, and no easy way to back up to the network outside the office. Read this case study to learn how CentreCorp implemented a suite of business continuity services that included …

Most Popular Programming Stories

More for Developers

RSS Feeds