2.9.2 #Components.date-picker.invalid Invalid

Toggle example guides Toggle HTML markup

An invalid date picker.

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

To
Markup
<div class="sb-form-control sb-form-control--invalid">
  <label class="sb-label" for="creation-date-id">Creation Date</label>
  <div class="sb-date-picker">
    <div class="sb-date-picker__control">
      <div class="sb-date-picker__inputs sb-date-picker__inputs--invalid">
        <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 sb-date-picker__button--invalid">
        <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>
  <p role="alert" class="sb-form-control__validation">Date out of range</p>
</div>
Source: components/_date-picker.scss, line 785