.NET MAUI DateTimePicker Styling

Updated on Aug 11, 2026

Use the .NET MAUI DateTimePicker styling API to customize the input area and the popup or dropdown content. You can also style the buttons that switch between date and time selection based on the PickerMode setting.

Choose the Correct Style Property

Use the following properties to style the DateTimePicker:

• BackgroundColor—Defines the background color of the picker.
• BorderColor—Defines the border color of the picker.
• BorderThickness—Specifies the border thickness of the picker. Its default value is new Thickness(0,0,0,1).
• CornerRadius—Specifies the corner radius of the picker.
• ClearButtonStyle (type Style with target type RadButton)—Defines the style applied to the Clear button.
• ToggleButtonStyle (type Style with target type RadButton)—Specifies the style of the toggle button that opens the popup or dropdown.
• PlaceholderLabelStyle (type Style with target type Label)—Specifies the style applied to the label defined in the default placeholder template.
• DisplayLabelStyle (type Style with target type Label)—Defines the style applied to the label that is displayed when a date or time is selected.
• TabStripItemStyle (type Style with target type telerik:TabViewHeaderItem)—Specifies the style applied to the Date and Time tab buttons inside the popup or dropdown.

The following style properties apply to the spinner controls inside the popup or dropdown:

• SpinnerStyle (type Style with target type telerik:RadSpinner)—Defines the style applied to the spinner item and the selected item.
• SpinnerHeaderStyle (type Style with target type Label)—Specifies the style applied to each spinner header label.
• SelectionHighlightStyle (type Style with target type telerik:RadBorder)—Specifies the style applied to the border that highlights the selection.

Namespaces

When the style targets a Telerik control, use the following namespace in your XAML page:

xaml

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

Styling Examples

The following examples show how to apply the DateTimePicker styling properties:

Define the RadDateTimePicker

XAML

<telerik:RadDateTimePicker BorderColor="#8660C5"
                           SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
                           SpinnerStyle="{StaticResource spinnerStyle}"
                           SelectionHighlightStyle="{StaticResource selectionHighlightStyle}"
                           DisplayLabelStyle="{StaticResource displayLabelStyle}"
                           PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}"
                           ClearButtonStyle="{StaticResource clearButtonStyle}"
                           ToggleButtonStyle="{StaticResource toggleButtonStyle}"
                           AreSpinnerHeadersVisible="True"
                           IsClearButtonVisible="True"
                           IsToggleButtonVisible="True"
                           AutomationId="dateTimePicker"/>

Define the SpinnerStyle

XAML

<Style TargetType="telerik:RadSpinner" x:Key="spinnerStyle">
    <Setter Property="ItemStyle">
        <Setter.Value>
            <Style TargetType="telerik:SpinnerItemView">
                <Setter Property="TextColor" Value="#4A4949"/>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="SelectedItemStyle">
        <Setter.Value>
            <Style TargetType="telerik:SpinnerItemView">
                <Setter Property="TextColor" Value="Black"/>
                <Setter Property="FontAttributes" Value="Bold"/>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="HeightRequest" Value="240"/>
</Style>

Define the SpinnerHeaderStyle

XAML

<Style TargetType="Label" x:Key="spinnerHeaderStyle">
    <Setter Property="TextColor" Value="Black"/>
    <Setter Property="FontAttributes" Value="Bold"/>
    <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
    <Setter Property="VerticalOptions" Value="FillAndExpand"/>
    <Setter Property="HorizontalTextAlignment" Value="Center"/>
    <Setter Property="VerticalTextAlignment" Value="Center"/>
</Style>

Define the SelectionHighlightStyle

XAML

<Style TargetType="telerik:RadBorder" x:Key="selectionHighlightStyle">
    <Setter Property="BorderColor" Value="#8660C5"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="VerticalOptions" Value="Center"/>
    <Setter Property="BackgroundColor" Value="Transparent"/>
</Style>

Define the PlaceholderLabelStyle

XAML

<Style TargetType="Label" x:Key="placeholderLabelStyle">
    <Setter Property="TextColor" Value="#4A4949"/>
    <Setter Property="VerticalTextAlignment" Value="Center"/>
    <Setter Property="HorizontalTextAlignment" Value="Center"/>
    <Setter Property="Margin" Value="10"/>
</Style>

Define the DisplayLabelStyle

XAML

<Style TargetType="Label" x:Key="displayLabelStyle">
    <Setter Property="TextColor" Value="#151950"/>
    <Setter Property="VerticalTextAlignment" Value="Center"/>
    <Setter Property="HorizontalTextAlignment" Value="Center"/>
    <Setter Property="Margin" Value="20"/>
</Style>

Define the ClearButtonStyle

XAML

<Style TargetType="telerik:RadButton" x:Key="clearButtonStyle">
    <Setter Property="TextColor" Value="#8660C5"/>
</Style>

Define the ToggleButtonStyle

XAML

<Style TargetType="telerik:RadButton" x:Key="toggleButtonStyle">
    <Setter Property="TextColor" Value="#7C59B6"/>
</Style>

The following image shows what the DateTimePicker control looks like when the styles described above are applied:

See Also

• Picker Mode
• Formatting
• Templates
• Commands
• Visual Structure