smart-html-elements

DateTimePicker Blazor API

DateTimePicker Properties

Name	Type	Default	Description
AnimationSettings	object	N/A	Applies new animation settings to the calendar pop-up when it is enabled. Properties: 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.
AutoClose	bool	false	Determines whether the calendar button pop-up will be closed automatically when date or time is selected through it.
AutoCloseDelay	int	500	Determines the delay before the calendar pop-up is automatically closed. Applicable only when autoClose is set to true.
CalendarButton	bool	false	Determines whether the calendar button is visible or not. The calendar button is used to open the Calendar popup to select a date.
CalendarButtonPosition	DropDownButtonPosition	DropDownButtonPosition.Right	Determines the position of the calendar button.
CalendarMode	CalendarMode	CalendarMode.Default	Determines the header mode of the calendar pop-up.
DayNameFormat	DayFormat	DayFormat.FirstTwoLetters	Sets or gets the format of calendar pop-up's day names.
Disabled	bool	false	Enables or disables the element.
DisableAutoNavigation	bool	false	Disables auto navigation of the calendar pop-up when the user clicks on a date that's not from month in view.
DisplayKind	DateTimePickerDisplayKind	DateTimePickerDisplayKind.Unspecified	Determines the time zone to display the value in.
DisplayModeView	CalendarDisplayModeView	CalendarDisplayModeView.Table	Determines the type of the month/year view in the calendar pop-up when calendarMode is set to Default.
DropDownAppendTo	string	"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.
DropDownDisplayMode	DateTimePickerDropDownDisplayMode	DateTimePickerDropDownDisplayMode.Default	Sets or gets the pop-up display mode (what components appear in it, and its behaviour).
DropDownOverlay	bool	false	If 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.
DropDownPosition	DropDownPosition	DropDownPosition.Auto	Determines the pop-up position when opened.
EditMode	DateTimePickerEditMode	DateTimePickerEditMode.Default	Determines how the the value can be edited inside the input.
EnableMouseWheelAction	bool	false	Determines whether the value can be incremented/decremented with the mouse wheel when the mouse is over the input.
FirstDayOfWeek	int	0	Determines the first day of the week of the calendar pop-up. From 0(Sunday) to 6(Saturday)
FooterTemplate	object	N/A	Sets 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.
Footer	bool	false	Determines whether to display a footer.
FormatString	string	"dd-MMM-yy HH:mm:ss.fff"	Determines the pattern that is used to display the value in.
HeaderTemplate	object	N/A	Sets custom header template for the calendar pop-up. Accepts the id of an HTMLTemplateElement or a reference ot it.
HideDayNames	bool	false	Hides the names of the weekdays in the calendar pop-up.
HideOtherMonthDays	bool	false	Determines if dates from other months are visible or not in the calendar pop-up.
HideTooltipArrow	bool	false	Hides the arrow of the tooltip in the calendar pop-up.
Hint	string	""	Sets additional helper text below the element that appears only when the element is focused.
ImportantDates	IEnumerable<object>	N/A	Sets dates, displayed as important in the calendar pop-up.
ImportantDatesTemplate	object	N/A	Sets a template for the important dates of the calendar pop-up. Accepts the id of or a reference to an HTMLTemplateElement.
Interval	object	new 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.
Label	string	""	Sets a label above the element.
Locale	string	"en"	Sets or gets the locale that determines what language is used to localize the labels inside the DateTimePicker.
Max	object	new JQX.Utilities.DateTime(3001, 1, 1)	Sets or gets the maximum allowed value.
Messages	object	N/A	Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Min	object	new JQX.Utilities.DateTime(1600, 1, 1)	Sets or gets the minimum allowed value.
Name	string	""	Sets or gets the element's name, which is used as a reference when the data is submitted in a form.
Nullable	bool	false	Enables 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.
IsOpened	bool	false	Sets or gets whether the calendar pop-up is opened.
Placeholder	string	"Enter date"	Sets or gets the placeholder text to be shown in the input when value is null.
Readonly	bool	false	Disables user interaction with the element.
RestrictedDates	IEnumerable<DateTime>	N/A	Sets or gets an array of dates (DateTime or Date objects) that cannot be selected.
RightToLeft	bool	false	Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SpinButtons	bool	false	Sets or gets whether the spin buttons are displayed. Spin buttons are used to increment/decrement the date/time.
SpinButtonsDelay	int	75	Sets the delay between repeats of the spin buttons in miliseconds.
SpinButtonsInitialDelay	int	0	Sets a delay before the first repeat iteration of spin buttons in miliseconds.
SpinButtonsPosition	DateTimePickerSpinButtonsPosition	DateTimePickerSpinButtonsPosition.Right	Sets or gets the position of the spin buttons.
Theme	string	""	Sets or gets the element's visual theme.
Tooltip	bool	false	Enables/Disabled the tooltip for the important dates in the calendar pop-up.
TooltipDelay	int	100	Sets the delay of the calendar pop-up's tooltip before it appears.
TooltipPosition	TooltipPosition	TooltipPosition.Top	Sets the position of the tooltip in the calendar pop-up.
TooltipTemplate	object	N/A	Sets a template for the content of the calendar pop-up's tooltip. Accepts the id of or a reference to an HTMLTemplateElement.
Unfocusable	bool	false	Sets or gets if the element can be focused.
Validation	Validation	Validation.Strict	Determines the validation mechanism for the value by min/max.
Value	object	new 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.
WeekNumbers	bool	false	Enables/Disabled week numbering in the calendar pop-up.
Weeks	int	6	Determines the number of visible weeks in the calendar pop-up.
YearCutoff	int	1926	Determines 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

Name	Type	Arguments	Description
Close	void	N/A	Closes the calendar pop-up.
GetIsOpenedAsync()	Task<bool>	'N/A'	Gets the "IsOpened" property as Task<bool>.
GetValueAsync()	Task<object>	'N/A'	Gets the "Value" property as Task<object>.
Open	void	N/A	Opens the calendar pop-up.
Refresh	void	'N/A'	Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements.
Render	void	'N/A'	Re-renders the Blazor Component. This method will make a full re-render.
Select	void	N/A	Selects the text inside the input.
StateHasChanged	void	'N/A'	Refreshes the state and Re-renders the Blazor Component, if necessary.

DateTimePicker Events

Name	Type	Description	Event Detail
OnChange	EventCallback<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.
Changed	event DateTimePickerChangedEventHandler	This event is triggered when the value is changed.	DateTimePickerChangedEventArgs
OnClose	EventCallback<Event>	This event is triggered when the calendar pop-up is closed.	N/A
Closed	event DateTimePickerClosedEventHandler	This event is triggered when the calendar pop-up is closed.	DateTimePickerClosedEventArgs
OnClosing	EventCallback<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
Closing	event DateTimePickerClosingEventHandler	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.	DateTimePickerClosingEventArgs
OnOpen	EventCallback<Event>	This event is triggered when the calendar pop-up is opened.	N/A
Opened	event DateTimePickerOpenedEventHandler	This event is triggered when the calendar pop-up is opened.	DateTimePickerOpenedEventArgs
OnOpening	EventCallback<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
Opening	event DateTimePickerOpeningEventHandler	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.	DateTimePickerOpeningEventArgs