{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "DatetimePicker", "description": "A datetime picker allows users to select both a date and time.", "structure": { "name": "root", "restrict": [ "div" ], "description": "Initializes a datetime picker.", "children": [ { "name": "fieldset", "restrict": [ "fieldset" ], "description": "Fieldset grouping the date and time inputs under a shared legend", "children": [ { "name": "legend", "restrict": [ "legend" ], "description": "Shared label for the date and time fields", "slot": { "name": "label", "required": true }, "children": [ { "name": "legendRequired", "restrict": [ "abbr" ], "description": "Required indicator inside the legend", "renderWhen": { "prop": "required", "eq": "true" }, "attributes": { "static": { "class": "slds-required", "title": "required", "aria-hidden": "true" } } } ], "attributes": { "static": { "class": "slds-form-element__label slds-form-element__legend" } } }, { "name": "control", "restrict": [ "div" ], "description": "Wrapper for the fieldset control content", "children": [ { "name": "group", "restrict": [ "div" ], "description": "Group container for the compound row", "children": [ { "name": "row", "restrict": [ "div" ], "description": "Horizontal row holding the date and time fields", "children": [ { "name": "dateField", "restrict": [ "div" ], "description": "Date input area (label, input, datepicker dropdown)", "slot": { "name": "date", "required": true }, "children": [ { "name": "dateLabel", "restrict": [ "label" ], "description": "Label for the date input", "attributes": { "static": { "class": "slds-form-element__label" } } }, { "name": "dateTooltip", "restrict": [ "div" ], "description": "Help-icon tooltip slot beside the date label", "renderWhen": "slotFilled", "slot": { "name": "dateTooltip" }, "children": [ { "name": "dateTooltipButton", "restrict": [ "button" ], "description": "Help button that triggers the date tooltip", "children": [ { "name": "dateTooltipButtonIcon", "description": "Help icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "children": [ { "name": "dateTooltipButtonUse" } ] }, { "name": "dateTooltipButtonAssistiveText", "restrict": [ "span" ], "description": "Assistive text label for the help button", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon" } } }, { "name": "dateTooltipPopover", "restrict": [ "div" ], "description": "Popover containing the date tooltip content", "children": [ { "name": "dateTooltipPopoverBody", "restrict": [ "div" ], "description": "Body copy of the date tooltip", "attributes": { "static": { "class": "slds-popover__body" } } } ], "attributes": { "static": { "class": "slds-popover slds-popover_tooltip slds-nubbin_bottom-left", "role": "tooltip" } } } ], "attributes": { "static": { "class": "slds-form-element__icon" } } }, { "name": "dateInputWrapper", "restrict": [ "div" ], "description": "Wrapper around the date input that hosts the trailing calendar icon", "children": [ { "name": "dateInput", "restrict": [ "input" ], "description": "Text input for typing the date", "attributes": { "static": { "class": "slds-input" } } }, { "name": "dateInputButton", "restrict": [ "button" ], "description": "Calendar trigger button rendered after the date input", "children": [ { "name": "dateInputButtonIcon", "description": "Calendar icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "children": [ { "name": "dateInputButtonUse" } ] }, { "name": "dateInputButtonAssistiveText", "restrict": [ "span" ], "description": "Assistive text label for the calendar button", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon slds-input__icon slds-input__icon_right" } } } ], "attributes": { "static": { "class": "slds-form-element__control slds-input-has-icon slds-input-has-icon_right" } } }, { "name": "dateHelp", "restrict": [ "div" ], "description": "Date-field format hint or inline error message", "renderWhen": "slotFilled", "slot": { "name": "dateHelp" }, "attributes": { "static": { "class": "slds-form-element__help" } }, "modifiers": [ { "name": "assistiveText", "attribute": "class", "value": "slds-assistive-text", "description": "Visually hides the format hint, keeping it available to assistive technology" } ] }, { "name": "datepicker", "restrict": [ "div" ], "description": "Datepicker dropdown dialog rendered when the date field is open", "renderWhen": { "prop": "open", "eq": "true" }, "children": [ { "name": "datepickerFilter", "restrict": [ "div" ], "description": "Filter row containing the month controls and year select", "children": [ { "name": "datepickerFilterMonth", "restrict": [ "div" ], "description": "Month navigation cluster with previous, heading, next", "children": [ { "name": "datepickerFilterPrevious", "restrict": [ "div" ], "description": "Previous-month button wrapper", "children": [ { "name": "datepickerFilterPreviousButton", "restrict": [ "button" ], "description": "Previous-month button", "children": [ { "name": "datepickerFilterPreviousButtonIcon", "description": "Previous-month icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "children": [ { "name": "datepickerFilterPreviousButtonUse" } ] }, { "name": "datepickerFilterPreviousButtonAssistiveText", "restrict": [ "span" ], "description": "Assistive text label", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-container" } } } ], "attributes": { "static": { "class": "slds-align-middle" } } }, { "name": "datepickerFilterMonthHeading", "restrict": [ "h2" ], "description": "Live heading announcing the visible month", "attributes": { "static": { "class": "slds-align-middle", "aria-atomic": "false", "aria-live": "polite" } } }, { "name": "datepickerFilterNext", "restrict": [ "div" ], "description": "Next-month button wrapper", "children": [ { "name": "datepickerFilterNextButton", "restrict": [ "button" ], "description": "Next-month button", "children": [ { "name": "datepickerFilterNextButtonIcon", "description": "Next-month icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "children": [ { "name": "datepickerFilterNextButtonUse" } ] }, { "name": "datepickerFilterNextButtonAssistiveText", "restrict": [ "span" ], "description": "Assistive text label", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-container" } } } ], "attributes": { "static": { "class": "slds-align-middle" } } } ], "attributes": { "static": { "class": "slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow" } } }, { "name": "datepickerFilterYear", "restrict": [ "div" ], "description": "Year picker wrapper", "children": [ { "name": "datepickerFilterYearLabel", "restrict": [ "label" ], "description": "Assistive label for the year select", "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "datepickerFilterYearSelectContainer", "restrict": [ "div" ], "description": "Native select wrapper", "children": [ { "name": "datepickerFilterYearSelect", "restrict": [ "select" ], "description": "Native select for picking the year", "children": [ { "name": "datepickerFilterYearOption", "restrict": [ "option" ], "description": "Year option", "repeats": true } ], "attributes": { "static": { "class": "slds-select" } } } ], "attributes": { "static": { "class": "slds-select_container" } } } ], "attributes": { "static": { "class": "slds-shrink-none" } } } ], "attributes": { "static": { "class": "slds-datepicker__filter slds-grid" } } }, { "name": "datepickerMonth", "restrict": [ "table" ], "description": "Calendar table for the visible month", "children": [ { "name": "datepickerMonthHead", "restrict": [ "thead" ], "description": "Weekday header row container", "children": [ { "name": "datepickerMonthHeadRow", "restrict": [ "tr" ], "description": "Weekday header row", "children": [ { "name": "datepickerMonthWeekday", "restrict": [ "th" ], "description": "Weekday column header", "repeats": true, "children": [ { "name": "datepickerMonthWeekdayAbbr", "restrict": [ "abbr" ], "description": "Abbreviated weekday label" } ] } ] } ] }, { "name": "datepickerMonthBody", "restrict": [ "tbody" ], "description": "Calendar body rows", "children": [ { "name": "datepickerMonthRow", "restrict": [ "tr" ], "description": "Calendar week row", "repeats": true, "children": [ { "name": "datepickerMonthDay", "restrict": [ "td" ], "description": "Day grid cell", "repeats": true, "children": [ { "name": "datepickerMonthDayLabel", "restrict": [ "span" ], "description": "Day-of-month label", "attributes": { "static": { "class": "slds-day" } } } ], "attributes": { "static": { "role": "gridcell" } }, "modifiers": [ { "name": "adjacentMonth", "attribute": "class", "value": "slds-day_adjacent-month", "description": "Indicates days that are in previous/next months." }, { "name": "today", "attribute": "class", "value": "slds-is-today", "description": "Indicates today." }, { "name": "selected", "attribute": "class", "value": "slds-is-selected", "description": "Indicates selected days." } ] } ], "modifiers": [ { "name": "hasMultiSelection", "attribute": "class", "value": "slds-has-multi-selection", "description": "Class on row to notify that more than one date will be selected within the week." } ] } ] } ], "attributes": { "static": { "class": "slds-datepicker__month", "role": "grid", "aria-multiselectable": "true" } } }, { "name": "datepickerTodayButton", "restrict": [ "button" ], "description": "Shortcut button that jumps to the current date", "attributes": { "static": { "class": "slds-button slds-align_absolute-center slds-text-link" } } } ], "attributes": { "static": { "class": "slds-datepicker slds-dropdown slds-dropdown_left", "role": "dialog" } } } ], "attributes": { "static": { "class": "slds-form-element slds-dropdown-trigger slds-dropdown-trigger_click" } }, "modifiers": [ { "name": "open", "attribute": "class", "value": "slds-is-open", "description": "Datepicker dropdown is open" }, { "name": "hasError", "attribute": "class", "value": "slds-has-error", "description": "Applies error treatment to the date field" } ] }, { "name": "timeField", "restrict": [ "div" ], "description": "Time input area (label, combobox input, time listbox)", "slot": { "name": "time", "required": true }, "children": [ { "name": "timeLabel", "restrict": [ "label" ], "description": "Label for the time combobox input", "attributes": { "static": { "class": "slds-form-element__label" } } }, { "name": "timeTooltip", "restrict": [ "div" ], "description": "Help-icon tooltip slot beside the time label", "renderWhen": "slotFilled", "slot": { "name": "timeTooltip" }, "children": [ { "name": "timeTooltipButton", "restrict": [ "button" ], "description": "Help button that triggers the time tooltip", "children": [ { "name": "timeTooltipButtonIcon", "description": "Help icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "children": [ { "name": "timeTooltipButtonUse" } ] }, { "name": "timeTooltipButtonAssistiveText", "restrict": [ "span" ], "description": "Assistive text label for the help button", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon" } } }, { "name": "timeTooltipPopover", "restrict": [ "div" ], "description": "Popover containing the time tooltip content", "children": [ { "name": "timeTooltipPopoverBody", "restrict": [ "div" ], "description": "Body copy of the time tooltip", "attributes": { "static": { "class": "slds-popover__body" } } } ], "attributes": { "static": { "class": "slds-popover slds-popover_tooltip slds-nubbin_bottom-left", "role": "tooltip" } } } ], "attributes": { "static": { "class": "slds-form-element__icon" } } }, { "name": "timeControl", "restrict": [ "div" ], "description": "Wrapper around the time combobox control", "children": [ { "name": "comboboxContainer", "restrict": [ "div" ], "description": "Outer combobox container", "children": [ { "name": "combobox", "restrict": [ "div" ], "description": "Combobox dropdown trigger element", "children": [ { "name": "comboboxFormElement", "restrict": [ "div" ], "description": "Combobox form-element wrapper holding the input and trailing icon", "children": [ { "name": "comboboxInput", "restrict": [ "input" ], "description": "Text input that drives the time combobox", "attributes": { "static": { "class": "slds-input slds-combobox__input", "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox" } }, "modifiers": [ { "name": "hasFocus", "attribute": "class", "value": "slds-has-focus", "description": "Combobox input has keyboard focus" } ] }, { "name": "comboboxInputIcon", "restrict": [ "span" ], "description": "Trailing clock icon container", "children": [ { "name": "comboboxInputIconSvg", "description": "Clock icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-icon slds-icon slds-icon_x-small slds-icon-text-default" } }, "modifiers": [ { "name": "error", "attribute": "class", "value": "slds-icon-text-error", "description": "Tints the clock icon to the error color" }, { "name": "disabled", "attribute": "class", "value": "slds-is-disabled", "description": "Renders the clock icon in its disabled treatment" } ], "children": [ { "name": "comboboxInputIconUse" } ] } ], "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-clock slds-input__icon slds-input__icon_right" } } } ], "attributes": { "static": { "class": "slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right", "role": "none" } } }, { "name": "comboboxListbox", "restrict": [ "div" ], "description": "Time listbox dropdown", "children": [ { "name": "comboboxListboxList", "restrict": [ "ul" ], "description": "Listbox list of time options", "children": [ { "name": "comboboxListboxItem", "restrict": [ "li" ], "description": "Listbox list item", "repeats": true, "children": [ { "name": "comboboxOption", "restrict": [ "div" ], "description": "Single selectable time option", "children": [ { "name": "comboboxOptionFigure", "restrict": [ "span" ], "description": "Leading figure that hosts the check icon when selected", "children": [ { "name": "comboboxOptionIcon", "restrict": [ "span" ], "description": "Check-icon container shown on the selected option", "renderWhen": { "prop": "selected", "eq": "true" }, "children": [ { "name": "comboboxOptionIconSvg", "description": "Check icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-icon slds-icon_x-small" } }, "children": [ { "name": "comboboxOptionIconUse" } ] } ], "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-check slds-current-color" } } } ], "attributes": { "static": { "class": "slds-media__figure slds-listbox__option-icon" } } }, { "name": "comboboxOptionBody", "restrict": [ "span" ], "description": "Body of the option, holds the displayed time", "children": [ { "name": "comboboxOptionText", "restrict": [ "span" ], "description": "Truncating wrapper around the time string", "attributes": { "static": { "class": "slds-truncate" } } } ], "attributes": { "static": { "class": "slds-media__body" } } } ], "attributes": { "static": { "class": "slds-media slds-listbox__option slds-listbox__option_plain slds-media_small", "role": "option" } }, "modifiers": [ { "name": "selected", "attribute": "class", "value": "slds-is-selected", "description": "Indicates selected days." }, { "name": "hasFocus", "attribute": "class", "value": "slds-has-focus", "description": "Option currently holds active descendant focus" } ] } ], "attributes": { "static": { "class": "slds-listbox__item", "role": "presentation" } } } ], "attributes": { "static": { "class": "slds-listbox slds-listbox_vertical", "role": "presentation" } } } ], "attributes": { "static": { "class": "slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid slds-dropdown_left", "role": "listbox", "aria-busy": "false" } } } ], "attributes": { "static": { "class": "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" } }, "modifiers": [ { "name": "open", "attribute": "class", "value": "slds-is-open", "description": "Time listbox dropdown is open" } ] } ], "attributes": { "static": { "class": "slds-combobox_container" } } } ], "attributes": { "static": { "class": "slds-form-element__control" } } } ], "attributes": { "static": { "class": "slds-form-element" } } } ], "attributes": { "static": { "class": "slds-form-element__row" } } } ], "attributes": { "static": { "class": "slds-form-element__group" } } } ], "attributes": { "static": { "class": "slds-form-element__control" } } }, { "name": "fieldsetHelp", "restrict": [ "div" ], "description": "Fieldset-level help or error message displayed after the controls", "renderWhen": "slotFilled", "slot": { "name": "fieldsetHelp" }, "attributes": { "static": { "class": "slds-form-element__help" } } } ], "attributes": { "static": { "class": "slds-form-element slds-form-element_compound" } }, "modifiers": [ { "name": "hasTooltip", "attribute": "class", "value": "slds-datetimepicker_has-tooltip", "description": "Reserves vertical space at the top of the fieldset for help-icon tooltips" }, { "name": "hasError", "attribute": "class", "value": "slds-has-error", "description": "Applies the error treatment to the fieldset" } ] } ], "attributes": { "static": { "class": "slds-form" } } }, "states": [ { "name": "disabled", "type": "boolean", "aria": "aria-disabled", "description": "Whether the datetime picker is disabled" }, { "name": "required", "type": "boolean", "aria": "aria-required", "description": "Whether the datetime picker is required" } ], "accessibility": { "requirements": [ { "id": "fieldset-grouping", "description": "Date and time fields should be grouped with a common label" } ] }, "componentRefs": { "PrimitiveIcon": { "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.", "props": { "iconName": { "type": "string", "required": true, "description": "Sprite reference for the icon glyph" } } } }, "extensions": { "com.salesforce-ux": { "dateAdded": "2017-03-01", "genReady": false, "lbc": "lightning-datetimepicker" } }, "cssSource": "./datetimePicker.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "disabled", "class": "slds-is-disabled" } ] }