{
  "_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-foundation.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"
                }
              }
            ]
          },
          {
            "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"
                          },
                          {
                            "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"
                                  },
                                  {
                                    "name": "dateTooltipButtonAssistiveText",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Assistive text label for the help button"
                                  }
                                ]
                              },
                              {
                                "name": "dateTooltipPopover",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Popover containing the date tooltip content",
                                "children": [
                                  {
                                    "name": "dateTooltipPopoverBody",
                                    "restrict": [
                                      "div"
                                    ],
                                    "description": "Body copy of the date tooltip"
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "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"
                              },
                              {
                                "name": "dateInputButton",
                                "restrict": [
                                  "button"
                                ],
                                "description": "Calendar trigger button rendered after the date input",
                                "children": [
                                  {
                                    "name": "dateInputButtonIcon",
                                    "description": "Calendar icon svg",
                                    "component": "PrimitiveIcon"
                                  },
                                  {
                                    "name": "dateInputButtonAssistiveText",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Assistive text label for the calendar button"
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "name": "dateHelp",
                            "restrict": [
                              "div"
                            ],
                            "description": "Date-field format hint or inline error message",
                            "renderWhen": "slotFilled",
                            "slot": {
                              "name": "dateHelp"
                            }
                          },
                          {
                            "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"
                                              },
                                              {
                                                "name": "datepickerFilterPreviousButtonAssistiveText",
                                                "restrict": [
                                                  "span"
                                                ],
                                                "description": "Assistive text label"
                                              }
                                            ]
                                          }
                                        ]
                                      },
                                      {
                                        "name": "datepickerFilterMonthHeading",
                                        "restrict": [
                                          "h2"
                                        ],
                                        "description": "Live heading announcing the visible month"
                                      },
                                      {
                                        "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"
                                              },
                                              {
                                                "name": "datepickerFilterNextButtonAssistiveText",
                                                "restrict": [
                                                  "span"
                                                ],
                                                "description": "Assistive text label"
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "name": "datepickerFilterYear",
                                    "restrict": [
                                      "div"
                                    ],
                                    "description": "Year picker wrapper",
                                    "children": [
                                      {
                                        "name": "datepickerFilterYearLabel",
                                        "restrict": [
                                          "label"
                                        ],
                                        "description": "Assistive label for the year select"
                                      },
                                      {
                                        "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
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "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"
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "name": "datepickerTodayButton",
                                "restrict": [
                                  "button"
                                ],
                                "description": "Shortcut button that jumps to the current date"
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "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"
                          },
                          {
                            "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"
                                  },
                                  {
                                    "name": "timeTooltipButtonAssistiveText",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Assistive text label for the help button"
                                  }
                                ]
                              },
                              {
                                "name": "timeTooltipPopover",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Popover containing the time tooltip content",
                                "children": [
                                  {
                                    "name": "timeTooltipPopoverBody",
                                    "restrict": [
                                      "div"
                                    ],
                                    "description": "Body copy of the time tooltip"
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "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"
                                          },
                                          {
                                            "name": "comboboxInputIcon",
                                            "restrict": [
                                              "span"
                                            ],
                                            "description": "Trailing clock icon container",
                                            "children": [
                                              {
                                                "name": "comboboxInputIconSvg",
                                                "description": "Clock icon svg",
                                                "component": "PrimitiveIcon"
                                              }
                                            ]
                                          }
                                        ]
                                      },
                                      {
                                        "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"
                                                              }
                                                            ]
                                                          }
                                                        ]
                                                      },
                                                      {
                                                        "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"
                                                          }
                                                        ]
                                                      }
                                                    ]
                                                  }
                                                ]
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "fieldsetHelp",
            "restrict": [
              "div"
            ],
            "description": "Fieldset-level help or error message displayed after the controls",
            "renderWhen": "slotFilled",
            "slot": {
              "name": "fieldsetHelp"
            }
          }
        ]
      }
    ]
  },
  "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"
        }
      }
    }
  }
}