About datetime picker#

Implementation#

The datetime is two form elements, each containing a label and text input, and a dropdown menu, containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown.

Placement of inline form elements inside a data table cell is not supported. Instead, use a button to invoke a popover, which does support form elements.

The datetime picker has the following markup requirements:

All

• Follow all accessibility requirements mentioned in the Datepicker and Timepicker blueprints.

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 timepicker, 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".

Base#

<div class="slds-form">
  <fieldset class="slds-form-element slds-form-element_compound">
    <legend class="slds-form-element__label slds-form-element__legend">Date and Time</legend>
    <div class="slds-form-element__control">

States#

Adding slds-datetimepicker_has-tooltip to the element with slds-form-element_compound aligns the legend properly when there is an info tooltip.

Date selection#

<div class="slds-form">
  <fieldset class="slds-form-element slds-form-element_compound">
    <legend class="slds-form-element__label slds-form-element__legend">Date and Time</legend>
    <div class="slds-form-element__control">

Time selection#

<div class="slds-form">
  <fieldset class="slds-form-element slds-form-element_compound">
    <legend class="slds-form-element__label slds-form-element__legend">Date and Time</legend>
    <div class="slds-form-element__control">