Customize DateTimePicker Templates in .NET MAUI

Updated on Jun 24, 2026

Use the Telerik UI for .NET MAUI DateTimePicker templates to customize the placeholder area, selected value display, and the popup header and footer. This article helps you choose the correct template for each part of the control and shows how to apply them together.

Which DateTimePicker Template Should You Use

Use the following templates depending on the part of the control that you want to customize:

Template	Type	Use It When
PlaceholderTemplate	ControlTemplate	You want to change what the control shows before the user picks a value.
DisplayTemplate	ControlTemplate	You want to customize how the selected date or time appears in the input area.
HeaderTemplate	ControlTemplate	You want to replace or extend the content in the popup header.
FooterTemplate	ControlTemplate	You want to replace or extend the content in the popup footer.

PlaceholderTemplate

Use PlaceholderTemplate when you want to replace the default placeholder content before the user selects a date or time.

The following example shows how to use the default PlaceholderTemplate:

XAML

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

DisplayTemplate

Use DisplayTemplate when you want to change how the selected value is rendered after the user picks a date or time.

The following example shows how to use the default DisplayTemplate:

XAML

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

HeaderTemplate

Use HeaderTemplate when you want to customize the popup header area.

The following example shows how to use the default HeaderTemplate:

XAML

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

FooterTemplate

Use FooterTemplate when you want to customize the popup footer area.

The following example shows how to use the default FooterTemplate:

XAML

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

Example with Default Templates

After you define the templates in your page resources, assign them to the DateTimePicker and its selector settings:

xaml

<telerik:RadDateTimePicker MinimumDate="2020,01,1"
                            MaximumDate="2025,12,31"
                            SpinnerFormat="MMM/dd/yyyy"
                            PlaceholderTemplate="{StaticResource Picker_PlaceholderView_ControlTemplate}"
                            DisplayTemplate="{StaticResource Picker_DisplayView_ControlTemplate}">
    <telerik:RadDateTimePicker.SelectorSettings>
        <telerik:PickerPopupSelectorSettings HeaderTemplate="{StaticResource PopupView_Header_ControlTemplate}"
                                           HeaderLabelText="Date Picker"
                                           FooterTemplate="{StaticResource PopupView_Footer_ControlTemplate}" />
    </telerik:RadDateTimePicker.SelectorSettings>
</telerik:RadDateTimePicker>

Customization Example

The following example builds a customized DateTimePicker step by step.

1. Define a simple DateTimePicker:

XAML

<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. Add the templates to the page resources.

Define a Custom PlaceholderTemplate

XAML

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

The following image shows the custom placeholder template:

Define a Custom DisplayTemplate

XAML

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

The following image shows the custom display template:

Define a Custom HeaderTemplate

XAML

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

Define a Custom FooterTemplate

XAML

<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 telerik namespace if it is not already declared in your XAML page:

xaml

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

The following image shows customized header and footer templates:

See Also

• Formatting
• Date Range
• Styling