DateTimePicker Blazor API

DateTimePicker Properties

NameTypeDefaultDescription
AnimationSettingsobjectN/AEnhances 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.
AutoCloseboolfalseSpecifies 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.
AutoCloseDelayint500Specifies 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.
CalendarButtonboolfalseControls 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.
CalendarButtonPositionDropDownButtonPositionDropDownButtonPosition.RightSpecifies 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.
CalendarModeCalendarModeCalendarMode.DefaultSpecifies 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.
DayNameFormatDayFormatDayFormat.FirstTwoLettersSpecifies 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.
DisabledboolfalseDetermines 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.
DisableAutoNavigationboolfalsePrevents 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.
DisplayKindDateTimePickerDisplayKindDateTimePickerDisplayKind.UnspecifiedSpecifies 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.
DisplayModeViewCalendarDisplayModeViewCalendarDisplayModeView.TableSpecifies 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.
DropDownAppendTostring"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.
DropDownDisplayModeDateTimePickerDropDownDisplayModeDateTimePickerDropDownDisplayMode.DefaultDefines 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).
DropDownOverlayboolfalseWhen 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.
DropDownPositionDropDownPositionDropDownPosition.AutoSpecifies 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.
EditModeDateTimePickerEditModeDateTimePickerEditMode.DefaultSpecifies 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.
EnableMouseWheelActionboolfalseSpecifies 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.
FirstDayOfWeekint0Specifies 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.
FooterTemplateobjectN/ADefines 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.
FooterboolfalseSpecifies whether the footer section should be visible on the interface. Set this option to 'true' to display the footer, or 'false' to hide it.
FormatStringstring"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).
HeaderTemplateobjectN/ADefines 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.
HideDayNamesboolfalseThis 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.
HideOtherMonthDaysboolfalseSpecifies 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.
HideTooltipArrowboolfalsePrevents 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.
Hintstring""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.
ImportantDatesIEnumerable<object>N/AHighlights 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.
ImportantDatesTemplateobjectN/ADefines the template used to display important dates within the calendar pop-up. This property accepts either the ID of an existing '