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

Date Picker

<al-date-picker><ALDatePicker> REACTbeta

Reference generated from the custom elements manifest — 25 properties, 2 slots, 3 events.

PLAYGROUND9 CONTROLS

PREVIEW / al-date-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-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-picker--Disabled1

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

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

API — 25 PROPS25 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—

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—

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

EVENTS3

EVENTDESCRIPTIONTYPE

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

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

onDatePickerChangeFired when the selected date changes. Detail: `{ value }` — the formatted date string.CustomEvent

PUBLIC METHODS5

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. 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 'value' to the selected date if no time is selected 4. Sets 'isActive' to true 5. Dispatches a 'dateChanged' event with the updated value

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