Class DatePickerModel

Represents a comprehensive model for DatePicker component configuration.

Inheritance
System.Object
DatePickerModel
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class DatePickerModel : Object
Remarks

This class serves as a complete configuration model for DatePicker components, encapsulating all properties related to appearance, behavior, validation, localization, and accessibility. It provides strongly-typed access to all DatePicker features including date selection, formatting options, input validation, and user interface customization. The model supports both programmatic configuration and data binding scenarios for comprehensive date input functionality.

Examples
<SfDatePicker TValue="DateTime?" @bind-Value="@SelectedDate"
             AllowEdit="@Model.AllowEdit" Format="@Model.Format"
             ShowClearButton="@Model.ShowClearButton" Placeholder="@Model.Placeholder">
</SfDatePicker>

@code {
    DateTime? SelectedDate = DateTime.Today;

    DatePickerModel Model = new DatePickerModel
    {
        AllowEdit = true,
        Format = "dd/MM/yyyy",
        ShowClearButton = true,
        Placeholder = "Select a date...",
        StrictMode = false
    };
}

Constructors

DatePickerModel()

Declaration
public DatePickerModel()

Properties

AllowEdit

Specifies a boolean value whether the DatePicker allows user to change the value via typing. When set as false, the DatePicker allows user to change the value via picker only.

Declaration
public bool AllowEdit { get; set; }
Property Value
Type
System.Boolean

ChildContent

Specifies the content that has to be passed.

Declaration
public RenderFragment<object> ChildContent { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.RenderFragment<System.Object>

CssClass

Specifies the CSS class name that can be appended with the root element of the DatePicker. One or more custom CSS classes can be added to a DatePicker.

Declaration
public string CssClass { get; set; }
Property Value
Type
System.String

Enabled

Specifies a boolean value that indicates whether the DatePicker allows the user to interact with it.

Declaration
public bool Enabled { get; set; }
Property Value
Type
System.Boolean

EnableRtl

Enable or disable rendering component in right to left direction.

Declaration
public bool EnableRtl { get; set; }
Property Value
Type
System.Boolean

FirstDayOfWeek

Sets the calendar's first day of the week. By default, the first day of the week will be based on the current culture.

Declaration
public int FirstDayOfWeek { get; set; }
Property Value
Type
System.Int32

FloatLabelType

Specifies the floating label behavior of the DatePicker that the placeholder text floats above the DatePicker based on the following values.

Possible values are:

  • NeverNever floats the label in the DatePicker when the placeholder is available.
  • AlwaysThe floating label always floats above the DatePicker.
  • AutoThe floating label floats above the DatePicker after focusing it or when enters the value in it.
.
Declaration
public FloatLabelType FloatLabelType { get; set; }
Property Value
Type
FloatLabelType

Format

Specifies the format of the value that to be displayed in component.

By default, the format is based on the culture.

You can set the format to "format:'dd/MM/yyyy hh:mm'".

.
Declaration
public string Format { get; set; }
Property Value
Type
System.String

HtmlAttributes

You can add the additional html attributes such as styles, class, and more to the root element.

If you configured both the property and equivalent html attribute, then the component considers the property value.

.
Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>

InputAttributes

You can add the additional input attributes such as disabled, value, and more to the root element.

If you configured both the property and equivalent input attribute, then the component considers the property value.

.
Declaration
public Dictionary<string, object> InputAttributes { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>

Locale

Specifies the global culture and localization of the calendar.

Declaration
public string Locale { get; set; }
Property Value
Type
System.String

Placeholder

Specifies the text that is shown as a hint or placeholder until the user focuses or enter a value in DatePicker. The property is depending on the FloatLabelType property.

Declaration
public string Placeholder { get; set; }
Property Value
Type
System.String

Readonly

Specifies the boolean value whether the DatePicker allows the user to change the text.

Declaration
public bool Readonly { get; set; }
Property Value
Type
System.Boolean

ShowClearButton

Specifies a boolean value that indicates whether the clear button is displayed in DatePicker.

Declaration
public bool ShowClearButton { get; set; }
Property Value
Type
System.Boolean

StrictMode

Specifies the component to act as strict. So that, it allows to enter only a valid date value within a specified range or else it will resets to previous value.

Declaration
public bool StrictMode { get; set; }
Property Value
Type
System.Boolean

TabIndex

Specifies the tab order of the DatePicker component.

Declaration
public int TabIndex { get; set; }
Property Value
Type
System.Int32

Width

Specifies the width of the DatePicker component.

Declaration
public string Width { get; set; }
Property Value
Type
System.String

ZIndex

specifies the z-index value of the DatePicker popup element.

Declaration
public int ZIndex { get; set; }
Property Value
Type
System.Int32