.NET MAUI DatePicker Styling

The DatePicker control for .NET MAUI provides styling options for customizing its appearance. You can style the DatePicker itself, as well as its popup or dropdown depending on the PickerMode setting.

The control supports the following styling properties:

• 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(of type Style with target type RadButton)—Defines the style applied to the Clear button.
• ToggleButtonStyle(of type Style with target type RadButton)—Specifies the style of the Toggle button.
• PlaceholderLabelStyle(of type Style with target type Label)—Specifies the style applied to the label defined in the default PlaceholderTemplate.
• DisplayLabelStyle(of type Style with target type Label)—Defines the style applied to the label, which is visualized when a date is selected.

The following Style properties are related to the spinner controls inside the popup/dropdown:

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

Styling Examples

The following examples demonstrate how to use the styling properties of the DatePicker.

Define the RadDatePicker

<telerik:RadDatePicker BorderColor="#8660C5"
                       SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
                       SpinnerStyle="{StaticResource spinnerStyle}"
                       SelectionHighlightStyle="{StaticResource selectionHighlightStyle}"
                       DisplayLabelStyle="{StaticResource displayLabelStyle}"
                       PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}"
                       ClearButtonStyle="{StaticResource clearButtonStyle}"
                       ToggleButtonStyle="{StaticResource toggleButtonStyle}"
                       SpinnerFormat="yyy/MMM/dd"
                       DisplayStringFormat="yyyy/MMM/dd"
                       IsClearButtonVisible="True"
                       IsToggleButtonVisible="True"
                       AutomationId="datePicker"/>

Define the Spinner Style

<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

<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

<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

<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

<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="10"/>
</Style>

Define the ClearButtonStyle

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

Define the ToggleButtonStyle

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

In addition, add the telerik namespaces:

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

The following image shows what the DatePicker control looks like when the styles described above are applied on different platforms:

See Also

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