Date/Time Picker (Multi-Mode) v1.14.0

Sets the selection mode to date only, time only, or both.

• date
• time
• datetime

Sets the date selection mode to single date, multiple dates, or date range.

• single
• multiple
• range

Use BCP 47 format with a hyphen (e.g. en-US, pt-BR) to format dates, month names, weekday labels and timepicker column labels. Invalid values automatically fall back to en-US. Consult the documentation for a list of supported languages.

Sets whether the component uses the user’s system timezone or a custom timezone.

• local
• custom

Only used when timezone mode is set to custom. Always use a valid IANA identifier (e.g. America/New_York, Europe/London). Invalid values automatically fall back to UTC.

Text displayed in the input while it has no value.

Color of the placeholder text.

Controls whether the input icon is displayed.

Icon displayed in the input. With auto, the icon follows the input type (date, datetime or time) in its outline version.

• auto
• calendar
• calendar outline
• calendar simple
• calendar simple outline
• calendar event
• calendar event outline
• calendar range
• calendar range outline
• calendar clock
• calendar clock outline
• clock
• clock outline
• alarm
• alarm outline

Icon size in pixels. When empty, it is calculated from the input font size.

Color of the input icon.

Whether the icon appears to the left or right of the input text.

• left
• right

Sets the date format displayed in the input and tooltip.

• 31/12/2020
• 31/12/20
• 12/31/2020
• 12/31/20
• 2020/12/31
• 31-12-2020
• 31-12-20
• 12-31-2020
• 12-31-20
• 2020-12-31
• 31.12.2020
• 31.12.20
• 12.31.2020
• 12.31.20
• 2020.12.31

Sets the time format displayed in the input, tooltip, and time picker. It also controls whether the time picker uses a 12-hour or 24-hour format and whether the AM/PM tabs are displayed.

• 1:22 pm
• 01:22 pm
• 1:22:44 pm
• 01:22:44 pm
• 1:22 PM
• 01:22 PM
• 1:22:44 PM
• 01:22:44 PM
• 13:22
• 13:22:44

Displays the time alongside dates in the input label when the mode is range + datetime.

Displays a tooltip on hover showing all selected dates.

Time (in milliseconds) before the tooltip appears after hover.

Sets the default date for the single mode. Applied when the component loads or is reset, and updated when the source value changes. User-confirmed values are preserved. In datetime and time modes, the default time fields override its time.

Sets the default list of dates for the multiple mode. Applied when the component loads or is reset, and updated when the source list changes. User-confirmed values are preserved. In datetime mode, the default time fields override the time of each date.

Sets the default start date for the range mode. Applied when the component loads or is reset, and updated when the source value changes. User-confirmed values are preserved. In datetime mode, the default time fields override the start and end time of the range.

Sets the default end date for the range mode. Applied when the component loads or is reset, and updated when the source value changes. User-confirmed values are preserved. In datetime mode, the default time fields override the start and end time of the range.

Sets the default hour (0-23). When a default date is configured, overrides its hour in datetime and time modes. Without a default date, sets the input value in time mode, or only preselects it in the time picker in datetime mode. No effect in date mode.

Sets the default minute (0-59). When a default date is configured, overrides its minute in datetime and time modes. Without a default date, sets the input value in time mode, or only preselects it in the time picker in datetime mode. No effect in date mode.

Sets the default second (0-59). When a default date is configured, overrides its second in datetime and time modes. Without a default date, sets the input value in time mode, or only preselects it in the time picker in datetime mode. No effect in date mode.

Sets the maximum number of selections. A value of 0 means there is no limit. In multiple mode, it limits the number of dates that can be selected. In range mode, it limits the number of days in the selected range. This property has no effect in single mode.

Message displayed inside the panel when the selection limit is reached.

Font color of the limit reached message.

Sets the minimum selectable date. Earlier dates are blocked.

Sets the maximum selectable date. Later dates are blocked.

Sets the list of specific dates blocked from selection.

Disables all Mondays from selection. A disabled weekday inside a range rejects the entire interval.

Disables all Tuesdays from selection. A disabled weekday inside a range rejects the entire interval.

Disables all Wednesdays from selection. A disabled weekday inside a range rejects the entire interval.

Disables all Thursdays from selection. A disabled weekday inside a range rejects the entire interval.

Disables all Fridays from selection. A disabled weekday inside a range rejects the entire interval.

Disables Saturdays from selection. A disabled weekday inside a range rejects the entire interval.

Disables all Sundays from selection. A disabled weekday inside a range rejects the entire interval.

Sets the minimum selectable hour in the time picker columns (0–23). Options outside the limit are shown as disabled.

Sets the maximum selectable hour in the time picker columns (0–23). Options outside the limit are shown as disabled.

Sets the minimum selectable minute in the time picker columns (0–59). Options outside the limit are shown as disabled.

Sets the maximum selectable minute in the time picker columns (0–59). Options outside the limit are shown as disabled.Maximum selectable minute in the time picker columns (0–59). Options outside the limit are shown as disabled.aximum selectable minute in the time picker columns (0–59). Options outside the limit are shown as disabled.Maximum selectable minute in the time picker columns (0–59). Options outside the limit are shown as disabled.

Color of the divider lines inside the panel.

Background color of navigation elements on hover.

Color of navigation texts and icons in the panel.

Preferred or forced opening direction of the floating panel relative to the input.

• auto-top
• auto-bottom
• top
• bottom

Opening animation of the floating panel.

• none
• drop
• elastic
• expand
• fade
• pop
• slide
• zoom

Background color of the floating panel.

Border color of the floating panel.

Intensity of the glassmorphism effect on the floating panel.

• none
• subtle
• light
• medium
• strong
• intense

Sets which view level is displayed when the calendar opens.

• days
• months
• years

Controls the capitalization style of the weekday labels in the calendar header.

• capitalize
• lowercase
• uppercase

Color of the weekday labels in the calendar header.

Displays only the first letter of the weekday.

Sets which day starts the calendar in days view mode.

• sunday
• monday

Displays the days of the previous and next months in the calendar.

Controls the click behavior on adjacent month cells.

• disable interaction
• enable selection only
• enable go to only
• enable selection and go to

Displays the seconds column in the time picker. Only takes effect when the configured time display format includes seconds (ss).

Border color of the hour, minute, and second columns.

Color of the column title labels (Hours, Minutes, Seconds).

Sets the interval between options in the hour column. The current value (default or selected) is always included even outside the step.

Sets the interval between options in the minute column. The current value (default or selected) is always included even outside the step.

Sets the interval between options in the second column. The current value (default or selected) is always included even outside the step.

Sets the shape of day cells in the calendar.

• circle
• square

Sets the shape of options in the time picker columns.

• circle
• square

Background color of today's date and the current time option.

Border color of today's date cell.

Text color of today's date and the current month/year in their selectors.

Background color of available cells.

Border color of available cells.

Text color of available cells.

Background color of cells on hover.

Border color of cells on hover.

Text color of cells on hover.

Background color of selected cells.

Border color of selected cells.

Text color of selected cells.

Background color of blocked cells.

Border color of blocked cells.

Text color of blocked cells.

Applies strikethrough to blocked calendar day cells.

Applies strikethrough to blocked time picker options.

Vertical padding of the action buttons, in pixels.

Horizontal padding of the action buttons, in pixels.

Text displayed on the cancel button.

Background color of the cancel button.

Border color of the cancel button.

Font color of the cancel button.

Background color of the cancel button on hover.

Text displayed on the confirm button.

Background color of the confirm button.

Border color of the confirm button.

Font color of the confirm button.

Background color of the confirm button on hover.

Disables the component, preventing any interaction.

Input background color when disabled.

Input border color when disabled.

Input font color when disabled.

Marks the field as required and enables input validation. When enabled, the element evaluates whether a value is selected and publishes the **is valid**state accordingly.

Input background color when invalid (required with no value).

Input border color when invalid (required with no value).

Input background color when focused.

Input border color when focused.

Name read by screen readers. When empty, uses the placeholder or the visible label.

Hint read by screen readers after the name. Empty for none.

The confirmed date when the selection mode is single. Empty if no date is confirmed or another selection mode is active. In time mode, the date portion is irrelevant, use the time portion or use the state 'selected time (total seconds)' to read only the confirmed time in seconds.

The list of confirmed dates when the selection mode is multiple. Empty if no date is confirmed or another selection mode is active.

The confirmed start and end dates as a date range when the selection mode is range. Empty until both dates are confirmed or another selection mode is active.

All dates within the confirmed range interval, inclusive of start and end. Empty until both dates are confirmed or another selection mode is active.

The month of the confirmed value, from 1 (January) to 12 (December). In multiple mode, uses the first confirmed date; in range mode, the start date. Does not change when navigating the calendar. Empty if no value is confirmed.

The year of the confirmed value. In multiple mode, uses the first confirmed date; in range mode, the start date. Does not change when navigating the calendar. Empty if no value is confirmed.

The month currently displayed in the calendar, from 1 (January) to 12 (December). Updates when the user navigates, even without selecting a date.

The year currently displayed in the calendar. Updates when the user navigates, even without selecting a date.

All dates of the displayed month that can be selected under the current restrictions (minimum and maximum date, disabled dates and weekdays).

All dates of the displayed month that cannot be selected under the current restrictions.

The confirmed time as total seconds since midnight (e.g. 14:30 = 52200). In multiple mode, uses the first confirmed date; in range mode, the start date. Empty if no value is confirmed.

The confirmed time as total minutes since midnight (e.g. 14:30 = 870). May be decimal when the time has seconds. In multiple mode, uses the first confirmed date; in range mode, the start date. Empty if no value is confirmed.

The confirmed time as total hours since midnight (e.g. 14:30 = 14.5). May be decimal. In multiple mode, uses the first confirmed date; in range mode, the start date. Empty if no value is confirmed.

The second part of the confirmed time, from 0 to 59 (e.g. 14:30:15 = 15). Empty if no value is confirmed.

The minute part of the confirmed time, from 0 to 59 (e.g. 14:30 = 30). Empty if no value is confirmed.

The hour part of the confirmed time, from 0 to 23 (e.g. 14:30 = 14). Empty if no value is confirmed.

The locale used to format dates and labels. Falls back to en-US when the configured locale is invalid, so it may differ from the configured value.

The IANA timezone used by the component. In custom mode, it falls back to UTC when the configured timezone id is invalid.

True when the input is enabled and can be opened; false when it is disabled.

True when the input is configured as required.

True when the field is not required, or when it is required and has a confirmed and valid value; false otherwise.

True when the panel is open.

Triggered when the confirmed selection changes, whether the user confirms a selection via the confirmation button or the component is reset.