Date and Time Picker Control in Windows Phone 8.1


In this article we will demonstrate the Date and time Picker Control in Windows Phone 8.1. The Date and Time Picker is the very important control whenever you want to provide the option in your app for the user to select a date and/or time. It display a list of dates and/or times in a Flyout.

It is a simple control but very much helpful.

DatePicker in Windows Phone 8.1 TimePicker in Windows Phone 8.1

                       DatePicker                                                        TimePicker

Step 1

To build a Windows Phone 8.1 application, ensure you have Visual Studio 2013 and the Windows Phone 8.1 SDK installed in your system.

Go to "New Project". Under "Installed" > "Templates" > "Visual C#" > "Store Apps" select "Windows Phone Apps" then select "Blank App (Windows Phone)" and provide it a name as you choose (here I am using "DateAndTimePicker").

Creating Blank Windows Phone App

Step 2

Navigate to the "MainPage.xaml" section of the project and add a "Button" Control and two "TextBlock" Controls to show the selected date and time .
Finally add a "DatePicker" control to your project.

  1. <Grid>  
  2.         <TextBlock x:Name="DateTextBlock" FontSize="36" HorizontalAlignment="Left" Height="50" Margin="25,35,0,0" TextWrapping="Wrap" Text="(date textBlock)" VerticalAlignment="Top" Width="346"/>  
  3.         <TextBlock x:Name="TimeTextBlock" FontSize="36" HorizontalAlignment="Left" Height="50" Margin="25,159,0,0" TextWrapping="Wrap" Text="(time textblock)" VerticalAlignment="Top" Width="346"/>  
  4.         <Button x:Name="ResultButton" FontSize="30" Content="Show Result" Click="ResultButton_Click" HorizontalAlignment="Left" Height="72" Margin="25,547,0,0" VerticalAlignment="Top" Width="346"/>  
  5.         <DatePicker x:Name="DemoDatePicker" Margin="25,322,231,258" HorizontalAlignment="Left" VerticalAlignment="Top" DateChanged="DemoDatePicker_DateChanged" />         
  6. </Grid> 

Your MainPage will look like this:

MainPage in Windows Phone

Step 3

Now it's time to add some C# code to the project. Navigate to the "Button" Event Handler in your project and add the following line of code:

  1. private void ResultButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     //Showing the Selected date from the DatePicker  
  4.     //into the TextBlock(DateTextBlock)  
  5.     DateTextBlock.Text = DemoDatePicker.Date.ToString();  
  6. }  
  8. private void DemoDatePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e)  
  9. {  
  10.     //Code in this block is trigerred whenever   
  11.    //the Date is Changed  

Now compile and run your project. When you change the date from the DatePicker Control and press the "Show Result" Button, you will see the date that you selected in the TextBlock(DateTextBlock).

Your output window will look like this:

Displaying Date in Windows Phone

Step 4

Now that's it for the DatePicker Control. It's now time to work on the TimePicker Control. Navigate to the XAML section of your code and add the TimePicker Control as in the following:

  1. <TimePicker x:Name="DemoTimePicker" Margin="247,322,29,261" HorizontalAlignment="Right" TimeChanged="DemoTimePicker_TimeChanged"/> 

Your MainPage will now may be like this:

Updated Main Page in WP

Step 5

Navigate to the MainPage.xaml.cs page and in the "Show Result" Button Event Handler add the following line of code:

  1. //Showing the Selected Time from the TimePicker  
  2. //into the TextBlock(TimeTextBlock)  
  3. TimeTextBlock.Text = DemoTimePicker.Time.ToString(); 

Now your complete code will be like this:

  1. private void ResultButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     //Showing the Selected date from the DatePicker  
  4.     //into the TextBlock(DateTextBlock)  
  5.     DateTextBlock.Text = DemoDatePicker.Date.ToString();  
  7.     //Showing the Selected Time from the TimePicker  
  8.    //into the TextBlock(TimeTextBlock)  
  9.     TimeTextBlock.Text = DemoTimePicker.Time.ToString();  
  10. }  
  12. private void DemoDatePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e)  
  13. {  
  14.     //Code in this block is trigerred whenever   
  15.    //the Date is Changed  
  16. }  
  18. private void DemoTimePicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e)  
  19. {  
  20.     //Code inside this block is trigerred whenever  
  21.    //the Time is Changed  

Compile and run your project. Now when you change the time from TimePicker Control and press the "Show Result" button the selected time will then be reflected in the TextBlock (TimeTextBlock).

The output window will be like this:

Displaying Time in Windows Phone

That's all for this article. If you have any kind of query yhen feel free to ask or comment. I am including the source code also, so that you can go through it.

Thank You.