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
    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 '16 at 20:29
0

You can try using jQuery Datetime picker. It has a similar UI to that of SLDS. Moreover, you can always customize the UI.

0

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

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

ui:inputDateTime has both date and time field.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.