MaterialDatePicker

Date Pickers let users select a date. They typically appear in forms and dialogs and, partially, follow Material Design Guidelines. See more.

Namespace: HorusStudio.Maui.MaterialDesignControls

Inherits from: MaterialDatePicker → MaterialInputBase

XAML sample

xmlns:material="clr-namespace:HorusStudio.Maui.MaterialDesignControls;assembly=HorusStudio.Maui.MaterialDesignControls"

<material:MaterialButton
    Placeholder="Creation date" />

C# sample

var datePicker = new MaterialDatePicker
{
    Placeholder="Creation date"
};

See more example

Properties

AlwaysShowLabel

Gets or sets if the label is always displayed. This is a bindable property.

Property type: Boolean

Default value: False

AutomationId

Gets or sets a value that allows the automation framework to find and interact with this element.

Property type: String

Remarks: This value may only be set once on an element.

When set on this control, the AutomationId is also used as a base identifier for its internal elements:

The main input control (e.g., Entry, Editor, Picker, etc.) uses the same AutomationId value.
The hint label uses the identifier "{AutomationId}_Hint".
The supporting text label uses the identifier "{AutomationId}_SupportingText".
The placeholder text label uses the identifier "{AutomationId}_Placeholder".
The leading icon button uses the identifier "{AutomationId}_LeadingIcon".
The trailing icon button uses the identifier "{AutomationId}_TrailingIcon".

This convention allows automated tests and accessibility tools to consistently locate all subelements of the control.

Background

Gets or sets a Brush that describes the background of the input. This is a bindable property.

Property type: Brush

Default value: Brush

BackgroundColor

Gets or sets a color that describes the background color of the input. This is a bindable property.

Property type: Color

Default value: Light: MaterialLightTheme.SurfaceContainerHighest - Dark: MaterialDarkTheme.SurfaceContainerHighest

BorderColor

Gets or sets a color that describes the border stroke color of the input. This is a bindable property.

Property type: Color

Default value: Light: MaterialLightTheme.OnSurfaceVariant - Dark: MaterialDarkTheme.OnSurfaceVariant

Remarks: This property has no effect if IBorderElement.BorderWidth is set to 0. On Android this property will not have an effect unless VisualElement.BackgroundColor is set to a non-default color.

BorderWidth

Gets or sets the width of the border, in device-independent units. This is a bindable property.

Property type: Double

Default value: 1

Remarks: Set this value to a non-zero value in order to have a visible border.

Gets or sets a value that indicates the number of device-independent units that should be in between characters in the text displayed by the Entry. Applies to Text and Placeholder. The number of device-independent units that should be in between characters in the text.

Property type: Double

Default value: MaterialFontTracking.BodyLarge: 0.5

Remarks: To be added.

CornerRadius

Gets or sets the corner radius for the input, in device-independent units. This is a bindable property.

Property type: CornerRadius

Default value: CornerRadius(0)

Date

Gets or sets the selected date. This is a bindable property.

Property type: Nullable<DateTime>

Default value: DateTime.Now

DateSelectedCommand

Gets or sets an ICommand to be executed when selected date changed

Property type: ICommand

Remarks: To be added.

ErrorAnimation

Gets or sets a custom animation to be executed when the control has an error. This is a bindable property.

Property type: IErrorAnimation

Remarks: When this property is set, the ErrorAnimationType property is ignored.

ErrorAnimationType

Gets or sets the animation type to be executed when the control has an error. This is a bindable property.

Property type: ErrorAnimationTypes

Name	Value	Description
None	0	None: no animation runs.
Shake	1	Shake: Represents an animation that simulates a "shake" effect by moving the target element back and forth along the X-axis.
Heart	2	Breath: represents an animation that performs a "heartbeat" effect by scaling the target element in a pulsating manner.
Jump	3	Jump: represents an animation that creates a "jump" effect by translating the target element along the Y-axis.

Default value: ErrorAnimationTypes.Shake

Remarks: This property will only be considered if the ErrorAnimation property is null.

ErrorIcon

Allows you to display a trailing icon when input has error. This is a bindable property.

Property type: ImageSource

Default value: null

Remarks: For more options see MaterialIconButton.

FocusedCommand

Gets or sets a Command to be invoked when input is Focused. This is a bindable property.

Property type: ICommand

Default value: null

FontAttributes

Gets or sets a value that indicates whether the font for the text of this input is bold, italic, or neither. This is a bindable property.

Property type: FontAttributes

FontAutoScalingEnabled

Determines whether font of this entry should scale automatically according to the operating system settings. Default value is true. This is a bindable property.

Property type: Boolean

Default value: True

Remarks: Typically this should always be enabled for accessibility reasons.

FontFamily

Gets or sets font family for input. This is a bindable property.

Property type: String

Default value: MaterialFontFamily.Default

Format

The format of the date to display to the user. This is a bindable property.

Property type: String
A valid date format.

Default value: MaterialFormat.DateFormat: dd/MM/yyyy

Remarks: Format string is the same is passed to DateTime.ToString (string format).

HasError

Gets or sets if the input has an error. This is a bindable property.

Property type: Boolean

Default value: False

HeightRequest

Gets or sets the height request

Property type: Double

HorizontalTextAlignment

Gets or sets the horizontal text alignment for the input. This is a bindable property.

Property type: TextAlignment

Default value: TextAlignment.Start

InputTapCommand

Gets or sets the command to invoke when the input is tapped.

Property type: ICommand

Default value: null

Remarks: This property is used internally, and it's recommended to avoid setting it directly.

InternalBorderWidth

This property is for internal use by the control. BorderWidth property should be used instead.

Property type: Double

InternalDatePicker

Internal implementation of the DatePicker control.

Property type: DatePicker

Remarks: This property can affect the internal behavior of this control. Use only if you fully understand the potential impact.

IsEnabled

Gets or sets if the input is enabled or disabled. This is a bindable property.

Property type: Boolean

Default value: True

IsFocused

Gets state focused entry

Property type: Boolean

Default value: False

Label

Gets or sets the text displayed as the label of the input. This is a bindable property.

Property type: String

Default value: null

LabelColor

Gets or sets text color for label. This is a bindable property.

Property type: Color

Default value: Light: MaterialLightTheme.OnSurfaceVariant - Dark: MaterialDarkTheme.OnSurfaceVariant

LabelFontFamily

Gets or sets font family for label. This is a bindable property.

Property type: String

Default value: MaterialFontFamily.Default

LabelLineBreakMode

Gets or sets line break mode for label. This is a bindable property.

Property type: LineBreakMode

Default value: LineBreakMode.NoWrap

LabelMargin

Gets or sets margin for label. This is a bindable property.

Property type: Thickness

Default value: Thickness(0)

LabelPadding

Gets or sets padding for label. This is a bindable property.

Property type: Thickness

Default value: Filled: Thickness(0). Outlined: Thickness(4,1)

LabelSize

Gets or sets font size for label. This is a bindable property.

Property type: Double

Default value: MaterialFontSize.BodySmall: Tablet = 15 / Phone = 12

LeadingIcon

TextColor

Gets or sets the color for the text of the input. This is a bindable property. This is a bindable property.

Property type: Color

Default value: Light: MaterialLightTheme.OnSurface - Dark: MaterialDarkTheme.OnSurface

TrailingIcon

Allows you to display a trailing icon (bitmap image) on the input. This is a bindable property.

Property type: ImageSource

Default value: null

Remarks: For more options see MaterialIconButton.

TrailingIconCommand

Gets or sets a Trailing Icon command. This is a bindable property.

Property type: ICommand

Default value: null

TrailingIconCommandParameter

Gets or sets a Trailing Icon command parameter. This is a bindable property.

Property type: Object

Default value: null

TrailingIconTintColor

Gets or sets the color for the trailing button icon of the input. This is a bindable property.

Property type: Color

Default value: Light: MaterialLightTheme.OnSurfaceVariant - Dark: MaterialDarkTheme.OnSurfaceVariant

Type

Gets or sets the input type according to MaterialInputType. This is a bindable property.

Property type: MaterialInputType

Name	Value	Description
Filled	0	Filled input type
Outlined	1	Outlined input type

Default value: MaterialInputType.Filled

UnfocusedCommand

Gets or sets a Command to be invoked when input is Unfocused. This is a bindable property.

Property type: ICommand

Default value: null

Known issues and pending features

[iOS] Font attributes doesn't work
[iOS] Horizontal text alignment doesn't work when there is a date selected
[Android] Use the colors defined in Material in the date picker dialog
[macOS] Do not respond to taps when the control area is tapped
[macOS] HorizontalTextAlignment is not supported

FilesExpand file tree

horusstudio.maui.materialdesigncontrols.materialdatepicker.md

Latest commit

History

horusstudio.maui.materialdesigncontrols.materialdatepicker.md

File metadata and controls

MaterialDatePicker

XAML sample

C# sample

Properties

Known issues and pending features