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

[JsonPropertyName("allowEdit")]
public bool AllowEdit { get; set; }

Property Value

Type
bool

Blur

Triggers when the input loses the focus.

Declaration

[JsonIgnore]
[JsonPropertyName("blur")]
public EventCallback<object> Blur { get; set; }

Property Value

Type
EventCallback<object>

CalendarMode

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

Declaration

[JsonPropertyName("calendarMode")]
[JsonConverter(typeof(JsonStringEnumConverter))]
public CalendarType CalendarMode { get; set; }

Property Value

Type
CalendarType

Change

Triggers when the date or time value is changed.

Declaration

[JsonIgnore]
[JsonPropertyName("change")]
public EventCallback<object> Change { get; set; }

Property Value

Type
EventCallback<object>

Cleared

Triggers when DateTimePicker value is cleared using clear button.

Declaration

[JsonIgnore]
[JsonPropertyName("cleared")]
public EventCallback<object> Cleared { get; set; }

Property Value

Type
EventCallback<object>

Close

Triggers when the popup is closed.

Declaration

[JsonPropertyName("close")]
public PopupObjectArgs Close { get; set; }

Property Value

Type
PopupObjectArgs

Created

Triggers when the DateTimePicker is created.

Declaration

[JsonIgnore]
[JsonPropertyName("created")]
public EventCallback<object> Created { get; set; }

Property Value

Type
EventCallback<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

[JsonPropertyName("cssClass")]
public string CssClass { get; set; }

Property Value

Type
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

[JsonPropertyName("dayHeaderFormat")]
[JsonConverter(typeof(JsonStringEnumConverter))]
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

[JsonPropertyName("depth")]
[JsonConverter(typeof(JsonStringEnumConverter))]
public CalendarView Depth { get; set; }

Property Value

Type
CalendarView

Destroyed

Triggers when the DateTimePicker is destroyed.

Declaration

[JsonIgnore]
[JsonPropertyName("destroyed")]
public EventCallback<object> Destroyed { get; set; }

Property Value

Type
EventCallback<object>

EnablePersistence

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

Declaration

[JsonPropertyName("enablePersistence")]
public bool EnablePersistence { get; set; }

Property Value

Type
bool

EnableRtl

Enable or disable rendering DateTimePicker in right to left direction.

Declaration

[JsonPropertyName("enableRtl")]
public bool EnableRtl { get; set; }

Property Value

Type
bool

Enabled

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

Declaration

[JsonPropertyName("enabled")]
public bool Enabled { get; set; }

Property Value

Type
bool

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

[JsonPropertyName("firstDayOfWeek")]
public int FirstDayOfWeek { get; set; }

Property Value

Type
int

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

[JsonPropertyName("floatLabelType")]
public FloatLabelType FloatLabelType { get; set; }

Property Value

Type
FloatLabelType

Focus

Triggers when the input gets focus.

Declaration

[JsonIgnore]
[JsonPropertyName("focus")]
public EventCallback<object> Focus { get; set; }

Property Value

Type
EventCallback<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

[JsonPropertyName("format")]
public string Format { get; set; }

Property Value

Type
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

[JsonPropertyName("htmlAttributes")]
public object HtmlAttributes { get; set; }

Property Value

Type
object

KeyConfigs

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

Declaration

[JsonPropertyName("keyConfigs")]
public object KeyConfigs { get; set; }

Property Value

Type
object

Locale

Specifies the global culture and localization of the DateTimePicker.

Declaration

[JsonPropertyName("locale")]
public string Locale { get; set; }

Property Value

Type
string

Max

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

Declaration

[JsonPropertyName("max")]
public DateTime Max { get; set; }

Property Value

Type
DateTime

Min

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

Declaration

[JsonPropertyName("min")]
public DateTime Min { get; set; }

Property Value

Type
DateTime

Navigated

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

Declaration

[JsonIgnore]
[JsonPropertyName("navigated")]
public EventCallback<object> Navigated { get; set; }

Property Value

Type
EventCallback<object>

Open

Triggers when the popup is opened.

Declaration

[JsonPropertyName("open")]
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

[JsonPropertyName("placeholder")]
public string Placeholder { get; set; }

Property Value

Type
string

Readonly

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

Declaration

[JsonPropertyName("readonly")]
public bool Readonly { get; set; }

Property Value

Type
bool

RenderDayCell

Triggers when each day cell of the Calendar is rendered.

Declaration

[JsonIgnore]
[JsonPropertyName("renderDayCell")]
public EventCallback<object> RenderDayCell { get; set; }

Property Value

Type
EventCallback<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

[JsonPropertyName("scrollTo")]
public DateTime ScrollTo { get; set; }

Property Value

Type
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

[JsonPropertyName("serverTimezoneOffset")]
public double ServerTimezoneOffset { get; set; }

Property Value

Type
double

ShowClearButton

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

Declaration

[JsonPropertyName("showClearButton")]
public bool ShowClearButton { get; set; }

Property Value

Type
bool

ShowTodayButton

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

Declaration

[JsonPropertyName("showTodayButton")]
public bool ShowTodayButton { get; set; }

Property Value

Type
bool

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

[JsonPropertyName("start")]
[JsonConverter(typeof(JsonStringEnumConverter))]
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

[JsonPropertyName("step")]
public int Step { get; set; }

Property Value

Type
int

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

[JsonPropertyName("strictMode")]
public bool StrictMode { get; set; }

Property Value

Type
bool

TimeFormat

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

Declaration

[JsonPropertyName("timeFormat")]
public string TimeFormat { get; set; }

Property Value

Type
string

Value

Gets or sets the selected date of the Calendar.

Declaration

[JsonPropertyName("value")]
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

[JsonPropertyName("weekNumber")]
public bool WeekNumber { get; set; }

Property Value

Type
bool

Width

Specifies the width of the DateTimePicker component.

Declaration

[JsonPropertyName("width")]
public object Width { get; set; }

Property Value

Type
object

ZIndex

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

Declaration

[JsonPropertyName("zIndex")]
public int ZIndex { get; set; }

Property Value

Type
int