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

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.

SelectingDateSelectingTime


jesseLiberty
About the Author

Jesse Liberty

 has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter

Comments