DateTimePicker Blazor API

DateTimePicker Properties

AnimationSettingsobjectN/AApplies new animation settings to the calendar pop-up when it is enabled.

startSpeed - Determines the initial speed of the animation.
easeThreshold - Determines the point at which the animation starts to slow down - the "ease effect".
step - Determines the step ( scrolling interval ) at which the animation will run.
stepEaseSize - Coefficient that is used to calculated the new step once the threshold has been passed.
resetThreshold - Determines the threshold for animation reset. When it's reached the animation will start over.
AutoCloseboolfalseDetermines whether the calendar button pop-up will be closed automatically when date or time is selected through it.
AutoCloseDelayint500Determines the delay before the calendar pop-up is automatically closed. Applicable only when autoClose is set to true.
CalendarButtonboolfalseDetermines whether the calendar button is visible or not. The calendar button is used to open the Calendar popup to select a date.
CalendarButtonPositionDropDownButtonPositionDropDownButtonPosition.RightDetermines the position of the calendar button.
CalendarModeCalendarModeCalendarMode.DefaultDetermines the header mode of the calendar pop-up.
DayNameFormatDayFormatDayFormat.FirstTwoLettersSets or gets the format of calendar pop-up's day names.
DisabledboolfalseEnables or disables the element.
DisableAutoNavigationboolfalseDisables auto navigation of the calendar pop-up when the user clicks on a date that's not from month in view.
DisplayKindDateTimePickerDisplayKindDateTimePickerDisplayKind.UnspecifiedDetermines the time zone to display the value in.
DisplayModeViewCalendarDisplayModeViewCalendarDisplayModeView.TableDetermines the type of the month/year view in the calendar pop-up when calendarMode is set to Default.
DropDownAppendTostring"null"Sets custom container to append the pop-up to. By default, it is in the DateTimePicker. The value of the property can be an HTML element or the id of an HTML element.
DropDownDisplayModeDateTimePickerDropDownDisplayModeDateTimePickerDropDownDisplayMode.DefaultSets or gets the pop-up display mode (what components appear in it, and its behaviour).
DropDownOverlayboolfalseIf this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.
DropDownPositionDropDownPositionDropDownPosition.AutoDetermines the pop-up position when opened.
EditModeDateTimePickerEditModeDateTimePickerEditMode.DefaultDetermines how the the value can be edited inside the input.
EnableMouseWheelActionboolfalseDetermines whether the value can be incremented/decremented with the mouse wheel when the mouse is over the input.
FirstDayOfWeekint0Determines the first day of the week of the calendar pop-up. From 0(Sunday) to 6(Saturday)
FooterTemplateobjectN/ASets or gets the footer template of the calendar pop-up. The value of this property can be the id of an HTMLTemplateElement or the HTMLTemplateElement itself. If set to null, a default template is applied.
FooterboolfalseDetermines whether to display a footer.
FormatStringstring"dd-MMM-yy HH:mm:ss.fff"Determines the pattern that is used to display the value in.
HeaderTemplateobjectN/ASets custom header template for the calendar pop-up. Accepts the id of an HTMLTemplateElement or a reference ot it.
HideDayNamesboolfalseHides the names of the weekdays in the calendar pop-up.
HideOtherMonthDaysboolfalseDetermines if dates from other months are visible or not in the calendar pop-up.
HideTooltipArrowboolfalseHides the arrow of the tooltip in the calendar pop-up.
Hintstring""Sets additional helper text below the element that appears only when the element is focused.
ImportantDatesIEnumerable<object>N/ASets dates, displayed as important in the calendar pop-up.
ImportantDatesTemplateobjectN/ASets a template for the important dates of the calendar pop-up. Accepts the id of or a reference to an HTMLTemplateElement.
Intervalobjectnew JQX.Utilities.TimeSpan(0, 0, 1)Sets or gets the increment/decrement interval when a date/time segment inside the input has not been highlighted. The default interval is 1 second. If a numeric value is passed, it represents milliseconds.
Labelstring""Sets a label above the element.
Localestring"en"Sets or gets the locale that determines what language is used to localize the labels inside the DateTimePicker.
Maxobjectnew JQX.Utilities.DateTime(3001, 1, 1)Sets or gets the maximum allowed value.
MessagesobjectN/ASets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Minobjectnew JQX.Utilities.DateTime(1600, 1, 1)Sets or gets the minimum allowed value.
Namestring""Sets or gets the element's name, which is used as a reference when the data is submitted in a form.
NullableboolfalseEnables or disables the setting of the value property to be null or empty string. If the property is enabled and the value in the input is deleted, the value will be set to null and the placeholder will be displayed. Otherwise, the current date and time will be set.
IsOpenedboolfalseSets or gets whether the calendar pop-up is opened.
Placeholderstring"Enter date"Sets or gets the placeholder text to be shown in the input when value is null.
ReadonlyboolfalseDisables user interaction with the element.
RestrictedDatesIEnumerable<DateTime>N/ASets or gets an array of dates (DateTime or Date objects) that cannot be selected.
RightToLeftboolfalseSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SpinButtonsboolfalseSets or gets whether the spin buttons are displayed. Spin buttons are used to increment/decrement the date/time.
SpinButtonsDelayint75Sets the delay between repeats of the spin buttons in miliseconds.
SpinButtonsInitialDelayint0Sets a delay before the first repeat iteration of spin buttons in miliseconds.
SpinButtonsPositionDateTimePickerSpinButtonsPositionDateTimePickerSpinButtonsPosition.RightSets or gets the position of the spin buttons.
Themestring""Sets or gets the element's visual theme.
TooltipboolfalseEnables/Disabled the tooltip for the important dates in the calendar pop-up.
TooltipDelayint100Sets the delay of the calendar pop-up's tooltip before it appears.
TooltipPositionTooltipPositionTooltipPosition.TopSets the position of the tooltip in the calendar pop-up.
TooltipTemplateobjectN/ASets a template for the content of the calendar pop-up's tooltip. Accepts the id of or a reference to an HTMLTemplateElement.
UnfocusableboolfalseSets or gets if the element can be focused.
ValidationValidationValidation.StrictDetermines the validation mechanism for the value by min/max.
Valueobjectnew JQX.Utilities.DateTime()Sets or gets the value. The value represents the current date/time that is set to the element as a DateTime object.
WeekNumbersboolfalseEnables/Disabled week numbering in the calendar pop-up.
Weeksint6Determines the number of visible weeks in the calendar pop-up.
YearCutoffint1926Determines the first year of a 100 year span within which 2-digit years fall. The default value, 1926, would interpret the 2-digit year values 26-99 as 1926 to 1999 and values 00-25 as being 2000 to 2025.

DateTimePicker Methods

ClosevoidN/ACloses the calendar pop-up.
GetIsOpenedAsync()Task<bool>'N/A'Gets the &quot;IsOpened&quot; property as Task&lt;bool&gt;.
GetValueAsync()Task<object>'N/A'Gets the &quot;Value&quot; property as Task&lt;object&gt;.
OpenvoidN/AOpens the calendar pop-up.
Refreshvoid'N/A'Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements.
Rendervoid'N/A'Re-renders the Blazor Component. This method will make a full re-render.
SelectvoidN/ASelects the text inside the input.
StateHasChangedvoid'N/A'Refreshes the state and Re-renders the Blazor Component, if necessary.

DateTimePicker Events

NameTypeDescriptionEvent Detail
OnChangeEventCallback<Event>This event is triggered when the value is changed.dynamic oldValue- The old value before it was changed presented as a DateTime object., dynamic value- The new value presented as a DateTime object.
Changedevent DateTimePickerChangedEventHandlerThis event is triggered when the value is changed.DateTimePickerChangedEventArgs
OnCloseEventCallback<Event>This event is triggered when the calendar pop-up is closed.N/A
Closedevent DateTimePickerClosedEventHandlerThis event is triggered when the calendar pop-up is closed.DateTimePickerClosedEventArgs
OnClosingEventCallback<Event>This event is triggered when the calendar pop-up is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.N/A
Closingevent DateTimePickerClosingEventHandlerThis event is triggered when the calendar pop-up is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.DateTimePickerClosingEventArgs
OnOpenEventCallback<Event>This event is triggered when the calendar pop-up is opened.N/A
Openedevent DateTimePickerOpenedEventHandlerThis event is triggered when the calendar pop-up is opened.DateTimePickerOpenedEventArgs
OnOpeningEventCallback<Event>This event is triggered when the calendar pop-up is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function.N/A
Openingevent DateTimePickerOpeningEventHandlerThis event is triggered when the calendar pop-up is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function.DateTimePickerOpeningEventArgs