2.9.1 #Components.date-picker.disabled Disabled

Toggle example guides Toggle HTML markup

A disabled date picker.

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

To
Markup
<div class="sb-date-picker">
  <div class="sb-date-picker__control sb-date-picker__control--disabled">
    <div class="sb-date-picker__inputs">
      <div class="sb-date-picker__input-wrapper sb-date-picker__input-wrapper--disabled sb-text--s">
        <input class="sb-date-picker__input" placeholder="d mmm yyyy" value="13 Sep 2018" disabled>
      </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-date-picker__input-wrapper--disabled sb-text--s">
        <input class="sb-date-picker__input" placeholder="d mmm yyyy" value="21 Sep 2018" disabled>
      </div>
    </div>
    <button class="sb-date-picker__button sb-date-picker__button--disabled">
      <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>
Source: components/_date-picker.scss, line 757