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