COMPONENTS / ATOMS / al-date-time-picker← ALL COMPONENTS

Date & Time Picker

<al-date-time-picker><ALDateTimePicker> REACTbeta

Reference generated from the custom elements manifest — 33 properties, 2 slots, 4 events.

PLAYGROUND10 CONTROLS

PREVIEW / al-date-time-picker / SOUTHLEFT

Loading preview

dateFormat

FLAGS

CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

FIGMA PARITYNOT TRACKED

NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXEdate-time-picker--DefaultPASS

Advanced statesAXE11 further storiesPASS

Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED

Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 12 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST1 RULE FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

RULEWHEREELEMENTS

color-contrastElements must meet minimum color contrast ratio thresholdsdate-time-picker--Disabled1

INSTALL@southleft/al-web-components/components/date-time-picker

import '@southleft/al-web-components/components/date-time-picker';
import { ALDateTimePicker } from '@southleft/al-react';

API — 33 PROPS33 DOCUMENTED

PROPTYPEDEFAULT

fieldIdstringThe unique id of the field—

labelstringThe field's label'Date and Time'

hideLabelbooleanHide label?—

namestringThe field's name attribute—

valuestringThe field's value attribute—

placeholderstringPlaceholder attribute - Specifies a short hint that describes the expected value of an input element—

fieldNotestringThe field note displayed beneath the field—

errorNotestringError note displayed beneath the field when in an error state—

ariaDescribedBystringAria describedby - Used to connect the field note in the field to the input for accessibility—

isRequiredbooleanThe field's required attribute—

isOptionalbooleanOptional state - Specifies that a field is optional and adds the text 'optional' to the label—

isDisabledbooleanThe field's disabled attribute—

isErrorbooleanError state indicating an issue with the field—

isActivebooleanIndicates whether a date has been selected—

selectedDateanyHolds the selected date value—

setActiveDateanySet a specific date to be active—

setActiveTimeanySet a specific time to be active (24 hour format, e.g., setActiveTime="16:00" for 4PM)—

isoFormatstringISO Format for date'yyyy-MM-dd'

disabledMinDateanyMinimum date for disabled dates (format: yyyy/mm/dd)—

disabledMaxDateanyMaximum date for disabled dates (format: yyyy/mm/dd)—

multiYearnumberAmount of years to go before and after the current date3

previousButtonTextstringPrevious month button text'Previous Month'

nextButtonTextstringNext month button text'Next Month'

isDayShortHandbooleanShow the day of the week as a short hand, e.g. "M" for Monday—

startOnMondaybooleanStart the day of the week on Monday—

is24HourFormatbooleanUse 24 hour time format—

timeIncrementsnumberIncrements of time30

timeStartnumberMinimum time for between times display (24 hour format, e.g., timeStart=${16} for 4PM)—

timeEndnumberMaximum time for between times display (24 hour format, e.g., timeEnd=${16} for 4PM)—

timeSelectorLabelstringTime selector heading label'Time'

cancelLabelstringCancel button label'Cancel'

submitLabelstringSubmit button label'Apply'

SLOTS2

SLOTDESCRIPTION

field-noteIf content is slotted, it will display in place of the fieldNote property

errorIf content is slotted, it will display in place of the errorNote property

EVENTS4

EVENTDESCRIPTIONTYPE

onDateTimePickerOpenFired when the calendar overlay opens. Detail: `{ activeCalendar }` — the new open state.CustomEvent

onDateTimePickerCloseFired when the calendar overlay closes. Detail: `{ activeCalendar }` — the new open state.CustomEvent

onDateTimePickerDateChangeFired when the date portion changes. Detail: `{ value }` — the formatted date-time string. Fires independently of the time portion.CustomEvent

onDateTimePickerTimeChangeFired when the time portion changes. Detail: `{ value }` — the formatted date-time string. Fires independently of the date portion.CustomEvent

PUBLIC METHODS9

METHODDESCRIPTION

toggleActiveCalendar()Toggle active calendar 1. Checks if the component is disabled; if not, toggles the calendar's display 2. Toggles the calendar display 3. Sets dynamic position for the calendar 4. Clears the cancelled state 5. Dispatches custom events 'open' or 'close' based on the calendar state

handleOnKeydown()Handle on input keydown 1. Toggles the calendar open/close if 'Enter' or 'Spacebar' is pressed

handleOnClickOutside()Handles the click event outside the component: 1. Check if the calendar is active 2. Determine if the click occurred inside the active field 3. Check if the click occurred outside the active field 4. Close the calendar if the click occurred outside it

setDynamicPosition()Handle dynamic placement for calendar popup 1. Sets timeout for dynamic positioning of the calendar 2. Adjusts the calendar position based on window and body dimensions 3. Opens the calendar at the top if it's too close to the bottom

handleOnChangeDate()Handle on change of the date 1. Updates 'selectedDate' and 'rawDateValue' based on the event detail 2. Updates 'value' based on the selected date and time (if available) 3. Sets 'disabledSubmit' to false if a time is selected 4. Sets 'value' to the selected date if no time is selected 5. Sets 'isActive' to true 6. Focuses on the first time selector button 7. Dispatches a 'dateChanged' event with the updated value

handleOnChangeTime()Handle on change of the time 1. Updates 'selectedTime' based on the event detail 2. Updates 'value' based on the selected date and time (if available) 3. Focuses on the submit button after a slight delay 4. Sets 'value' to the selected time if no date is selected 5. Sets 'isActive' to true 6. Dispatches a 'timeChanged' event with the updated value

handleOnClickCancel()Close date time picker when cancel button is clicked 1. Toggles the active calendar state 2. Focuses back on the input field 3. Resets values if original values exist 4. Converts a 12-hour time string to a 24-hour format 5. Clears the cancelled state

handleOnClickSubmit()Apply the values and close date time picker 1. If not disabled, toggles the active calendar state 2. Focuses back on the input field 3. Clears the cancelled state 4. Saves the current values as original if a value exists and the picker wasn't cancelled 5. If the picker is cancelled and a value is present, reverts to the original value

handleOnResize()Handle on resize of the screen 1. Sets 'isSmallScreen' based on window width (< 480) 2. If the window width is not small (greater than or equal to 480 pixels), reset 'isSmallScreen' to false.

SOURCE — components/date-time-picker/date-time-picker.ts · Atoms/Form/Date & Time Picker