Class DateTimePickerModel<T>

Represents a comprehensive model for DateTimePicker component configuration and event handling.

Inheritance
System.Object
DateTimePickerModel<T>
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class DateTimePickerModel<T> : Object
Type Parameters
Name Description
T

The type of the date-time values (typically System.DateTime or nullable System.DateTime).
Remarks

This class serves as a complete configuration model for DateTimePicker components, encapsulating all properties related to appearance, behavior, validation, time selection, calendar configuration, and event handling. It provides strongly-typed access to all DateTimePicker features including date selection, time interval settings, calendar views, formatting options, and accessibility features. The model supports both programmatic configuration and data binding scenarios for comprehensive date-time input functionality.

Examples
<SfDateTimePicker TValue="DateTime?" @bind-Value="@Model.Value"
                 Format="@Model.Format" Step="@Model.Step"
                 ShowTodayButton="@Model.ShowTodayButton">
    <DateTimePickerEvents TValue="DateTime?" 
                         ValueChange="@Model.Change"
                         OnOpen="@OnPopupOpen">
    </DateTimePickerEvents>
</SfDateTimePicker>

@code {
    DateTimePickerModel<DateTime?> Model = new DateTimePickerModel<DateTime?>
    {
        Format = "dd/MM/yyyy HH:mm",
        Step = 15, // 15-minute intervals
        ShowTodayButton = true,
        AllowEdit = true
    };
}

Constructors

DateTimePickerModel()

Declaration
public DateTimePickerModel()

Properties

AllowEdit

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

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

Blur

Triggers when the input loses the focus.

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

CalendarMode

Gets or sets the Calendar's Type like gregorian or islamic.

Declaration
public CalendarType CalendarMode { get; set; }
Property Value
Type
CalendarType

Change

Triggers when the date or time value is changed.

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

Cleared

Triggers when DateTimePicker value is cleared using clear button.

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

Close

Triggers when the popup is closed.

Declaration
public PopupObjectArgs Close { get; set; }
Property Value
Type
PopupObjectArgs

Created

Triggers when the DateTimePicker is created.

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

CssClass

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

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

DayHeaderFormat

Specifies the format of the day that to be displayed in the header. By default, the format is Short.

Possible formats are:

  • ShortSets the short format of day name (like Su ) in day header.
  • NarrowSets the single character of day name (like S ) in day header.
  • AbbreviatedSets the min format of day name (like Sun ) in day header.
  • WideSets the long format of day name (like Sunday ) in day header.
.
Declaration
public DayHeaderFormats DayHeaderFormat { get; set; }
Property Value
Type
DayHeaderFormats

Depth

Sets the maximum level of view (Month, Year, Decade) in the Calendar.

Depth view should be smaller than the Start view to restrict its view navigation.

.
Declaration
public CalendarView Depth { get; set; }
Property Value
Type
CalendarView

Destroyed

Triggers when the DateTimePicker is destroyed.

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

Enabled

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

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

EnablePersistence

Enable or disable persisting DateTimePicker's state between page reloads. If enabled, the Value state will be persisted.

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

EnableRtl

Enable or disable rendering DateTimePicker 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 DateTimePicker that the placeholder text floats above the DateTimePicker based on the following values.

Possible values are:

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

Focus

Triggers when the input gets focus.

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

Format

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

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 input attributes such as disabled, value, and more to the root element.

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

.
Declaration
public object HtmlAttributes { get; set; }
Property Value
Type
System.Object

KeyConfigs

Customizes the key actions in DateTimePicker. For example, when using German keyboard, the key actions can be customized using these shortcuts.

Declaration
public object KeyConfigs { get; set; }
Property Value
Type
System.Object

Locale

Specifies the global culture and localization of the DateTimePicker.

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

Max

Gets or sets the maximum date that can be selected in the DateTimePicker.

Declaration
public DateTime Max { get; set; }
Property Value
Type
System.DateTime

Min

Gets or sets the minimum date that can be selected in the DateTimePicker.

Declaration
public DateTime Min { get; set; }
Property Value
Type
System.DateTime

Navigated

Triggers when the Calendar is navigated to another view or within the same level of view.

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

Open

Triggers when the popup is opened.

Declaration
public PopupObjectArgs Open { get; set; }
Property Value
Type
PopupObjectArgs

Placeholder

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

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

Readonly

Specifies a boolean value whether the DateTimePicker allows the user to change the text.

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

RenderDayCell

Triggers when each day cell of the Calendar is rendered.

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

ScrollTo

Specifies the scroll bar position, if there is no value is selected in the timepicker popup list or the given value is not present in the timepicker popup list.

Declaration
public DateTime ScrollTo { get; set; }
Property Value
Type
System.DateTime

ServerTimezoneOffset

By default, the date value will be processed based on system time zone. If you want to process the initial date value using server time zone then specify the time zone value to ServerTimezoneOffset property.

Declaration
public double ServerTimezoneOffset { get; set; }
Property Value
Type
System.Double

ShowClearButton

Specifies whether to show or hide the clear icon in textbox.

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

ShowTodayButton

Specifies whether the today button is to be displayed or not.

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

Start

Specifies the initial view of the Calendar when it is opened. With the help of this property, initial view can be changed to year or decade view.

Declaration
public CalendarView Start { get; set; }
Property Value
Type
CalendarView

Step

Specifies the time interval between the two adjacent time values in the time popup list .

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

StrictMode

Specifies the DateTimePicker 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.

By default, StrictMode is in false. It allows invalid or out-of-range date value with highlighted error class.

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

TimeFormat

Specifies the format of the time value that to be displayed in time popup list.

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

Value

Gets or sets the selected date of the Calendar.

Declaration
public T Value { get; set; }
Property Value
Type
T

WeekNumber

Determines whether the week number of the year is to be displayed in the calendar or not.

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

Width

Specifies the width of the DateTimePicker component.

Declaration
public object Width { get; set; }
Property Value
Type
System.Object

ZIndex

Specifies the z-index value of the DateTimePicker popup element.

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