Range Date Time Picker
Range Date Time Picker widgets are Input Fields that let the user enter one or more date-time ranges in a single compact field: they can type the ranges using their keyboard or open a drop-down calendar popover, a multi-month day grid plus a start and end time picker, to select them visually. Clicking a pill or pressing Enter navigates the calendar to that range’s month; with allowEdit it also selects the pill so the range can be edited in place. For an always-visible inline variant, use the Range Date Time Calendar; for a typed-only field with no popover, use the Range Date Time Input; for a single (non-range) value, use the Date Time Picker.
The widget emits an array of { start, end } objects, each a local ISO date-time string (YYYY-MM-DDTHH:mm:ss).
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('bookingSlots', { label: 'Booking Slots', }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "bookingSlots", "label": "Booking Slots" } ]}Use these props to customize your Range Date Time Picker widget. It accepts the full set of typed-input props (for the trigger) and calendar props (for the popover and its time pickers), all listed below.
| prop | type | description |
|---|---|---|
allowCustomTime | boolean | Allow typing a time in each picker; when false (default) times come only from the grid |
allowEdit | boolean | Enables selecting and editing pills in place. See Editing Pills. Defaults to false |
cancelEditLabel | string | Localizable | Tooltip of the pill’s cancel icon while editing. Defaults to Cancel |
confirmEditLabel | string | Localizable | Tooltip of the pill’s confirm icon while editing. Defaults to Confirm |
dayAriaLabel | string | Aria label for the day segment input. Defaults to Day |
dayCountAriaLabel | string | Localizable | Aria label template for the per-day count badge; {count} token substituted. Defaults to {count} ranges |
dayPeriodAriaLabel | string | Aria label for the AM/PM segment input. Defaults to AM/PM |
disabledDayCountAriaLabel | string | Localizable | Aria label template for the per-day disabled-spans badge; {count} token substituted. Defaults to {count} disabled ranges |
disabledRangeMessage | string | Localizable | Error shown when a selected range overlaps a disabled span |
disabledRanges | array | Array of { start, end } date-time spans that render disabled (a whole day is 00:00:00–23:59:59) |
editAriaLabel | string | Localizable | Edit hint joined into a selectable pill’s aria-description; {label} is replaced with the range’s label. Defaults to Edit range {label} |
editCancelledMessage | string | Localizable | Screen-reader announcement when an edit is cancelled. Defaults to Edit cancelled. |
editCommittedMessage | string | Localizable | Screen-reader announcement when an edit commits; {label} carries the resulting range. Defaults to Range updated to {label}. |
editLabel | string | Localizable | Tooltip of the pill’s edit icon. Defaults to Edit |
editStartedMessage | string | Localizable | Screen-reader announcement when an edit starts; {label} carries the range. Defaults to Editing range {label}. |
endDateTimeAriaLabel | string | Aria label for the end date-time field group |
endTimeLabel | string | Localizable | Visible heading on the end time picker. Defaults to End time |
hint | string | A description to display below the input |
hourAriaLabel | string | Aria label for the hour segment input. Defaults to Hour |
hourFormat | '12' | '24' | Force 12- or 24-hour entry. Defaults to the user’s locale |
icon | string | A css class to display an icon inside the input |
incompleteMessage | string | Localizable | Error shown when focus leaves the widget with a partially filled date-time behind; the value goes to null so validators report it |
invalidDateMessage | string | Localizable | Error shown when a typed date does not exist |
maxDateTime | string | Latest allowed instant (ISO date-time, inclusive) |
maxDateTimeMessage | string | Localizable | Error shown when a typed date-time is after maxDateTime |
minDateTime | string | Earliest allowed instant (ISO date-time, inclusive) |
minDateTimeMessage | string | Localizable | Error shown when a typed date-time is before minDateTime |
minuteAriaLabel | string | Aria label for the minute segment input. Defaults to Minute |
minuteStep | number | Granularity of the time pickers and minute segment |
monthAriaLabel | string | Aria label for the month segment input. Defaults to Month |
nextMonthAriaLabel | string | Accessible label for the next month navigation button |
nextMonthIcon | string | Custom CSS class for the next month button |
noAvailableTimesMessage | string | Localizable | Message shown when the bounds yield no selectable times. Defaults to No available times |
numberOfMonths | number | Number of months to display simultaneously in the popover |
prevMonthAriaLabel | string | Accessible label for the previous month navigation button |
prevMonthIcon | string | Custom CSS class for the previous month button |
removePillAriaLabel | string | Aria label for the remove pill action |
selectYearAriaLabel | string | Aria label for the year-selector toggle button in the calendar header; the current year is appended. Defaults to Select year |
separator | string | The separator between start and end fields. Defaults to - |
startDateTimeAriaLabel | string | Aria label for the start date-time field group |
startTimeLabel | string | Localizable | Visible heading on the start time picker. Defaults to Start time |
toggleAriaLabel | string | Aria label for the popup toggle button. Defaults to Show calendar |
yearAriaLabel | string | Aria label for the year segment input. Defaults to Year |
yearGridAriaLabel | string | Aria label for the year-selection grid. Defaults to Year selection |
Use the property hint to add descriptive text.
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('bookingSlots', { hint: 'Pick one or more date-time ranges from the calendar.', minuteStep: 30, label: 'Booking Slots', }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "bookingSlots", "label": "Booking Slots", "props": { "hint": "Pick one or more date-time ranges from the calendar.", "minuteStep": 30 } } ]}Time Labels
Section titled “Time Labels”Use startTimeLabel and endTimeLabel to rename the two time pickers inside the popover (for example Check-in and Check-out). Both are localizable and default to Start time and End time.
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('stays', { hint: 'Open the calendar to see the renamed time pickers.', minuteStep: 30, startTimeLabel: 'Check-in', endTimeLabel: 'Check-out', label: 'Stays', defaultValue: [ { start: '2026-02-16T14:00:00', end: '2026-02-18T09:30:00', }, ], }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "stays", "label": "Stays", "defaultValue": [ { "start": "2026-02-16T14:00:00", "end": "2026-02-18T09:30:00" } ], "props": { "hint": "Open the calendar to see the renamed time pickers.", "minuteStep": 30, "startTimeLabel": "Check-in", "endTimeLabel": "Check-out" } } ]}Min and Max Date-Times
Section titled “Min and Max Date-Times”Use minDateTime and maxDateTime (ISO date-times, both inclusive) to bound the selectable instant span. Out-of-range days and times render disabled in the popover, and a typed value that violates a boundary raises an input error; customize (and localize) the messages with minDateTimeMessage and maxDateTimeMessage.
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('bookingSlots', { hint: 'Book between 2026-02-01 09:00 and 2026-07-31 18:00', minuteStep: 30, minDateTime: '2026-02-01T09:00:00', maxDateTime: '2026-07-31T18:00:00', minDateTimeMessage: 'No bookings before February 2026', maxDateTimeMessage: 'No bookings after July 2026', label: 'Booking Slots', defaultValue: [ { start: '2026-02-13T09:00:00', end: '2026-02-13T11:00:00', }, ], }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "bookingSlots", "label": "Booking Slots", "defaultValue": [ { "start": "2026-02-13T09:00:00", "end": "2026-02-13T11:00:00" } ], "props": { "hint": "Book between 2026-02-01 09:00 and 2026-07-31 18:00", "minuteStep": 30, "minDateTime": "2026-02-01T09:00:00", "maxDateTime": "2026-07-31T18:00:00", "minDateTimeMessage": "No bookings before February 2026", "maxDateTimeMessage": "No bookings after July 2026" } } ]}Disabled Ranges
Section titled “Disabled Ranges”Use disabledRanges to mark instant spans as unavailable: a whole day is 00:00:00–23:59:59, and a partial-day span disables only the affected time slots on that day. A selected range that overlaps a disabled span raises an input error whose message you can customize (and localize) with disabledRangeMessage.
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('bookingSlots', { hint: 'Feb 9-10 are closed, plus a maintenance window on 2026-02-17', minuteStep: 30, disabledRanges: [ { start: '2026-02-09T00:00:00', end: '2026-02-10T23:59:59', }, { start: '2026-02-17T13:00:00', end: '2026-02-17T14:00:00', }, ], disabledRangeMessage: 'This slot overlaps an unavailable period', label: 'Booking Slots', defaultValue: [ { start: '2026-02-13T09:00:00', end: '2026-02-13T11:00:00', }, ], }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "bookingSlots", "label": "Booking Slots", "defaultValue": [ { "start": "2026-02-13T09:00:00", "end": "2026-02-13T11:00:00" } ], "props": { "hint": "Feb 9-10 are closed, plus a maintenance window on 2026-02-17", "minuteStep": 30, "disabledRanges": [ { "start": "2026-02-09T00:00:00", "end": "2026-02-10T23:59:59" }, { "start": "2026-02-17T13:00:00", "end": "2026-02-17T14:00:00" } ], "disabledRangeMessage": "This slot overlaps an unavailable period" } } ]}Allow Custom Time
Section titled “Allow Custom Time”Use the property allowCustomTime to let the user type any time directly in each time picker, in addition to picking from the grid. When false (the default) times come only from the grid.
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('bookingSlots', { hint: 'Type an exact time in each picker.', minuteStep: 30, allowCustomTime: true, label: 'Booking Slots', defaultValue: [ { start: '2026-02-13T09:00:00', end: '2026-02-13T11:00:00', }, ], }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "bookingSlots", "label": "Booking Slots", "defaultValue": [ { "start": "2026-02-13T09:00:00", "end": "2026-02-13T11:00:00" } ], "props": { "hint": "Type an exact time in each picker.", "minuteStep": 30, "allowCustomTime": true } } ]}Number of Months
Section titled “Number of Months”Use the property numberOfMonths to display multiple months side-by-side in the popover. The time pickers render below the first panel.
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('bookingSlots', { hint: 'Two months are shown side-by-side in the popover.', minuteStep: 30, numberOfMonths: 2, label: 'Booking Slots', defaultValue: [ { start: '2026-02-16T14:00:00', end: '2026-02-18T09:30:00', }, ], }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "bookingSlots", "label": "Booking Slots", "defaultValue": [ { "start": "2026-02-16T14:00:00", "end": "2026-02-18T09:30:00" } ], "props": { "hint": "Two months are shown side-by-side in the popover.", "minuteStep": 30, "numberOfMonths": 2 } } ]}Day Count Labels
Section titled “Day Count Labels”A day carrying more than one range shows a count badge, and a day with disabled slots shows a disabled badge. Use dayCountAriaLabel and disabledDayCountAriaLabel to customize (and localize) their screen-reader labels; the {count} token is replaced with the number of ranges.
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('bookingSlots', { hint: 'Hover a day badge to read its ranges.', minuteStep: 30, disabledRanges: [ { start: '2026-02-17T13:00:00', end: '2026-02-17T14:00:00', }, ], dayCountAriaLabel: 'Number of slots taken: {count}', disabledDayCountAriaLabel: 'Disabled slots: {count}', label: 'Booking Slots', defaultValue: [ { start: '2026-02-13T09:00:00', end: '2026-02-13T11:00:00', }, { start: '2026-02-13T13:00:00', end: '2026-02-13T15:00:00', }, ], }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "bookingSlots", "label": "Booking Slots", "defaultValue": [ { "start": "2026-02-13T09:00:00", "end": "2026-02-13T11:00:00" }, { "start": "2026-02-13T13:00:00", "end": "2026-02-13T15:00:00" } ], "props": { "hint": "Hover a day badge to read its ranges.", "minuteStep": 30, "disabledRanges": [ { "start": "2026-02-17T13:00:00", "end": "2026-02-17T14:00:00" } ], "dayCountAriaLabel": "Number of slots taken: {count}", "disabledDayCountAriaLabel": "Disabled slots: {count}" } } ]}Editing Pills
Section titled “Editing Pills”Use the property allowEdit to let the user change a committed range in place instead of removing it and typing it again. Click a pill, or arrow onto it, to select it; the selection reveals a pencil icon next to the remove icon. The pencil, or F2 or E on the focused pill, loads the range back into the segments and moves focus to the first start segment. While you type, the pill’s label previews the new value. Enter in the segments or the pill’s check icon confirms the replacement; Escape or the cross icon cancels it and keeps the pill selected. A confirmed range that overlaps a neighbour merges into it, and confirming an unchanged range is treated as a cancel. Selecting is not a commit: the form value only changes on confirm.
Selecting a pill navigates the popover to that range’s month and dims the other committed ranges. During an edit, day and time picks in the panel reshape the range without committing; Enter in the segments or the pill’s check icon confirms the replacement. Escape closes an open popover first, then cancels the edit.
On touch devices, where the pills collapse into the count bubble, the pencil is always visible inside the pills dropdown, and the pills and their icons grow to the pointer: coarse sizes listed under CSS Variables.
The tooltips and screen-reader announcements of the flow are localizable through editLabel, confirmEditLabel, cancelEditLabel, editAriaLabel, editStartedMessage, editCommittedMessage and editCancelledMessage. A {label} token in editAriaLabel, editStartedMessage and editCommittedMessage is replaced with the range’s display label by the widget itself, single braces on purpose, so the form’s {{ }} localization interpolation never consumes it.
import { gui } from '@golemui/gui-shared';
export default [ gui.inputs.rangeDateTimePicker('editableAppointments', { allowEdit: true, minuteStep: 30, label: 'Appointments', defaultValue: [ { start: '2026-09-07T09:00:00', end: '2026-09-07T11:00:00', }, { start: '2026-09-08T14:00:00', end: '2026-09-09T09:30:00', }, ], }),];{ "$schema": "https://golemui.com/schemas/form.schema.json", "form": [ { "kind": "input", "type": "rangeDateTimePicker", "path": "editableAppointments", "label": "Appointments", "defaultValue": [ { "start": "2026-09-07T09:00:00", "end": "2026-09-07T11:00:00" }, { "start": "2026-09-08T14:00:00", "end": "2026-09-09T09:30:00" } ], "props": { "allowEdit": true, "minuteStep": 30 } } ]}Styling
Section titled “Styling”Range Date Time Pickers can be styled as explained in the Styling Guide. The typed field, the popover calendar, and the embedded time pickers each have their own styling variables.
CSS Variables
Section titled “CSS Variables”Following you will find a list with the CSS Variables specific to the Range Date Time Picker popover positioning and toggle, plus those inherited from its sub-widgets.
| CSS Variable | Description |
|---|---|
--gui-radius-md | Interactive calendar container, day button, pill, and time list radius |
--gui-bg-default | Interactive calendar and time list background color |
--gui-border-default | Interactive calendar border color, hover day border, pills wrapper border |
--gui-space-3 | Internal padding within the calendar view and day buttons |
--gui-text-default | Input text color, day buttons text color, and time slot text color |
--gui-bg-disabled | Disabled day and disabled time slot background color |
--gui-intent-primary | Selected day, pill, and selected time slot background color |
--gui-intent-primary-hover | Today’s day border color and time slot hover background |
--gui-intent-error | Border and focus shadow color when invalid |
--gui-border-focus | Border color when a pill or input is focused |
--gui-shadow-focus | Box shadow when a pill or input is focused |
--gui-time-list-height | Total height of each time picker’s slot list viewport |
--gui-time-list-item-height | Fixed height of each time slot row |
--gui-time-list-columns | Number of columns in the time slot grid |
--gui-pill-height | Pill height. 24px, 32px under pointer: coarse |
--gui-pill-action-size | Size of the edit, confirm, cancel and remove icons. 16px, 24px under pointer: coarse |
--gui-pill-action-hit | Hit area of each pill icon. 24px, 32px under pointer: coarse |
--gui-pill-font-size | Pill label font size. var(--gui-font-xs), var(--gui-font-sm) under pointer: coarse |
Anatomy
Section titled “Anatomy”This is the anatomy of the Range Date Time Picker Widget in case you want to use your CSS styles.
<gui-range-date-time-picker-input class="gui-range-date-time-picker gui-field"> <gui-range-date-time-picker allow-edit=""> <span class="gui-label" id="fieldUid_label"><span class="gui-label__text">Appointments</span></span> <div class="gui-widget"> <gui-range-date-time id="date-input" class="gui-field"> <div class="gui-widget"> <div role="group" class="gui-widget-input gui-parts-ring gui-range-date-time-input" aria-label="Date-time range input"> <gui-pills class="gui-range-date-time-input__pills"> <div class="gui-pills__strip-wrapper gui-pills--end-shadow gui-pills--start-shadow"> <div class="gui-pills__strip" role="toolbar" tabindex="-1" aria-label="Selected date-time ranges"> <span class="gui-sentinel gui-sentinel__start"></span> <button type="button" class="gui-pills__pill gui-pills__pill--clickable" tabindex="-1" aria-pressed="false" aria-label="09/07/2026, 09:00 AM - 09/07/2026, 11:00 AM" aria-description="Edit range 09/07/2026, 09:00 AM - 09/07/2026, 11:00 AM. Remove date-time" > <span class="gui-pills__pill-text">09/07/2026, 09:00 AM - 09/07/2026, 11:00 AM</span> <span aria-hidden="true" class="gui-pills__pill-action gui-pills__pill-action--edit" title="Edit"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" > <path d="M229.66,58.34l-32-…"></path> </svg> </span> <span class="gui-pills__pill-remove" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" > <path d="M165.66,101.66,139…"></path> </svg> </span> </button> <button type="button" class="gui-pills__pill gui-pills__pill--clickable" tabindex="-1" aria-pressed="false" aria-label="09/08/2026, 02:00 PM - 09/09/2026, 09:30 AM" aria-description="Edit range 09/08/2026, 02:00 PM - 09/09/2026, 09:30 AM. Remove date-time" > <span class="gui-pills__pill-text">09/08/2026, 02:00 PM - 09/09/2026, 09:30 AM</span> <span aria-hidden="true" class="gui-pills__pill-action gui-pills__pill-action--edit" title="Edit"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" > <path d="M229.66,58.34l-32-…"></path> </svg> </span> <span class="gui-pills__pill-remove" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" > <path d="M165.66,101.66,139…"></path> </svg> </span> </button> <span class="gui-sentinel gui-sentinel__end"></span> </div> </div> <div class="gui-pills__compact"> <button type="button" aria-haspopup="true" class="gui-pills__count" aria-label="2 date-time ranges" aria-expanded="false" aria-controls="fieldUid_pills_dropdown" > 2 </button> </div> </gui-pills> <div class="gui-range-date-time-input__inputs"> <div class="gui-parts gui-range-date-time-input__field" role="group" aria-label="Start date-time"> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part" data-type="month" data-group="start" maxlength="2" placeholder="mm" tabindex="0" aria-label="Month" aria-valuemin="1" aria-valuemax="12" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> <span class="gui-range-date-time-input__separator">/</span> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part" data-type="day" data-group="start" maxlength="2" placeholder="dd" tabindex="-1" aria-label="Day" aria-valuemin="1" aria-valuemax="31" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> <span class="gui-range-date-time-input__separator">/</span> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part gui-parts__year gui-range-date-time-input__year" data-type="year" data-group="start" maxlength="4" placeholder="yyyy" tabindex="-1" aria-label="Year" aria-valuemin="1900" aria-valuemax="9999" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> <span class="gui-range-date-time-input__separator">,</span> <div dir="ltr" class="gui-parts__time-cluster gui-range-date-time-input__time-cluster"> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part" data-type="hour" data-group="start" maxlength="2" placeholder="hh" tabindex="-1" aria-label="Hour" aria-valuemin="1" aria-valuemax="12" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> <span class="gui-range-date-time-input__separator">:</span> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part" data-type="minute" data-group="start" maxlength="2" placeholder="mm" tabindex="-1" aria-label="Minute" aria-valuemin="0" aria-valuemax="59" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> </div> <span class="gui-range-date-time-input__separator"></span> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <button type="button" class="gui-parts__part gui-parts__dayperiod gui-range-date-time-input__part gui-range-date-time-input__dayperiod" data-type="dayPeriod" data-group="start" tabindex="-1" aria-label="AM/PM" > AM </button> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> </div> <span class="gui-range-date-time-input__separator">-</span> <div class="gui-parts gui-range-date-time-input__field" role="group" aria-label="End date-time"> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part" data-type="month" data-group="end" maxlength="2" placeholder="mm" tabindex="-1" aria-label="Month" aria-valuemin="1" aria-valuemax="12" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> <span class="gui-range-date-time-input__separator">/</span> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part" data-type="day" data-group="end" maxlength="2" placeholder="dd" tabindex="-1" aria-label="Day" aria-valuemin="1" aria-valuemax="31" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> <span class="gui-range-date-time-input__separator">/</span> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part gui-parts__year gui-range-date-time-input__year" data-type="year" data-group="end" maxlength="4" placeholder="yyyy" tabindex="-1" aria-label="Year" aria-valuemin="1900" aria-valuemax="9999" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> <span class="gui-range-date-time-input__separator">,</span> <div dir="ltr" class="gui-parts__time-cluster gui-range-date-time-input__time-cluster"> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part" data-type="hour" data-group="end" maxlength="2" placeholder="hh" tabindex="-1" aria-label="Hour" aria-valuemin="1" aria-valuemax="12" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> <span class="gui-range-date-time-input__separator">:</span> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <input type="text" inputmode="numeric" role="spinbutton" autocomplete="off" class="gui-parts__part gui-range-date-time-input__part" data-type="minute" data-group="end" maxlength="2" placeholder="mm" tabindex="-1" aria-label="Minute" aria-valuemin="0" aria-valuemax="59" /> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> </div> <span class="gui-range-date-time-input__separator"></span> <div class="gui-parts__touch-target gui-range-date-time-input__touch-target"> <button type="button" class="gui-parts__part gui-parts__dayperiod gui-range-date-time-input__part gui-range-date-time-input__dayperiod" data-type="dayPeriod" data-group="end" tabindex="-1" aria-label="AM/PM" > AM </button> <div class="gui-parts__visual-underline gui-range-date-time-input__visual-underline"></div> </div> </div> </div> </div> <div class="gui-visually-hidden" aria-live="polite"></div> </div> </gui-range-date-time> <button type="button" class="gui-range-date-time-picker__arrow" aria-haspopup="dialog" aria-label="Show calendar" aria-expanded="false" aria-controls="fieldUid_popup" > <span class="gui-caret" aria-hidden="true"></span> </button> </div> <ul class="gui-validator gui-validator--empty" id="fieldUid_errors" role="alert"></ul> </gui-range-date-time-picker></gui-range-date-time-picker-input>