Class DateTimePickerHeaderView

Represents a class which is used to customize all the properties of header view of the SfDateTimePicker.

Inheritance

System.Object

DateTimePickerHeaderView

Namespace: Syncfusion.Maui.Toolkit.Picker

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class DateTimePickerHeaderView : Element, IThemeElement

Constructors

DateTimePickerHeaderView()

Initializes a new instance of the DateTimePickerHeaderView class.

Declaration

public DateTimePickerHeaderView()

Fields

BackgroundProperty

Identifies the Background dependency property.

Declaration

public static readonly BindableProperty BackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Background dependency property.

DateFormatProperty

Identifies the DateFormat dependency property.

Declaration

public static readonly BindableProperty DateFormatProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for DateFormat dependency property.

DividerColorProperty

Identifies the DividerColor dependency property.

Declaration

public static readonly BindableProperty DividerColorProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for DividerColor dependency property.

HeightProperty

Identifies the Height dependency property.

Declaration

public static readonly BindableProperty HeightProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Height dependency property.

SelectionTextStyleProperty

Identifies the SelectionTextStyle dependency property.

Declaration

public static readonly BindableProperty SelectionTextStyleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionTextStyle dependency property.

TextStyleProperty

Identifies the TextStyle dependency property.

Declaration

public static readonly BindableProperty TextStyleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TextStyle dependency property.

TimeFormatProperty

Identifies the TimeFormat dependency property.

Declaration

public static readonly BindableProperty TimeFormatProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TimeFormat dependency property.

Properties

Background

Gets or sets the background of the header view in SfDateTimePicker.

Declaration

public Brush Background { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default value of Background is a "#F7F2FB".

Examples

The following example demonstrates how to set the background of the header view.

XAML
C#

<picker:SfDateTimePicker>
    <picker:SfDateTimePicker.HeaderView>
        <picker:DateTimePickerHeaderView Background="#E0E0E0" />
    </picker:SfDateTimePicker.HeaderView>
</picker:SfDateTimePicker>

SfDateTimePicker dateTimePicker = new SfDateTimePicker();
dateTimePicker.HeaderView = new DateTimePickerHeaderView
{
    Background = new SolidColorBrush(Color.FromHex("#E0E0E0"))
};

DateFormat

Gets or sets the value to specify the date format of header view on SfDateTimePicker.

Declaration

public string DateFormat { get; set; }

Property Value

Type	Description
System.String	The default value of DateFormat is "dd/MM/yyyy".

Examples

The following example demonstrates how to set the date format of the header view.

XAML
C#

<picker:SfDateTimePicker>
    <picker:SfDateTimePicker.HeaderView>
        <picker:DateTimePickerHeaderView DateFormat="MM-dd-yyyy" />
    </picker:SfDateTimePicker.HeaderView>
</picker:SfDateTimePicker>

SfDateTimePicker dateTimePicker = new SfDateTimePicker();
dateTimePicker.HeaderView = new DateTimePickerHeaderView
{
    DateFormat = "MM-dd-yyyy"
};

DividerColor

Gets or sets the color of the header separator line in SfDateTimePicker.

Declaration

public Color DividerColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	The default value of DividerColor is "#CAC4D0".

Examples

The following example demonstrates how to set the divider color of the header view.

XAML
C#

<picker:SfDateTimePicker>
    <picker:SfDateTimePicker.HeaderView>
        <picker:DateTimePickerHeaderView DividerColor="Gray" />
    </picker:SfDateTimePicker.HeaderView>
</picker:SfDateTimePicker>

SfDateTimePicker dateTimePicker = new SfDateTimePicker();
dateTimePicker.HeaderView = new DateTimePickerHeaderView
{
    DividerColor = Colors.Gray
};

Height

Gets or sets the value to specify the height of header view on SfDateTimePicker.

Declaration

public double Height { get; set; }

Property Value

Type	Description
System.Double	The default value of Height is 50d.

Examples

The following example demonstrates how to set the height of the header view.

XAML
C#

<picker:SfDateTimePicker>
    <picker:SfDateTimePicker.HeaderView>
        <picker:DateTimePickerHeaderView Height="60" />
    </picker:SfDateTimePicker.HeaderView>
</picker:SfDateTimePicker>

SfDateTimePicker dateTimePicker = new SfDateTimePicker();
dateTimePicker.HeaderView = new DateTimePickerHeaderView
{
    Height = 60
};

SelectionTextStyle

Gets or sets the selection text style of the header text in SfDateTimePicker.

Declaration

public PickerTextStyle SelectionTextStyle { get; set; }

Property Value

Type
PickerTextStyle

Examples

The following example demonstrates how to set the selection text style of the header view.

XAML
C#

<picker:SfDateTimePicker>
    <picker:SfDateTimePicker.HeaderView>
        <picker:DateTimePickerHeaderView>
            <picker:DateTimePickerHeaderView.SelectionTextStyle>
                <picker:PickerTextStyle TextColor="Green" FontSize="18" />
            </picker:DateTimePickerHeaderView.SelectionTextStyle>
        </picker:DateTimePickerHeaderView>
    </picker:SfDateTimePicker.HeaderView>
</picker:SfDateTimePicker>

SfDateTimePicker dateTimePicker = new SfDateTimePicker();
dateTimePicker.HeaderView = new DateTimePickerHeaderView
{
    SelectionTextStyle = new PickerTextStyle
    {
        TextColor = Colors.Green,
        FontSize = 18
    }
};

TextStyle

Gets or sets the text style of the header text in SfDateTimePicker.

Declaration

public PickerTextStyle TextStyle { get; set; }

Property Value

Type
PickerTextStyle

Examples

The following example demonstrates how to set the text style of the header view.

XAML
C#

<picker:SfDateTimePicker>
    <picker:SfDateTimePicker.HeaderView>
        <picker:DateTimePickerHeaderView>
            <picker:DateTimePickerHeaderView.TextStyle>
                <picker:PickerTextStyle TextColor="Blue" FontSize="16" />
            </picker:DateTimePickerHeaderView.TextStyle>
        </picker:DateTimePickerHeaderView>
    </picker:SfDateTimePicker.HeaderView>
</picker:SfDateTimePicker>

SfDateTimePicker dateTimePicker = new SfDateTimePicker();
dateTimePicker.HeaderView = new DateTimePickerHeaderView
{
    TextStyle = new PickerTextStyle
    {
        TextColor = Colors.Blue,
        FontSize = 16
    }
};

TimeFormat

Gets or sets the value to specify the time format of header view on SfDateTimePicker.

Declaration

public string TimeFormat { get; set; }

Property Value

Type	Description
System.String	The default value of TimeFormat is "hh:mm:ss tt".

Examples

The following example demonstrates how to set the time format of the header view.

XAML
C#

<picker:SfDateTimePicker>
    <picker:SfDateTimePicker.HeaderView>
        <picker:DateTimePickerHeaderView TimeFormat="HH:mm" />
    </picker:SfDateTimePicker.HeaderView>
</picker:SfDateTimePicker>

SfDateTimePicker dateTimePicker = new SfDateTimePicker();
dateTimePicker.HeaderView = new DateTimePickerHeaderView
{
    TimeFormat = "HH:mm"
};