<div class="sb-date-picker sb-date-picker__suggestion-was-open">
  <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>