DateTimePicker Properties

Name	Type	Default	Description
AnimationSettings	object	N/A	Enhances the animation behavior of the calendar pop-up when it is enabled by applying customizable animation settings. 'Properties:' - 'startSpeed': Specifies the initial velocity of the animation when the calendar pop-up appears, controlling how quickly the animation begins. - 'easeThreshold': Defines the point within the animation at which the "ease effect" takes place, causing the animation to gradually slow down for a smoother transition. - 'step': Sets the interval at which the animation progresses (e.g., the number of pixels or frames per update), determining the smoothness and speed of the animation. - 'stepEaseSize': A multiplier used to calculate the new step size after the ease threshold has been crossed; this value fine-tunes how much the animation slows down. - 'resetThreshold': Establishes the limit at which the animation resets. Once this value is reached, the animation sequence restarts from the beginning. These settings allow for precise control over the appearance and feel of the calendar pop-up’s animation, providing an improved and customizable user experience.
AutoClose	bool	false	Specifies whether the calendar button pop-up should automatically close after a user selects a date or time. If enabled, the pop-up will be dismissed immediately upon selection, providing a streamlined user experience. If disabled, the pop-up will remain open, allowing for multiple selections or further interaction.
AutoCloseDelay	int	500	Specifies the duration, in milliseconds, to wait before automatically closing the calendar pop-up after it is triggered. This setting is effective only when autoClose is set to true.
CalendarButton	bool	false	Controls the visibility of the calendar button. When visible, this button allows users to open the calendar popup and select a date. If hidden, users will not have access to the calendar popup from the interface.
CalendarButtonPosition	DropDownButtonPosition	DropDownButtonPosition.Right	Specifies the placement of the calendar button relative to the input field. For example, this setting can position the calendar button to the left, right, above, or below the input, allowing for flexible UI customization.
CalendarMode	CalendarMode	CalendarMode.Default	Specifies the display style of the calendar pop-up header, such as showing only the month, only the year, or both, to control how navigation and information are presented to the user.
DayNameFormat	DayFormat	DayFormat.FirstTwoLetters	Specifies or retrieves the display format used for the day names (such as "Mon", "Monday", or "M") shown in the calendar popup. This determines how the days of the week are presented to users within the calendar interface.
Disabled	bool	false	Determines whether the element is interactive or not. When enabled, the element can receive user input and respond to actions; when disabled, the element becomes inactive and cannot be interacted with by the user.
DisableAutoNavigation	bool	false	Prevents the calendar pop-up from automatically navigating to a different month when the user clicks on a date that belongs to another month (outside of the currently displayed month). This ensures that clicking on dates not in the current month view will not change the visible month.
DisplayKind	DateTimePickerDisplayKind	DateTimePickerDisplayKind.Unspecified	Specifies the time zone in which the value should be displayed, ensuring that all date and time information is presented according to the selected region's local time settings. This affects how timestamps are interpreted and shown to the user.
DisplayModeView	CalendarDisplayModeView	CalendarDisplayModeView.Table	Specifies the display format (month or year view) shown in the calendar pop-up when the calendarMode property is set to "Default". This setting controls whether users initially see a grid of months or a list of years, allowing for quicker navigation and selection within the calendar component.
DropDownAppendTo	string	"null"	Defines a custom container element where the pop-up will be appended. By default, the pop-up is appended within the DateTimePicker component itself. You can specify this property by providing either an HTML element (such as a DOM node) or the string ID of an existing HTML element on the page. This allows you to control the positioning and containment of the pop-up within your application's layout.
DropDownDisplayMode	DateTimePickerDropDownDisplayMode	DateTimePickerDropDownDisplayMode.Default	Defines or retrieves the pop-up display mode, specifying which components are shown within the pop-up and controlling how it behaves (such as its appearance, interaction options, and dismissal rules).
DropDownOverlay	bool	false	When this property is enabled, opening the element's dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the document. This overlay helps to visually separate the dropdown from other page content and can be used to intercept interactions with elements outside the dropdown while it is open.
DropDownPosition	DropDownPosition	DropDownPosition.Auto	Specifies the location on the screen where the pop-up will appear when it is activated, allowing you to control its alignment relative to a reference element or the viewport.
EditMode	DateTimePickerEditMode	DateTimePickerEditMode.Default	Specifies the permitted methods for modifying the input's value, such as whether users can manually enter or edit text, select from predefined options, or if the input is read-only and cannot be changed.
EnableMouseWheelAction	bool	false	Specifies whether the input value can be increased or decreased using the mouse wheel when the cursor is hovering over the input field. When enabled, scrolling the mouse wheel up increments the value, while scrolling down decrements it.
FirstDayOfWeek	int	0	Specifies which day of the week should be displayed as the first column in the calendar pop-up. Accepts values from 0 (Sunday) to 6 (Saturday), where each number corresponds to a day of the week. For example, setting this value to 1 will make Monday the first day of the week in the calendar view.
FooterTemplate	object	N/A	Defines or retrieves the footer template used in the calendar pop-up. This property accepts either the ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. Assigning null reverts the calendar's footer to the default template. If a valid template is provided, it will be rendered in the footer area of the calendar pop-up, allowing for customized content or functionality.
Footer	bool	false	Specifies whether the footer section should be visible on the interface. Set this option to 'true' to display the footer, or 'false' to hide it.
FormatString	string	"dd-MMM-yy HH:mm:ss.fff"	Specifies the format pattern used to display date and time values. You can use standard built-in format specifiers or custom format strings to control the appearance of the output. 'Built-in Date and Time Format Specifiers:' | Specifier | Description | Example Output | |-----------|------------------------------------------|------------------------------------| | 'd' | Short date pattern | 'M/d/yyyy' (e.g., 4/9/2024) | | 'D' | Long date pattern | 'dddd, MMMM dd, yyyy' (e.g., Tuesday, April 9, 2024) | | 't' | Short time pattern | 'h:mm tt' (e.g., 3:45 PM) | | 'T' | Long time pattern | 'h:mm:ss tt' (e.g., 3:45:30 PM) | | 'f' | Long date, short time | 'dddd, MMMM dd, yyyy h:mm tt' (e.g., Tuesday, April 9, 2024 3:45 PM) | | 'F' | Long date, long time | 'dddd, MMMM dd, yyyy h:mm:ss tt' (e.g., Tuesday, April 9, 2024 3:45:30 PM) | | 'M' | Month/day pattern | 'MMMM dd' (e.g., April 09) | | 'Y' | Year/month pattern | 'yyyy MMMM' (e.g., 2024 April) | | 'S' | Sortable, culture-invariant date/time | 'yyyy-MM-ddTHH:mm:ss' (e.g., 2024-04-09T15:45:30) | 'Custom Date and Time Format Strings:' - 'Day' - ''d'' : Day of the month (1–31) - ''dd'' : Day of the month, two digits (01–31) - ''ddd'' : Abbreviated weekday name (e.g., Tue) - ''dddd'': Full weekday name (e.g., Tuesday) - 'Hour' - ''h'' : 12-hour clock hour (1–12) - ''hh'' : 12-hour clock hour, two digits (01–12) - ''H'' : 24-hour clock hour (0–23) - ''HH'' : 24-hour clock hour, two digits (00–23) - 'Minute' - ''m'' : Minutes (0–59) - ''mm'' : Minutes, two digits (00–59) - 'Month' - ''M'' : Month (1–12) - ''MM'' : Month, two digits (01–12) - ''MMM'' : Abbreviated month name (e.g., Apr) - ''MMMM'': Full month name (e.g., April) - 'Second' - ''s'' : Seconds (0–59) - ''ss'' : Seconds, two digits (00–59) - 'AM/PM Designator' - ''t'' : First character of AM/PM (e.g., A or P) - ''tt'' : AM/PM designator (e.g., AM or PM) - 'Year' - ''y'' : Year, one or two digits (e.g., 0–99) - ''yy'' : Year, two digits (e.g., 00–99) - ''yyy'' : Year, minimum three digits (e.g., 2024) - ''yyyy'' : Year, four digits (e.g., 2024) - ''yyyyy'' : Year, at least five digits (pads with leading zeros if needed) For detailed formatting, custom format strings can be combined as needed, for example: ''yyyy-MM-dd HH:mm:ss'' would display as '2024-04-09 15:45:30'. 'Note:' The output may vary according to localization and culture settings unless otherwise specified (e.g., the 'S' format is culture-invariant).
HeaderTemplate	object	N/A	Defines a custom header template for the calendar pop-up. You can provide either the string ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section of the calendar's pop-up interface.
HideDayNames	bool	false	This option removes or conceals the display of weekday names (such as "Monday," "Tuesday," etc.) from the calendar pop-up, leaving only the days of the month visible to the user.
HideOtherMonthDays	bool	false	Specifies whether days from adjacent months (previous or next) are displayed in the calendar pop-up. When enabled, dates that fall outside the currently selected month are shown in the calendar view, typically in a muted or lighter style. Disabling this option will hide these out-of-month days, so only the dates belonging to the current month are visible.
HideTooltipArrow	bool	false	Prevents the arrow indicator from being displayed in the calendar tooltip pop-up, resulting in a cleaner appearance without the arrow pointing to the trigger element.
Hint	string	""	Displays supplementary helper text beneath the element, which becomes visible exclusively when the element is focused. This text is intended to provide contextual guidance or instructions to users as they interact with the element.
ImportantDates	IEnumerable<object>	N/A	Highlights specific dates in the calendar pop-up, marking them as important to make them stand out visually to users. These dates can be used to indicate special events, deadlines, or other significant occurrences.
ImportantDatesTemplate	object	N/A	Defines the template used to display important dates within the calendar pop-up. This property accepts either the ID of an existing '

DateTimePicker Methods

Name	Type	Arguments	Description
Close	void	N/A	Triggers the closure of the calendar pop-up window, removing it from view and returning focus to the primary interface.
GetDate	DateTime	N/A	Retrieves and returns a JavaScript Date object representing a specific point in time.
GetIsOpenedAsync()	Task<bool>	'N/A'	Gets the &quot;IsOpened&quot; property as Task&lt;bool&gt;.
GetValueAsync()	Task<DateTime>	'N/A'	Gets the &quot;Value&quot; property as Task&lt;DateTime&gt;.
Open	void	N/A	Displays the calendar pop-up, allowing users to select a date from an interactive calendar interface.
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	Automatically highlights all the text contained within the input field, allowing users to easily copy, cut, or overwrite the current content.
SetDate	void	DateTime date	Specifies the selected date to be displayed and managed by the DateTimePicker component. Setting this value determines the currently chosen date shown in the picker interface.Args: DateTime date - The date object to be set.
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 whenever the value associated with the component or input field is modified by the user or programmatically. It activates each time a change is detected, allowing you to respond to updates in real-time, such as validating input, updating UI elements, or saving new data.	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 whenever the value associated with the component or input field is modified by the user or programmatically. It activates each time a change is detected, allowing you to respond to updates in real-time, such as validating input, updating UI elements, or saving new data.	DateTimePickerChangedEventArgs
OnClose	EventCallback<Event>	This event is triggered when the calendar pop-up is closed by the user, either by selecting a date or dismissing the pop-up through other means (such as clicking outside the calendar or pressing the Escape key).	N/A
Closed	event DateTimePickerClosedEventHandler	This event is triggered when the calendar pop-up is closed by the user, either by selecting a date or dismissing the pop-up through other means (such as clicking outside the calendar or pressing the Escape key).	DateTimePickerClosedEventArgs
OnClosing	EventCallback<Event>	This event is fired immediately before the calendar pop-up is closed. At this stage, event handlers have the opportunity to intercept the closing action. If you want to prevent the calendar from closing—for example, to validate user input or display a confirmation message—you can call event.preventDefault() within your event handler. Doing so will cancel the close operation, keeping the calendar pop-up open until the condition is resolved.	N/A
Closing	event DateTimePickerClosingEventHandler	This event is fired immediately before the calendar pop-up is closed. At this stage, event handlers have the opportunity to intercept the closing action. If you want to prevent the calendar from closing—for example, to validate user input or display a confirmation message—you can call event.preventDefault() within your event handler. Doing so will cancel the close operation, keeping the calendar pop-up open until the condition is resolved.	DateTimePickerClosingEventArgs
OnOpen	EventCallback<Event>	This event is triggered whenever the calendar pop-up component becomes visible to the user, such as when a user clicks on the input field or calendar icon to display the calendar interface.	N/A
Opened	event DateTimePickerOpenedEventHandler	This event is triggered whenever the calendar pop-up component becomes visible to the user, such as when a user clicks on the input field or calendar icon to display the calendar interface.	DateTimePickerOpenedEventArgs
OnOpening	EventCallback<Event>	This event fires immediately before the calendar pop-up is displayed to the user. Developers can intercept this event and prevent the calendar from opening by invoking event.preventDefault() within the event handler. This allows for custom validation or logic to be executed prior to showing the calendar interface.	N/A
Opening	event DateTimePickerOpeningEventHandler	This event fires immediately before the calendar pop-up is displayed to the user. Developers can intercept this event and prevent the calendar from opening by invoking event.preventDefault() within the event handler. This allows for custom validation or logic to be executed prior to showing the calendar interface.	DateTimePickerOpeningEventArgs

Enums

DropDownButtonPosition

DropDownButtonPosition.Left

DropDownButtonPosition.Right

CalendarMode

CalendarMode.Default

CalendarMode.Classic

DayFormat

DayFormat.Narrow

DayFormat.FirstTwoLetters

DayFormat.Long

DayFormat.Short

DateTimePickerDisplayKind

DateTimePickerDisplayKind.UTC

DateTimePickerDisplayKind.Local

DateTimePickerDisplayKind.Unspecified

CalendarDisplayModeView

CalendarDisplayModeView.Table

CalendarDisplayModeView.List

DateTimePickerDropDownDisplayMode

DateTimePickerDropDownDisplayMode.Auto

DateTimePickerDropDownDisplayMode.Default

DateTimePickerDropDownDisplayMode.Classic

DateTimePickerDropDownDisplayMode.Calendar

DateTimePickerDropDownDisplayMode.TimePicker

DropDownPosition

DropDownPosition.Auto

DropDownPosition.Top

DropDownPosition.Bottom

DropDownPosition.OverlayTop

DropDownPosition.OverlayCenter

DropDownPosition.OverlayBottom

DropDownPosition.CenterBottom

DropDownPosition.CenterTop

DateTimePickerEditMode

DateTimePickerEditMode.Default

DateTimePickerEditMode.Full

DateTimePickerEditMode.Partial

DateTimePickerSpinButtonsPosition

DateTimePickerSpinButtonsPosition.Left

DateTimePickerSpinButtonsPosition.Right

TooltipPosition

TooltipPosition.Auto

TooltipPosition.Absolute

TooltipPosition.Bottom

TooltipPosition.Top

TooltipPosition.Left

TooltipPosition.Right

Validation

Validation.Strict

Validation.Interaction