Date Textbox Component

Single Select Date Textbox

The single select date textbox consists of a textbox plus icon button . The icon button launches an interactive calendar inside of a flyout.

The aria-label of the calendar button should be intuitive enough for users of speech recognition software to identify.

NOTE: a fully functional interactive calendar requires JavaScript and is outside the scope of a CSS library. The calendar in this example is a simple readonly version.

<span class="date-textbox">
  <span class="textbox">
    <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
    <button
      class="icon-btn icon-btn--transparent"
      type="button"
      aria-label="Calendar"
    >
      <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
        <use href="#icon-calendar-24" />
      </svg>
    </button>
  </span>
  <div class="date-textbox__popover">
    <div class="calendar">
      <!-- see calendar module -->
    </div>
  </div>
</span>

Disabled Date Textbox

The disabled date textbox is a disabled textbox input with a calendar icon button that's also disabled. Use the disabled attribute on the input as well as button .

<span class="date-textbox">
  <span class="textbox textbox--disabled">
    <input
      class="textbox__control"
      placeholder="YYYY-MM-DD"
      type="text"
      disabled
    />
    <button
      class="icon-btn icon-btn--transparent"
      type="button"
      aria-label="Calendar"
      disabled
    >
      <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
        <use href="#icon-calendar-24" />
      </svg>
    </button>
  </span>
  <div class="date-textbox__popover">
    <div class="calendar">
      <!-- see calendar module -->
    </div>
  </div>
</span>

Date Range Textbox

Selecting a date range requires two textboxes; one for the start date and one for the end date.

<span class="date-textbox">
  <span class="textbox">
    <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
  </span>
  <span class="textbox">
    <input class="textbox__control" type="text" />
    <button
      class="icon-btn icon-btn--transparent"
      type="button"
      aria-label="Calendar"
    >
      <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
        <use href="#icon-calendar-24" />
      </svg>
    </button>
  </span>
  <div class="date-textbox__popover">
    <div class="calendar">
      <!-- see calendar module -->
    </div>
  </div>
</span>