A datepicker is a non text input form element. You can select a single date or date range from a popup or inline calendar.
BaseBase › DefaultBase › Date selectedBase › Multiple Date Range SelectedBasedev ready
Preview
Code
<div class="slds-datepicker slds-dropdown slds-dropdown--left" aria-hidden="false">
<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-container" title="Previous Month">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>
</svg>
<span class="slds-assistive-text">Previous Month</span>
</button>
</div>
<h2 id="month" class="slds-align-middle" aria-live="assertive" aria-atomic="true">June</h2>
<div class="slds-align-middle">
<button class="slds-button slds-button--icon-container" title="Next Month">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right"></use>
</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 id="select-01" class="slds-select">
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
</div>
<table class="slds-datepicker__month" role="grid" aria-labelledby="month">
<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 id="week1">
<td class="slds-disabled-text" headers="Sunday week1" role="gridcell" aria-disabled="true" aria-selected="false">
<span class="slds-day">31</span>
</td>
<td headers="Monday week1" role="gridcell" aria-selected="false">
<span class="slds-day">1</span>
</td>
<td headers="Tuesday week1" role="gridcell" aria-selected="false">
<span class="slds-day">2</span>
</td>
<td headers="Wednesday week1" role="gridcell" aria-selected="false">
<span class="slds-day">3</span>
</td>
<td headers="Thursday week1" role="gridcell" aria-selected="false">
<span class="slds-day">4</span>
</td>
<td headers="Friday week1" role="gridcell" aria-selected="false">
<span class="slds-day">5</span>
</td>
<td headers="Saturday week1" role="gridcell" aria-selected="false">
<span class="slds-day">6</span>
</td>
</tr>
<tr id="week2">
<td headers="Sunday week2" role="gridcell" aria-selected="false">
<span class="slds-day">7</span>
</td>
<td headers="Monday week2" role="gridcell" aria-selected="false">
<span class="slds-day">8</span>
</td>
<td headers="Tuesday week2" role="gridcell" aria-selected="false">
<span class="slds-day">9</span>
</td>
<td headers="Wednesday week2" role="gridcell" aria-selected="false">
<span class="slds-day">10</span>
</td>
<td headers="Thursday week2" role="gridcell" aria-selected="false">
<span class="slds-day">11</span>
</td>
<td headers="Friday week2" role="gridcell" aria-selected="false">
<span class="slds-day">12</span>
</td>
<td headers="Saturday week2" role="gridcell" aria-selected="false">
<span class="slds-day">13</span>
</td>
</tr>
<tr id="week3">
<td headers="Sunday week3" role="gridcell" aria-selected="false">
<span class="slds-day">14</span>
</td>
<td headers="Monday week3" role="gridcell" aria-selected="false">
<span class="slds-day">15</span>
</td>
<td headers="Tuesday week3" role="gridcell" aria-selected="false">
<span class="slds-day">16</span>
</td>
<td headers="Wednesday week3" role="gridcell" aria-selected="false">
<span class="slds-day">17</span>
</td>
<td class="slds-is-today" headers="Thursday week3" role="gridcell" aria-selected="false">
<span class="slds-day">18</span>
</td>
<td headers="Friday week3" role="gridcell" aria-selected="false">
<span class="slds-day">19</span>
</td>
<td headers="Saturday week3" role="gridcell" aria-selected="false">
<span class="slds-day">20</span>
</td>
</tr>
<tr id="week4">
<td headers="Sunday week4" role="gridcell" aria-selected="false">
<span class="slds-day">21</span>
</td>
<td headers="Monday week4" role="gridcell" aria-selected="false">
<span class="slds-day">22</span>
</td>
<td headers="Tuesday week4" role="gridcell" aria-selected="false">
<span class="slds-day">23</span>
</td>
<td headers="Wednesday week4" role="gridcell" aria-selected="false">
<span class="slds-day">24</span>
</td>
<td headers="Thursday week4" role="gridcell" aria-selected="false">
<span class="slds-day">25</span>
</td>
<td headers="Friday week4" role="gridcell" aria-selected="false">
<span class="slds-day">26</span>
</td>
<td headers="Saturday week4" role="gridcell" aria-selected="false">
<span class="slds-day">27</span>
</td>
</tr>
<tr id="week5">
<td headers="Sunday week5" role="gridcell" aria-selected="false">
<span class="slds-day">28</span>
</td>
<td headers="Monday week5" role="gridcell" aria-selected="false">
<span class="slds-day">29</span>
</td>
<td headers="Tuesday week5" role="gridcell" aria-selected="false">
<span class="slds-day">30</span>
</td>
<td class="slds-disabled-text" headers="Wednesday week5" role="gridcell" aria-disabled="true" aria-selected="false">
<span class="slds-day">1</span>
</td>
<td class="slds-disabled-text" headers="Thursday week5" role="gridcell" aria-disabled="true" aria-selected="false">
<span class="slds-day">2</span>
</td>
<td class="slds-disabled-text" headers="Friday week5" role="gridcell" aria-disabled="true" aria-selected="false">
<span class="slds-day">3</span>
</td>
<td class="slds-disabled-text" headers="Saturday week5" role="gridcell" aria-disabled="true" aria-selected="false">
<span class="slds-day">4</span>
</td>
</tr>
<tr>
<td colspan="7" role="gridcell"><a href="javascript:void(0);" class="slds-show--inline-block slds-p-bottom--x-small">Today</a></td>
</tr>
</tbody>
</table>
</div>If you desire a multi-select date range, the selected cell will need to have .slds-is-selected-multi applied. Another scenario would be a multi range selection spanning over two or more weeks. If this scenario is true, each <tr> will need the class .slds-has-multi-row-selections added.
Component Overview
Usage
This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
| Class Name | Usage | |
|---|---|---|
.slds-datepicker | Applied to:
Initializes datepicker | Required: Required Comments:If datepicker is a dropdown, apply |
.slds-datepicker__filter | Applied to:
Aligns filter items horizontally | Required: Required Comments:Needs |
.slds-datepicker__filter--month | Applied to:
Spaces out month filter | Required: Required Comments:-- |
.slds-day | Applied to:
Style for calendar days | Required: Required Comments:
|
.slds-is-today | Applied to:
Indicates today | Required: No, optional element or modifier Comments:-- |
.slds-is-selected | Applied to:
Indicates selected days | Required: No, optional element or modifier Comments:-- |
.slds-is-selected-multi | Applied to:
Indicates if selected days are apart of a date range | Required: No, optional element or modifier Comments:-- |
.slds-has-multi-row-selection | Applied to:
Helper class that styles date range appropriately | Required: No, optional element or modifier Comments:-- |
.slds-disabled-text | Applied to:
Indicates days that are in previous/next months | Required: No, optional element or modifier Comments:-- |