Datetime Picker

Datetime Picker

A datetime picker is used to select a day and a time.

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Datetime Picker

Implementation Notes and Requirements

The datetime picker has the following markup requirements:

Desktop

  • Add .slds-is-open to the element with .slds-dropdown-trigger to invoke the dropdown that contains the datepicker and the list of time options.
  • On the timepicker, the .slds-has-focus modifier class is required on the .slds-listbox__option element that has focus.
  • On the timpicker, the .slds-is-selected modifier class is required on the .slds-listbox__option element that has been selected.
  • On the datepicker, the .slds-is-selected modifier class is required on the td element that has the selected day.
  • On the datepicker, the .slds-is-today modifier class is required on the td element that is the current day.

Mobile

  • When on mobile, we want to leverage the native datetime picker by changing the input type from text to datetime-local
  • The input type="datetime-local" will create an input field allowing a date and time to be easily entered — this includes year, month, day, hours, and minutes.
  • When switching input type="text" to input type="datetime-local" for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.
    • On the element with the class slds-combobox, please remove role="combobox", aria-expanded, and `aria-haspopup.
    • On the input that we just added type="datetime-local" to, please remove aria-controls, aria-autocomplete, and role="textbox".

Overview of CSS Classes

Selector.slds-datetime-picker
Summary

Initializes a datetime picker

Restrictdiv
VariantTrue