Telerik RadDatePicker Control For Windows Phone

In this article we will discuss the Telerik RadDatePicker control. You can the download Telerik RadControl for Windows Phone from here.

The RadDatePicker control provides all the functionality of a standard DatePicker control of Windows Phone 7 along with the following added functionality

1. Runtime validation
2. Smoother animation
3. Formatting of different special date in a different style.

To work with RadDatePicker control the following references need to be added,

Working with RadDatePicker

To work with RadDatePicker, you need to add Telerik.Windows.Controls namespace on the xaml as below,

And you can create a Date Picker as below:

If you want to change the look, display and selector of the control, you can very much do that using the formatter properties. You can apply two different types of formatting on the RadDatePicker.



The DisplayValueFormat property of the RadDatePicker controls allows you to format the selection of the date. It takes a string input to format the display of the date. You can apply DisplayValueFormat as below:

After applying formatting you should get output as below:



The SelectorFormat property of the RadDatePicker control allows you to remove any of the date components from selection. For example, if you only want to show day and month only you need to remove Y from the selectorformat . You can do remove year as below:



You should get expected date selection as below:



If you want to set a maximum and minimum date for the selection, you can do that by setting a value for the MaxValue and MinValue properties of the RadDatePicker control.



You can fetch the selected value either as a DateTime type or as a String.



The RadDatePicker control comes with two buttons, Ok and Cancel. By default images used in these buttons are taken from locations:

• /Images/DateTimePickerOK.png
• /Images/DateTimePickerCancel.png

There are three events exposed on the RadDatePicker control.



By putting it all together, you can use the RadDatePicker control as below:

<phone:PhoneApplicationPage
x:Class="RadControlsWindowsPhoneApp3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerikcontrols="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<telerikcontrols:RadDatePicker x:Name="datepicker"
DisplayValueFormat="{}{0:dd, MMMM, yyyy}"
SelectorFormat="d/m"
MaxValue="01/01/2020"
MinValue="11/11/2000"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

In this way you can work with the RadDatePicker control. I hope this article is useful. Thanks for reading.