Customizations in .NET MAUI Date Picker (SfDatePicker)

The .NET MAUI Date Picker header, column header, footer, and selection views can be customized.

Header Customization

Customize the date picker header by using the HeaderView property of the SfDatePicker.

Set the header text

The SfDatePicker control allows you to add the header text by setting the Text property in the PickerHeaderView. To enable the header view, set the Height property of PickerHeaderView to a value greater than 0. The default value of the Height property is 0.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.HeaderView >
        <picker:PickerHeaderView Height="40" Text="Date Picker"/>
    </picker:SfDatePicker.HeaderView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datepicker.HeaderView = new PickerHeaderView()
{
    Height = 40,
    Text = "Date Picker"
};

this.Content = datePicker;

Header text in .NET MAUI Date picker.

Set the divider color

The SfDatePicker control allows you to customize the header divider color by setting the DividerColor property of the PickerHeaderView.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.HeaderView >
        <picker:PickerHeaderView DividerColor="Red" />
    </picker:SfDatePicker.HeaderView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datepicker.HeaderView = new PickerHeaderView()
{
    DividerColor = Colors.Red,
};

this.Content = datePicker;

Header divider color in .NET MAUI Date picker.

Customization of the header

Customize the header text style and background color of the Date picker using the TextStyle and Background properties of the HeaderView in the PickerHeaderView.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.HeaderView >
        <picker:PickerHeaderView Background="#D3D3D3">
            <picker:PickerHeaderView.TextStyle >
                <picker:PickerTextStyle FontSize="15" TextColor="Black" />
            </picker:PickerHeaderView.TextStyle>
        </picker:PickerHeaderView>
    </picker:SfDatePicker.HeaderView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datePicker.HeaderView = new PickerHeaderView()
{
    Background = Color.FromArgb("#D3D3D3"),
    TextStyle = new PickerTextStyle()
    {
        TextColor = Colors.Black,
        FontSize = 15,
    }
};

this.Content = datePicker;

Custom Header in .NET MAUI Date picker.

Column Header Customization

Customize the date picker column header by using the ColumnHeaderView property of the SfDatePicker.

Set custom column header

The SfDatePicker provides a custom text to its column header by setting the ColumnHeaderView property of the SfDatePicker, which has DayHeaderText, MonthHeaderText, and YearHeaderText properties of the DatePickerColumnHeaderView. The default value of the DayHeaderText property is “Day”, MonthHeaderText is “Month”, and YearHeaderText is “Year”.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.ColumnHeaderView >
        <picker:DatePickerColumnHeaderView DayHeaderText="Day Column"
                                           MonthHeaderText="Month Column"
                                           YearHeaderText="Year Column"/>
    </picker:SfDatePicker.ColumnHeaderView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datePicker.ColumnHeaderView = new DatePickerColumnHeaderView()
{
    DayHeaderText = "Day Column",
    MonthHeaderText = "Month Column",
    YearHeaderText = "Year Column"
};

this.Content = datePicker;

Set Column header text in .NET MAUI Date picker.

Set the divider color

The SfDatePicker control allows you to customize the column header divider color by setting the DividerColor property of the DatePickerColumnHeaderView.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.ColumnHeaderView >
        <picker:DatePickerColumnHeaderView DividerColor="Red" />
    </picker:SfDatePicker.ColumnHeaderView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datepicker.ColumnHeaderView = new DatePickerColumnHeaderView()
{
    DividerColor = Colors.Red,
};

this.Content = datePicker;

Column header divider color in .NET MAUI Date picker.

Customization of the column header

Customize the column header view text style and background color of the Date Picker using the TextStyle and Background properties of the DatePickerColumnHeaderView.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.ColumnHeaderView >
        <picker:DatePickerColumnHeaderView Background="#D3D3D3">
            <picker:DatePickerColumnHeaderView.TextStyle >
                <picker:PickerTextStyle FontSize="15" TextColor="Black" />
            </picker:DatePickerColumnHeaderView.TextStyle>
        </picker:DatePickerColumnHeaderView>
    </picker:SfDatePicker.ColumnHeaderView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datePicker.ColumnHeaderView = new DatePickerColumnHeaderView()
{
    Background = Color.FromArgb("#D3D3D3"),
    TextStyle = new PickerTextStyle()
    {
        TextColor = Colors.Black,
        FontSize = 15,
    }
};

this.Content = datePicker;

Custom Column header text in .NET MAUI Date picker.

Customize the date picker footer view by using the FooterView property of the SfDatePicker.

In the SfDatePicker control, validation buttons (OK and Cancel) can be customized by setting the OkButtonText and CancelButtonText properties of the PickerFooterView. It allows you to confirm or cancel the selected date. The OkButtonText can be enabled using the ShowOkButton property in the PickerFooterView.
The Default value of the OkButtonText property is “OK”, and CancelButtonText is “Cancel”. To enable the footer view, set the Height property of the PickerFooterView to a value greater than 0. The default value of the Height property is 0.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.FooterView >
        <picker:PickerFooterView Height="40" OkButtonText="Save"
                                 CancelButtonText="Exit"/>
    </picker:SfDatePicker.FooterView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datePicker.FooterView = new PickerFooterView()
{
    Height = 40,
    OkButtonText = "Save",
    CancelButtonText = "Exit",
};

this.Content = datePicker;

Set Footer text in .NET MAUI Date picker.

Set the divider color

The SfDatePicker control allows you to customize the footer divider color by setting the DividerColor property of the PickerFooterView.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.FooterView >
        <picker:PickerFooterView DividerColor="Red" />
    </picker:SfDatePicker.FooterView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datepicker.FooterView = new PickerFooterView()
{
    DividerColor = Colors.Red,
};

this.Content = datePicker;

Footer divider color in .NET MAUI Date picker.

Customize the footer text style and background color of the Date Picker using the TextStyle and Background properties of the PickerFooterView.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.FooterView >
        <picker:PickerFooterView Background="#D3D3D3">
            <picker:PickerFooterView.TextStyle >
                <picker:PickerTextStyle FontSize="15" TextColor="Black" />
            </picker:PickerFooterView.TextStyle>
        </picker:PickerFooterView>
    </picker:SfDatePicker.FooterView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datePicker.FooterView = new PickerFooterView()
{
    Background = Color.FromArgb("#D3D3D3"),
    TextStyle = new PickerTextStyle()
    {
        TextColor = Colors.Black,
        FontSize = 15,
    }
};

this.Content = datePicker;

Custom Footer in .NET MAUI Date picker.

Selection View Customization

Customize the date picker selection view by using the SelectionView property of the SfDatePicker.

Set selection view

In the SfDatePicker control, the corner radius, stroke, and padding can be customized by setting the CornerRadius, Stroke, and Padding properties in the PickerSelectionView.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.SelectionView >
        <picker:PickerSelectionView CornerRadius="10" Stroke="#36454F" Padding="10, 5, 10, 5" Background="#808080" />
    </picker:SfDatePicker.SelectionView>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datePicker.SelectionView = new PickerSelectionView()
{
    CornerRadius = 10,
    Stroke = Color.FromArgb("#36454F"),
    Pading = new Thickness(10, 5, 10, 5),
    Background = Color.FromArgb("#808080"),
};

this.Content = datePicker;

Custom selection shape in .NET MAUI Date picker.

Customization of the selected item

Customize the selected view text style of the Date Picker using the SelectedTextStyle property of the SfDatePicker.

<picker:SfDatePicker x:Name="datepicker" >
    <picker:SfDatePicker.SelectedTextStyle >
        <picker:PickerTextStyle FontSize="15" TextColor="White"/>
    </picker:SfDatePicker.SelectedTextStyle>
</picker:SfDatePicker>
SfDatePicker datePicker = new SfDatePicker();
datePicker.SelectedTextStyle = new PickerTextStyle()
{
    TextStyle = new PickerTextStyle()
    {
        TextColor = Colors.White,
        FontSize = 15,
    }
};

this.Content = datePicker;

Custom Selection view in .NET MAUI Date picker.

Column divider color

Customize the column divider color using the ColumnDividerColor property in SfDatePicker.

<picker:SfDatePicker x:Name="datepicker"
                     ColumnDividerColor="Red">

</picker:SfDatePicker>
SfDatePicker datepicker = new SfDatePicker();
datepicker.ColumnDividerColor = Colors.Red;
this.Content = datepicker;

Date picker coloumn divider color in .NET MAUI Date picker.