2

I want to display a Datetime picker using Lightning Design System. So far, I am just able to display Date picker using SLDS and Appiphony Lightning JS. More details : Date picker using Appiphony Lightning JS

But anyone could please help me with the time component using SLDS, so that I would be able to construct Datetime picker in SLDS.

1
  • 1
    I just used the example date picker CSS on the lightning website with type="date" and built in datepicker appeared. You will have to store vale selected and parse to date though
    – Eric
    Oct 24, 2016 at 20:29

3 Answers 3

1

Ok I think that you can go with two approaches nowadays.

First one (easier, recommended)

Using lightning:input as it is currently developed by salesforce component for lightning.

Easy peasy lemon squeezy:

<lightning:input type="datetime" name="input1" label="Enter a date/time value" />

Second approach which lets you manually customize everything but with slds classes is descirbed in the SLDS documentation.

Date Picker SLDS

And full copy paste in case if reference will be down

<div style="height: 25rem;">
  <div class="slds-form slds-form--compound">
    <fieldset class="slds-form-element">
      <legend class="slds-form-element__label">Date and Time</legend>
      <div class="slds-form-element__group">
        <div class="slds-form-element__row">
          <div class="slds-form-element slds-dropdown-trigger slds-dropdown-trigger_click">
            <label class="slds-form-element__label" for="date-input-id">Date</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
              <input type="text" id="date-input-id" placeholder=" " class="slds-input" value="06/24/2014" />
              <button class="slds-button slds-button_icon slds-input__icon slds-input__icon--right" title="Select a date">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#event" />
                </svg>
                <span class="slds-assistive-text">Select a date</span>
              </button>
            </div>
            <div aria-hidden="false" aria-label="Date picker: June" class="slds-datepicker slds-dropdown slds-dropdown_left" role="dialog">
              <div class="slds-datepicker__filter slds-grid">
                <div class="slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow">
                  <div class="slds-align-middle">
                    <button class="slds-button slds-button_icon slds-button_icon-container" title="Previous Month">
                      <svg class="slds-button__icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left" />
                      </svg>
                      <span class="slds-assistive-text">Previous Month</span>
                    </button>
                  </div>
                  <h2 aria-atomic="true" aria-live="assertive" class="slds-align-middle" id="month">June</h2>
                  <div class="slds-align-middle">
                    <button class="slds-button slds-button_icon slds-button_icon-container" title="Next Month">
                      <svg class="slds-button__icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right" />
                      </svg>
                      <span class="slds-assistive-text">Next Month</span>
                    </button>
                  </div>
                </div>
                <div class="slds-shrink-none">
                  <label class="slds-assistive-text" for="select-01">Pick a Year</label>
                  <div class="slds-select_container">
                    <select class="slds-select" id="select-01">
                      <option>2014</option>
                      <option>2015</option>
                      <option>2016</option>
                    </select>
                  </div>
                </div>
              </div>
              <table aria-labelledby="month" aria-multiselectable="true" class="slds-datepicker__month" role="grid">
                <thead>
                  <tr id="weekdays">
                    <th id="Sunday" scope="col">
                      <abbr title="Sunday">Sun</abbr>
                    </th>
                    <th id="Monday" scope="col">
                      <abbr title="Monday">Mon</abbr>
                    </th>
                    <th id="Tuesday" scope="col">
                      <abbr title="Tuesday">Tue</abbr>
                    </th>
                    <th id="Wednesday" scope="col">
                      <abbr title="Wednesday">Wed</abbr>
                    </th>
                    <th id="Thursday" scope="col">
                      <abbr title="Thursday">Thu</abbr>
                    </th>
                    <th id="Friday" scope="col">
                      <abbr title="Friday">Fri</abbr>
                    </th>
                    <th id="Saturday" scope="col">
                      <abbr title="Saturday">Sat</abbr>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
                      <span class="slds-day">31</span>
                    </td>
                    <td aria-selected="false" role="gridcell" tabindex="0">
                      <span class="slds-day">1</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">2</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">3</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">4</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">5</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">6</span>
                    </td>
                  </tr>
                  <tr>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">7</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">8</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">9</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">10</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">11</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">12</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">13</span>
                    </td>
                  </tr>
                  <tr>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">14</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">15</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">16</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">17</span>
                    </td>
                    <td aria-selected="false" aria-current="date" class="slds-is-today" role="gridcell">
                      <span class="slds-day">18</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">19</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">20</span>
                    </td>
                  </tr>
                  <tr class="slds-has-multi-selection">
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">21</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">22</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">23</span>
                    </td>
                    <td aria-selected="true" class="slds-is-selected" role="gridcell">
                      <span class="slds-day">24</span>
                    </td>
                    <td aria-selected="false" class="" role="gridcell">
                      <span class="slds-day">25</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">26</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">27</span>
                    </td>
                  </tr>
                  <tr class="">
                    <td aria-selected="false" class="" role="gridcell">
                      <span class="slds-day">28</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">29</span>
                    </td>
                    <td aria-selected="false" role="gridcell">
                      <span class="slds-day">30</span>
                    </td>
                    <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
                      <span class="slds-day">1</span>
                    </td>
                    <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
                      <span class="slds-day">2</span>
                    </td>
                    <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
                      <span class="slds-day">3</span>
                    </td>
                    <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
                      <span class="slds-day">4</span>
                    </td>
                  </tr>
                </tbody>
              </table>
              <button class="slds-button slds-align_absolute-center slds-text-link">Today</button>
            </div>
          </div>
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="combobox-unique-id-4">Time</label>
            <div class="slds-form-element__control">
              <div class="slds-combobox_container">
                <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open slds-combobox-picklist slds-timepicker" aria-expanded="true" aria-haspopup="listbox" role="combobox">
                  <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                    <input type="text" class="slds-input slds-combobox__input slds-combobox__input-value" id="combobox-unique-id-4" aria-autocomplete="list" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" placeholder=" " value="8:00am"
                    />
                    <span class="slds-icon_container slds-icon-utility-clock slds-input__icon slds-input__icon_right" title="Select a time">
                      <svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#clock" />
                      </svg>
                      <span class="slds-assistive-text">Select a time</span>
                    </span>
                  </div>
                  <div id="listbox-unique-id" role="listbox">
                    <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown--fluid slds-dropdown--length-5" role="presentation">
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-01" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="6:00am"> 6:00am</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-02" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="7:00am"> 7:00am</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-03" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="8:00am">
                              <span class="slds-assistive-text">Current Selection:</span> 8:00am</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-04" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="9:00am"> 9:00am</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-05" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="10:00am"> 10:00am</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-06" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="11:00am"> 11:00am</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-07" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="12:00pm"> 12:00pm</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-08" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="1:00pm"> 1:00pm</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-09" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="2:00pm"> 2:00pm</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-10" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="3:00pm"> 3:00pm</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-11" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="4:00pm"> 4:00pm</span>
                          </span>
                        </div>
                      </li>
                      <li role="presentation" class="slds-listbox__item">
                        <div id="listbox-option-unique-id-12" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
                          <span class="slds-media__figure">
                            <svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
                              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </svg>
                          </span>
                          <span class="slds-media__body">
                            <span class="slds-truncate" title="5:00pm"> 5:00pm</span>
                          </span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</div>
-1

It would be best to handle these with two separate inputs, similar to how Lightning Experience displays a datetime field on the UI. A date picker component is displayed in one field, and a time input appears adjacent to it, allowing for the user to focus on the field to type a date or select from a list (by clicking the clock icon).

http://recordit.co/mAUraZjhcf

1
  • 1
    SFSE doesn't support gif uploads.
    – Adrian Larson
    Jan 19, 2017 at 0:07
-1

You can try using https://developer.salesforce.com/docs/component-library/bundle/ui:inputDateTime/example

ui:inputDateTime has both date and time field.

1
  • the ui:* components are deprecated in aura and not available in lwc
    – H Alves
    Jan 26, 2022 at 18:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .