2.9 #Components.date-picker DatePicker
A DatePicker
Browser support: IE11+, Safari6+, Firefox30+, Chrome30+
:focus-within will not work in all browsers.
The markup is mostly generated from react-day-picker, which
is the library we use to implement the JS part of the date picker. We update almost all classes that
are generated by react-day-picker so we can have full control of the styling and behavior. The
reference implementation of the base styles can be found here.
JavaScript is required for:
- Opening and closing the date picker.
- The whole calendar interaction: selecting dates, navigating to months, interacting with the actions.
- Updating the dates on the button with the selected dates.
Default styling
To
.sb-date-picker__overlay-wrapper--open
Open date picker
Markup
<div class="sb-date-picker">
<div class="sb-date-picker__control">
<div class="sb-date-picker__inputs">
<div class="sb-date-picker__input-wrapper sb-text--s">
<input class="sb-date-picker__input" placeholder="d mmm yyyy" value="13 Sep 2018">
</div>
<div class="sb-text--s sb-text--emphasis sb-margin-left-xs sb-margin-right-xs sb-date-picker__separator">To</div>
<div class="sb-date-picker__input-wrapper sb-text--s">
<input class="sb-date-picker__input" placeholder="d mmm yyyy" value="21 Sep 2018">
</div>
</div>
<button class="sb-date-picker__button">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4 11.273h1.455V9.818H4v1.455zm0 2.545h1.455v-1.454H4v1.454zm0-5.09h1.455V7.272H4v1.454zm-2.182 5.09h1.455v-1.454H1.818v1.454zm13.455-8.727H.727V2.909c0-.401.326-.727.728-.727h1.454v1.09a.363.363 0 1 0 .727 0v-1.09h8.728v1.09a.363.363 0 1 0 .727 0v-1.09h1.454c.402 0 .728.326.728.727v2.182zm0 9.454a.728.728 0 0 1-.728.728H1.455a.728.728 0 0 1-.728-.728V5.818h14.546v8.727zm-.728-13.09h-1.454V.364a.364.364 0 1 0-.727 0v1.09H3.636V.365a.364.364 0 1 0-.727 0v1.09H1.455C.65 1.455 0 2.107 0 2.91v11.636C0 15.35.651 16 1.455 16h13.09C15.35 16 16 15.349 16 14.545V2.91c0-.803-.651-1.454-1.455-1.454zM1.818 8.727h1.455V7.273H1.818v1.454zm0 2.546h1.455V9.818H1.818v1.455zm4.364 2.545h1.454v-1.454H6.182v1.454zm0-5.09h1.454V7.272H6.182v1.454zm0 2.545h1.454V9.818H6.182v1.455zm6.545 0h1.455V9.818h-1.455v1.455zm-2.182 0H12V9.818h-1.455v1.455zm2.182-2.546h1.455V7.273h-1.455v1.454zm-2.182 0H12V7.273h-1.455v1.454zm-2.181 5.091h1.454v-1.454H8.364v1.454zm0-5.09h1.454V7.272H8.364v1.454zm0 2.545h1.454V9.818H8.364v1.455z"></path>
</svg>
</button>
</div>
<div class="sb-date-picker__overlay-wrapper [modifier class]" data-kss-animation-cb="sb-date-picker__overlay-wrapper--open">
<div class="sb-date-picker__overlay">
<div class="sb-date-picker__calendar" lang="en">
<div class="sb-date-picker__wrapper" tabindex="0">
<div class="sb-date-picker__navbar-wrapper">
<div class="sb-date-picker__navbar">
<button class="sb-btn sb-date-picker__navbar-button sb-date-picker__prev-month-button sb-btn--subtle" title="August" type="button">
<svg class="sb-icon" viewBox="0 0 9 16">
<path d="M8.026 16a.42.42 0 0 0 .298-.719L1.043 8 8.324.719a.421.421 0 1 0-.595-.596l-7.58 7.58a.421.421 0 0 0 0 .595l7.58 7.579a.42.42 0 0 0 .297.123z"></path>
</svg>
</button>
<button class="sb-btn sb-date-picker__navbar-button sb-date-picker__next-month-button sb-btn--subtle" title="October" type="button">
<svg class="sb-icon" viewBox="0 0 9 16">
<path d="M8.026 16a.42.42 0 0 0 .298-.719L1.043 8 8.324.719a.421.421 0 1 0-.595-.596l-7.58 7.58a.421.421 0 0 0 0 .595l7.58 7.579a.42.42 0 0 0 .297.123z"></path>
</svg>
</button>
</div>
</div>
<div class="sb-date-picker__months">
<div class="sb-date-picker__month" role="grid">
<form class="sb-date-picker__caption" role="heading">
<div class="sb-date-picker__caption-select-wrapper sb-margin-right-xs">
September
<select class="sb-date-picker__caption-select" name="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8" selected>September</option>
<option value="9">October</option>
</select>
</div>
<div class="sb-date-picker__caption-select-wrapper">
2018
<select class="sb-date-picker__caption-select" name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018" selected>2018</option>
</select>
</div>
</form>
<div class="sb-date-picker__weekdays" role="rowgroup">
<div class="sb-date-picker__weekdays-row" role="row">
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Sunday">Su</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Monday">Mo</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Tuesday">Tu</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Wednesday">We</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Thursday">Th</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Friday">Fr</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Saturday">Sa</abbr></div>
</div>
</div>
<div class="sb-date-picker__body" role="rowgroup">
<div class="sb-date-picker__week" role="row">
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div class="sb-date-picker__day-wrapper " tabindex="0" role="gridcell" aria-label="Sat Sep 01 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">1</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sun Sep 02 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">2</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Mon Sep 03 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">3</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Tue Sep 04 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">4</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Wed Sep 05 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">5</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Thu Sep 06 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">6</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Fri Sep 07 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">7</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sat Sep 08 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">8</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sun Sep 09 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">9</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Mon Sep 10 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">10</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Tue Sep 11 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">11</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Wed Sep 12 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">12</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--edge sb-date-picker__day-wrapper--selected"
tabindex="-1" role="gridcell" aria-label="Thu Sep 13 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">13</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Fri Sep 14 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">14</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Sat Sep 15 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">15</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Sun Sep 16 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">16</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Mon Sep 17 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">17</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Tue Sep 18 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">18</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Wed Sep 19 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">19</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Thu Sep 20 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">20</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--edge sb-date-picker__day-wrapper--selected"
tabindex="-1" role="gridcell" aria-label="Fri Sep 21 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">21</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sat Sep 22 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">22</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sun Sep 23 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">23</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Mon Sep 24 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">24</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Tue Sep 25 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">25</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Wed Sep 26 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">26</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Thu Sep 27 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">27</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Fri Sep 28 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">28</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sat Sep 29 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">29</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sun Sep 30 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">30</div>
</div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--today sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--disabled sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--disabled sb-date-picker__day-wrapper--outside"></div>
</div>
</div>
</div>
</div>
<div class="sb-date-picker__footer">
<button type="button" tabindex="0" class="sb-date-picker__today-button sb-btn sb-btn--subtle" aria-label="Today">Today</button>
</div>
</div>
</div>
<div class="sb-date-picker__actions-wrapper">
<div class="sb-date-picker__actions">
<button class="sb-btn sb-date-picker__action sb-date-picker__action--left sb-btn--subtle" type="button">clear</button>
<button class="sb-btn sb-date-picker__action sb-date-picker__action--right sb-btn--subtle" type="button">apply</button>
</div>
</div>
</div>
</div>
</div>
Source: components/_date-picker.scss, line 1