Date Picker
Available since 1.1.0
The date-picker component is an opinionated composition of the input-group, popover and calendar components to accomplish the UI pattern for picking a date.
This component mostly relies on the CSS of other components and has very little CSS of its own.
Default and Compact sizes
<div class="fd-date-picker">
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-input-group fd-input-group--after">
<input type="text" value="" placeholder="Pick a date">
<span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button">
<button class="fd-popover__control fd-button--light sap-icon--calendar" aria-controls="Itcgq828" aria-expanded="false" aria-haspopup="true" aria-hidden="true"></button>
</span>
</div>
</div>
<div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow" aria-hidden="true" id="Itcgq828">
<div class="fd-calendar">
<header class="fd-calendar__header">
<div class="fd-calendar__navigation">
<div class="fd-calendar__action">
<button class=" fd-button--light fd-button--standard sap-icon--slim-arrow-left" aria-label="Previous" aria-disabled="true"></button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="mGTGe998">September</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="D8NDL125">2018</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--standard sap-icon--slim-arrow-right" aria-label="Next"></button>
</div>
</div>
</header>
<div class="fd-calendar__content">
<div class="fd-calendar__dates" id="YeayX297" aria-hidden="false">
<table class="fd-calendar__table" role="grid">
<thead class="fd-calendar__group">
<tr class="fd-calendar__row">
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">S</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">M</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">T</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">W</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">T</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">F</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">S</span>
</th>
</tr>
</thead>
<tbody class="fd-calendar__group">
<tr class="fd-calendar__row">
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text">29</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text">31</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">1</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">2</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">3</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">4</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">5</span>
</td>
<td class="fd-calendar__item fd-calendar__item--current" role="gridcell">
<span class="fd-calendar__text">6</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">7</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">8</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">9</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">10</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">11</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">12</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">13</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">14</span>
</td>
<td class="fd-calendar__item is-selected" role="gridcell">
<span class="fd-calendar__text">15</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">16</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">17</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">18</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">19</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">20</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">21</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">22</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">23</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">24</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">25</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">26</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">27</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">28</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">29</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">1</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="fd-date-picker">
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-input-group fd-input-group--after fd-input-group--compact">
<input type="text" value="" placeholder="Pick a date" class="fd-input fd-input--compact">
<span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button">
<button class="fd-popover__control fd-button--light sap-icon--calendar" aria-controls="Itcgq82" aria-expanded="false" aria-haspopup="true" aria-hidden="true"></button>
</span>
</div>
</div>
<div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow" aria-hidden="true" id="Itcgq82">
<div class="fd-calendar">
<header class="fd-calendar__header">
<div class="fd-calendar__navigation">
<div class="fd-calendar__action">
<button class=" fd-button--light fd-button--standard sap-icon--slim-arrow-left" aria-label="Previous" aria-disabled="true"></button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="mGTGe998">September</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="D8NDL125">2018</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--standard sap-icon--slim-arrow-right" aria-label="Next"></button>
</div>
</div>
</header>
<div class="fd-calendar__content">
<div class="fd-calendar__dates" id="YeayX297" aria-hidden="false">
<table class="fd-calendar__table" role="grid">
<thead class="fd-calendar__group">
<tr class="fd-calendar__row">
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">S</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">M</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">T</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">W</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">T</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">F</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">S</span>
</th>
</tr>
</thead>
<tbody class="fd-calendar__group">
<tr class="fd-calendar__row">
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text">29</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text">31</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">1</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">2</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">3</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">4</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">5</span>
</td>
<td class="fd-calendar__item fd-calendar__item--current" role="gridcell">
<span class="fd-calendar__text">6</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">7</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">8</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">9</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">10</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">11</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">12</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">13</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">14</span>
</td>
<td class="fd-calendar__item is-selected" role="gridcell">
<span class="fd-calendar__text">15</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">16</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">17</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">18</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">19</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">20</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">21</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">22</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">23</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">24</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">25</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">26</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">27</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">28</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">29</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">1</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>