NWD Date/Time Picker (Multi-Mode) v1.35.0

Text displayed in the input while it has no value.

Color of the placeholder text.

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

• datedisplays only the calendar panel, no time picker.
• timedisplays only the time picker, no calendar.
• datetimedisplays both the calendar and the time picker.

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

• singleonly one date can be selected at a time. Clicking the selected date again clears it.
• multiplemultiple dates can be selected, each click toggles the selection.
• rangea date range can be selected, the first click sets the start date and the second sets the end date.

Combining time input type with multiple or range is not supported and will block the component.

BCP 47 locale that defines the language of dates, month names, weekday labels and timepicker column labels (for example en-US or pt-BR). When empty or invalid, uses the browser locale.

See common locales

Almost everything the calendar writes comes from the browser's own locale data, and follows whatever you set here: month names, weekday names, the order of day and month, and the way each format is rendered. That covers far more languages than the list below.

Two pieces of text are written by the plugin itself and exist only in these 43 languages: the Hours, Minutes, Seconds and Period column headers in the time picker, and the N dates selected label the input falls back to when several dates do not fit. In any other language those two appear in English, while the calendar around them stays fully translated. English, Portuguese, Spanish, French, German, Italian, Japanese, Chinese, Arabic, Russian, Korean, Dutch, Polish, Turkish, Swedish, Indonesian, Hindi, Danish, Finnish, Norwegian, Czech, Hungarian, Romanian, Ukrainian, Thai, Vietnamese, Greek, Hebrew, Slovak, Malay, Persian, Bengali, Urdu, Tamil, Swahili, Croatian, Bulgarian, Serbian, Lithuanian, Latvian, Estonian, Galician and Irish. Need one that is not here? Ask for it and it goes in.

IANA timezone that defines the zone dates and times are read and written in (for example America/Sao_Paulo or Asia/Tokyo). When empty or invalid, uses the browser timezone.

See supported codes

Leave it empty and each visitor sees the calendar in their own timezone, which is what most apps want. Fill it only when the dates belong to one fixed place — a venue, a store, a broadcast — and must read the same for everyone.

Controls whether the input icon is displayed.

Icon displayed in the input. With auto, the icon follows the input type (date, datetime or time) and, for dates, the selection mode (single, multiple or range), in its outline version.

• autofollows the input type and, for dates, the selection mode, using the outline icons.
• calendar singleoutlined calendar with a marked day.
• calendar single filledfilled calendar with a marked day.
• calendar multipleoutlined calendar with a day grid.
• calendar multiple filledfilled calendar with a day grid.
• calendar rangeoutlined calendar with a row of days.
• calendar range filledfilled calendar with a row of days.
• calendar clockoutlined calendar with a clock.
• calendar clock filledfilled calendar with a clock.
• clockoutlined clock.
• clock filledfilled clock.

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.

• leftthe icon appears to the left of the input text.
• rightthe icon appears to the right of the input text.

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. Leave it empty for 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-topopens upward if there is enough space above, downward otherwise. If neither side has enough space, opens toward the side with more space.
• auto-bottomopens downward if there is enough space below, upward otherwise. If neither side has enough space, opens toward the side with more space.
• topalways opens upward, regardless of available space.
• bottomalways opens downward, regardless of available space.

Opening animation of the floating panel.

• noneno animation.
• dropslides in from above/below with a bounce.
• elasticscales from the anchor edge with elasticity.
• expandscales from the anchor edge without bounce.
• fadefades in smoothly.
• popscales up from the center with a bounce.
• slideslides in from above/below.
• zoomscales up slightly from center.

Background color of the floating panel.

Sets the border color of the floating panel.

Intensity of the glassmorphism effect on the floating panel.

• noneno glass effect.
• subtleapplies a subtle glass effect.
• lightapplies a light glass effect.
• mediumapplies a medium glass effect.
• strongapplies a strong glass effect.
• intenseapplies a intense glass effect.

Look of the scrollbar in the time picker columns: hidden (the column still scrolls), minimal (a handle only) or arrows (a handle with an arrow at each end), each in thin or regular width. Firefox shows its own scrollbar for arrows.

• hidden
• minimal thin
• minimal regular
• arrows thin
• arrows regular

Fades the top and bottom edges of the time picker columns while there are more values to scroll to on that side.

Sets which view level is displayed when the calendar opens.

• daysopens on the day selector.
• monthsopens on the month selector.
• yearsopens on the year selector.

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

• capitalizefirst letter uppercase (e.g. Mon).
• lowercaseall lowercase (e.g. mon).
• uppercaseall uppercase (e.g. MON).

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.

• sundaythe calendar grid starts on Sunday.
• mondaythe calendar grid starts on Monday.

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

Controls the click behavior on adjacent month cells.

• disable interactiondays are shown for reference only, no click and no hover.
• enable selection onlyclicking selects the date without navigating to that month.
• enable go to onlyclicking navigates to that month without selecting the date.
• enable selection and go toclicking both selects the date and navigates to that month.

Sets where the time columns open when Input type is datetime; the time button stays in place. stacked: below it. replace: in place of the calendar. side right or side left: in a strip beside the calendar. auto: below if the panel fits on the screen, otherwise to the right, then to the left, otherwise in place of the calendar.

• stackedthe columns open below the time button, and the panel grows downward or moves up when there is no room below.
• replacethe columns take the place of the calendar, at the same height, and closing the time brings the calendar back.
• side rightthe columns open in a strip to the right of the calendar; the panel gets wider, not taller.
• side leftthe same strip, to the left of the calendar; the calendar and the time button stay in place.
• autobelow if the panel fits on the screen, otherwise to the right, then to the left, otherwise in place of the calendar.

Only for Input type datetime. The time button stays where it is in every layout; only the columns move, so the panel never jumps under the pointer.

Opens the panel with the time picker already expanded when Input type is datetime. Ignored when Time picker layout is replace, or when auto picks replace: then the panel always opens with the calendar.

Pairs well with side right and side left: the panel opens with the calendar and the time side by side. With replace, or when auto picks it, the panel always opens on the calendar.

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.

• circleday cells use a circular shape.
• squareday cells use a rounded square shape.

Sets the shape of options in the time picker columns.

• circletime picker options use a circular shape.
• squaretime picker options use a rounded square shape.

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.

Disabling an input (native input or plugin input) makes it read-only in the UI, but it's not a secure way to prevent edits. Because it's handled client-side, users can still tamper with it. Use server-side protections like privacy rules, workflow conditions, or backend workflows to enforce security.

For styling, you can use the exposed is clickable state to apply conditionals at the element level, or use the properties below to define global styles for the disabled state.

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 validstate accordingly.

Unlike native Bubble inputs, this does not prevent workflows from running automatically. You should use the is valid state in your workflows to handle validation logic.

For styling, you can use the exposed is valid state to apply conditionals at the element level, or use the properties below to define global styles for the invalid state.

Input background color when invalid.

Input border color when invalid.

For styling, you can use the exposed is focused state to apply conditionals at the element level, or use the properties below to define global styles for the focused state.

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 value is accepted. False when it is required and has no confirmed value. It updates on every change, so a workflow can rely on it; the invalid style only shows after the person leaves the field or closes the panel, or when a workflow sets the value.

True when the panel is open.

Triggered when the confirmed selection changes: the user confirms a selection, the component is reset, or a change to the minimum or maximum date or time clears a date that was already chosen or set.