RadControls for Metro (XAML)–Date and Time Pickers

Surprisingly, Visual Studio for Windows 8 does not come with either a date or a time picker. Not to worry, we’ve got you covered.

The RadControls For Metro suite of controls includes a very flexible DatePicker and TimePicker control that I’ll illustrate in this posting.

To get started, be sure to add a reference to the RadControls for Metro to your application.

As usual, we’ll begin with the data. This time the data is very simple. We start by creating a class representing a hotel or conference reservation,

public class Reservation
   {
       public DateTime ArriveDate { get; set; }
       public DateTime DepartDate { get; set; }
   }

Notice that the two properties are of type DateTime.  I will use each to fill in and obtain information from a date picker and a time picker (rather than using four properties: ArriveDate, ArriveTime, DepartDate, DepartTime).

The initial values might be obtained from a database, or a web service or, in this case, they will be hardwired in the constructor,

public MainPage()
{
    this.InitializeComponent();
 
    var res = new Reservation();
    res.ArriveDate = new DateTime( 2012, 7, 10, 14, 0, 0 );
    res.DepartDate = new DateTime( 2012, 7, 17, 9, 0, 0 );
    DataContext = res;
 
}
 

Let’s turn to the XAML page.  To begin, add two namespaces,

xmlns:telerik="using:Telerik.UI.Xaml.Controls"
xmlns:telerikCore="using:Telerik.Core"
 

To make all this work, we’ll use two RadDatePicker instances and two RadTimePicker instances, all in a StackPanel. 

<StackPanel Margin="50">
    <TextBlock Text="Reservation"
               FontSize="40" />
    <telerik:RadDatePicker Header="Select arriving date"
                           x:Name="arriveDatePicker"
                           DisplayValueFormat="dddd, MMMM dd, yyyy"
                           ItemLength="90"
                           Margin="10"
                           Value="{Binding ArriveDate, <br>                             Converter={StaticResource nullableConverter}}" />
    <telerik:RadTimePicker Header="Arrival time"
                           x:Name="startTimePicker"
                           ItemLength="90"
                           Margin="10"
                           Value="{Binding ArriveDate, <br>                             Converter={StaticResource nullableConverter}}" />
    <telerik:RadDatePicker Header="Select departure date"
                           x:Name="departDatePicker"
                           DisplayValueFormat="dddd, MMMM dd, yyyy"
                           Margin="10"
                           ItemLength="90"
                           Value="{Binding DepartDate, <br>                             Converter={StaticResource nullableConverter}}" />
    <telerik:RadTimePicker Header="Departure time"
                           x:Name="departTimePicker"
                           ItemLength="90"
                           Margin="10"
                           Value="{Binding DepartDate, <br>                             Converter={StaticResource nullableConverter}}" />
 
</StackPanel>

Notice that the value for both the first RadDatePicker and the first RadTimePicker are identical; we are able to use the same date time object and the controls extract the data they need.