.NET MAUI DatePicker Templates
The Telerik UI for .NET MAUI DatePicker provides a set of templates for customizing its elements.
Placeholder Template
The PlaceholderTemplate
(ControlTemplate
) defines the template visualized for the placeholder of the DatePicker. The following example demonstrates how to set the default placeholder template.
<ControlTemplate x:Key="Picker_PlaceholderView_ControlTemplate">
<Grid>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{TemplateBinding ToggleCommand}" />
</Grid.GestureRecognizers>
<Label Text="{TemplateBinding Placeholder}"
Style="{TemplateBinding PlaceholderLabelStyle}"
AutomationId="PickerPlaceholderLabel"/>
</Grid>
</ControlTemplate>
You can also customize the placeholder template.
-
Define the DatePicker:
<telerik:RadDatePicker MinimumDate="2020,01,1" MaximumDate="2025,12,31" SpinnerFormat="MMM/dd/yyyy" PlaceholderTemplate="{StaticResource placeholderTemplate}" DisplayTemplate="{StaticResource displayTemplate}" AutomationId="datePicker"> <telerik:RadDatePicker.PopupSettings> <telerik:PickerPopupSettings HeaderTemplate="{StaticResource headerTemplate}" HeaderLabelText="This is the Header Template" FooterTemplate="{StaticResource footerTemplate}"/> </telerik:RadDatePicker.PopupSettings> <telerik:RadDatePicker.DropDownSettings> <telerik:PickerDropDownSettings FooterTemplate="{StaticResource footerTemplate}"/> </telerik:RadDatePicker.DropDownSettings> </telerik:RadDatePicker>
-
Define the template.
<ControlTemplate x:Key="placeholderTemplate"> <Button Text="{TemplateBinding Placeholder}" FontAttributes="Bold" TextColor="White" BackgroundColor="#B73562" HeightRequest="50" Command="{TemplateBinding ToggleCommand}" /> </ControlTemplate>
-
Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
The following image shows the end result.
Display Template
The DisplayTemplate
(ControlTemplate
) defines the template visualized when the picked date/time of the DatePicker is displayed. The following example demonstrates how to set the display template.
<ControlTemplate x:Key="Picker_DisplayView_ControlTemplate">
<Grid>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{TemplateBinding ToggleCommand}" />
</Grid.GestureRecognizers>
<Label Text="{TemplateBinding DisplayString}"
Style="{TemplateBinding DisplayLabelStyle}"
AutomationId="PickerDisplayLabel"/>
</Grid>
</ControlTemplate>
You can also customize the display template.
-
Define the DatePicker:
<ControlTemplate x:Key="displayTemplate"> <Button Text="{TemplateBinding DisplayString}" TextColor="White" BackgroundColor="#7BAEFF" HeightRequest="50" Command="{TemplateBinding ToggleCommand}" /> </ControlTemplate>
-
Define the template.
<ControlTemplate x:Key="placeholderTemplate"> <Button Text="{TemplateBinding Placeholder}" FontAttributes="Bold" TextColor="White" BackgroundColor="#B73562" HeightRequest="50" Command="{TemplateBinding ToggleCommand}" /> </ControlTemplate>
-
Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
The following image shows the end result.
Header Template
The HeaderTemplate
(ControlTemplate
) defines what will be displayed inside the dialog (popup) header of the DatePicker. The following example demonstrates how to set the header template.
<ControlTemplate x:Key="PopupView_Header_ControlTemplate">
<telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
BorderColor="{TemplateBinding BorderColor}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
HeightRequest="{TemplateBinding HeightRequest}">
<Label Text="{TemplateBinding HeaderLabelText}"
Style="{TemplateBinding HeaderLabelStyle}"
AutomationId="PickerPopupHeaderLabel"/>
</telerik:RadBorder>
</ControlTemplate>
You can also customize the header template.
-
Define the DatePicker:
<ControlTemplate x:Key="displayTemplate"> <Button Text="{TemplateBinding DisplayString}" TextColor="White" BackgroundColor="#7BAEFF" HeightRequest="50" Command="{TemplateBinding ToggleCommand}" /> </ControlTemplate>
-
Define the template.
<ControlTemplate x:Key="headerTemplate"> <Grid> <Label Text="Date Picker" Padding="20" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" BackgroundColor="#B73562"/> </Grid> </ControlTemplate>
-
Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
Footer Template
The FooterTemplate
(ControlTemplate
) defines what will be displayed inside the dialog (popup) footer of the DatePicker. The following example demonstrates how to set the footer template.
<ControlTemplate x:Key="PopupView_Footer_ControlTemplate">
<telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
BorderColor="{TemplateBinding BorderColor}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<OnPlatform x:TypeArguments="View">
<On Platform="Android, iOS, MacCatalyst">
<HorizontalStackLayout Spacing="0" HorizontalOptions="End">
<telerik:RadButton Text="{TemplateBinding CancelButtonText}"
Style="{TemplateBinding CancelButtonStyle}"
Command="{TemplateBinding CancelCommand}"
AutomationId="PickerPopupCancelButton"/>
<telerik:RadButton Text="{TemplateBinding AcceptButtonText}"
Style="{TemplateBinding AcceptButtonStyle}"
Command="{TemplateBinding AcceptCommand}"
AutomationId="PickerPopupOkButton"/>
</HorizontalStackLayout>
</On>
<On Platform="WinUI">
<HorizontalStackLayout Spacing="0" HorizontalOptions="End">
<Button Text="{TemplateBinding AcceptButtonText}"
Style="{TemplateBinding AcceptButtonStyle}"
Command="{TemplateBinding AcceptCommand}"
AutomationId="PickerPopupOkButton"/>
<Button Text="{TemplateBinding CancelButtonText}"
Style="{TemplateBinding CancelButtonStyle}"
Command="{TemplateBinding CancelCommand}"
AutomationId="PickerPopupCancelButton"/>
</HorizontalStackLayout>
</On>
</OnPlatform>
</telerik:RadBorder>
</ControlTemplate>
You can also customize the footer template.
-
Define the DatePicker:
<ControlTemplate x:Key="displayTemplate"> <Button Text="{TemplateBinding DisplayString}" TextColor="White" BackgroundColor="#7BAEFF" HeightRequest="50" Command="{TemplateBinding ToggleCommand}" /> </ControlTemplate>
-
Define the template.
<ControlTemplate x:Key="footerTemplate"> <HorizontalStackLayout Spacing="0" HorizontalOptions="FillAndExpand" BackgroundColor="#B73562"> <telerik:RadButton Text="Cancel" WidthRequest="80" TextColor="White" BackgroundColor="Transparent" Command="{TemplateBinding CancelCommand}" /> <telerik:RadButton Text="OK" WidthRequest="80" TextColor="White" BackgroundColor="Transparent" Command="{TemplateBinding AcceptCommand}" /> </HorizontalStackLayout> </ControlTemplate>
-
Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
The following image shows the end result.