Date and Time Picker Control in Windows Phone 8.1

Introduction

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                                                        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").

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.

<Grid>
        <TextBlock x:Name="DateTextBlock" FontSize="36" HorizontalAlignment="Left" Height="50" Margin="25,35,0,0" TextWrapping="Wrap" Text="(date textBlock)" VerticalAlignment="Top" Width="346"/>
        <TextBlock x:Name="TimeTextBlock" FontSize="36" HorizontalAlignment="Left" Height="50" Margin="25,159,0,0" TextWrapping="Wrap" Text="(time textblock)" VerticalAlignment="Top" Width="346"/>
        <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"/>
        <DatePicker x:Name="DemoDatePicker" Margin="25,322,231,258" HorizontalAlignment="Left" VerticalAlignment="Top" DateChanged="DemoDatePicker_DateChanged" />
</Grid>

Your MainPage will look like this:

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:

private void ResultButton_Click(object sender, RoutedEventArgs e)
{
    //Showing the Selected date from the DatePicker
    //into the TextBlock(DateTextBlock)
    DateTextBlock.Text = DemoDatePicker.Date.ToString();
}

private void DemoDatePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e)
{
    //Code in this block is trigerred whenever
   //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:

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:

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

Your MainPage will now may be like this:

Step 5

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

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

Now your complete code will be like this:

private void ResultButton_Click(object sender, RoutedEventArgs e)
{
    //Showing the Selected date from the DatePicker
    //into the TextBlock(DateTextBlock)
    DateTextBlock.Text = DemoDatePicker.Date.ToString();

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

private void DemoDatePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e)
{
    //Code in this block is trigerred whenever
   //the Date is Changed
}

private void DemoTimePicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e)
{
    //Code inside this block is trigerred whenever
   //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:

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.