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

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

2. Define the template.

   <ControlTemplate x:Key="placeholderTemplate">
   <Button Text="{TemplateBinding Placeholder}" 
           FontAttributes="Bold" 
           TextColor="White"
           BackgroundColor="#B73562" 
           HeightRequest="50"
           Command="{TemplateBinding ToggleCommand}" />
   </ControlTemplate>
   

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

1. Define the DatePicker:

   <ControlTemplate x:Key="displayTemplate">
     <Button Text="{TemplateBinding DisplayString}" 
             TextColor="White" 
             BackgroundColor="#7BAEFF"
             HeightRequest="50"
             Command="{TemplateBinding ToggleCommand}" />
   </ControlTemplate>
   

2. Define the template.

   <ControlTemplate x:Key="placeholderTemplate">
   <Button Text="{TemplateBinding Placeholder}" 
           FontAttributes="Bold" 
           TextColor="White"
           BackgroundColor="#B73562" 
           HeightRequest="50"
           Command="{TemplateBinding ToggleCommand}" />
   </ControlTemplate>
   

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

1. Define the DatePicker:

   <ControlTemplate x:Key="displayTemplate">
     <Button Text="{TemplateBinding DisplayString}" 
             TextColor="White" 
             BackgroundColor="#7BAEFF"
             HeightRequest="50"
             Command="{TemplateBinding ToggleCommand}" />
   </ControlTemplate>
   

2. Define the template.

   <ControlTemplate x:Key="headerTemplate">
     <Grid>
         <Label Text="Date Picker"
                Padding="20"
                TextColor="White"
                VerticalTextAlignment="Center"
                HorizontalTextAlignment="Center"
                BackgroundColor="#B73562"/>
     </Grid>
   </ControlTemplate>
   

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

1. Define the DatePicker:

   <ControlTemplate x:Key="displayTemplate">
     <Button Text="{TemplateBinding DisplayString}" 
             TextColor="White" 
             BackgroundColor="#7BAEFF"
             HeightRequest="50"
             Command="{TemplateBinding ToggleCommand}" />
   </ControlTemplate>
   

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

3. Add the following namespace:

   xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
   

   The following image shows the end result.

See Also

• Formatting the Telerik UI for .NET MAUI DatePicker
• .NET MAUI DatePicker Styling
• .NET MAUI DatePicker Product Page