Date Picker

Snippet

<div className="date-picker">
  <div className="date-picker-dropdown-menu dropdown-menu">
    <div className="date-picker-calendar">
      <div className="date-picker-calendar-header">
        <div className="date-picker-nav">
          <div className="date-picker-nav-item input-date-picker-month">
            <select className="form-control" disabled="" 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">September</option>
              <option value="9">October</option>
              <option value="10">November</option>
              <option value="11">December</option>
            </select>
          </div>
          <div className="date-picker-nav-item input-date-picker-year">
            <select className="form-control" name="year">
              <option value="1997">1997</option>
              <option value="1998">1998</option>
              <option value="1999">1999</option>
              <option value="2000">2000</option>
              <option value="2001">2001</option>
              <option value="2002">2002</option>
              <option value="2003">2003</option>
              <option value="2004">2004</option>
              <option value="2005">2005</option>
              <option value="2006">2006</option>
              <option value="2007">2007</option>
              <option value="2008">2008</option>
              <option value="2009">2009</option>
              <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">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
              <option value="2021">2021</option>
              <option value="2022">2022</option>
              <option value="2023">2023</option>
            </select>
          </div>
          <div
            className="date-picker-nav-item date-picker-nav-item-expand date-picker-nav-controls"
          >
            <button
              aria-label="Select the previous month"
              className="btn nav-btn nav-btn-monospaced"
              disabled=""
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-angle-left"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#angle-left" />
                </svg>
              </span>
            </button>
            <button
              aria-label="Select current date"
              className="btn nav-btn nav-btn-monospaced"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-simple-circle"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#simple-circle" />
                </svg>
              </span>
            </button>
            <button
              aria-label="Select the next month"
              className="btn nav-btn nav-btn-monospaced"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-angle-right"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#angle-right" />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div className="date-picker-calendar-body">
        <div className="date-picker-days-row date-picker-row">
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>S</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>M</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>T</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>W</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>T</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>F</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>S</abbr>
            </div>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="date-picker-col">
            <button
              aria-label="2019 01 27"
              className="date-picker-date date-picker-calendar-item previous-month-date"
              disabled=""
              type="button"
            >
              <span className="c-inner" tabIndex="-1">27</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 01 28"
              className="date-picker-date date-picker-calendar-item previous-month-date"
              disabled=""
              type="button"
            >
              <span className="c-inner" tabIndex="-1">28</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 01 29"
              className="date-picker-date date-picker-calendar-item previous-month-date"
              disabled=""
              type="button"
            >
              <span className="c-inner" tabIndex="-1">29</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 01 30"
              className="active date-picker-date date-picker-calendar-item previous-month-date"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">30</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 01 31"
              className="date-picker-date date-picker-calendar-item previous-month-date"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">31</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 01"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">1</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 02"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">2</span>
            </button>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="date-picker-col">
            <button
              aria-label="2019 02 03"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">3</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 04"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">4</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 05"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">5</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 06"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">6</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 07"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">7</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 08"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">8</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 09"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">9</span>
            </button>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="date-picker-col">
            <button
              aria-label="2019 02 10"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">10</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 11"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">11</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 12"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">12</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 13"
              className="date-picker-date date-picker-calendar-item"
              tabindex="-1"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">13</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 14"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">14</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 15"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">15</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 16"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">16</span>
            </button>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="date-picker-col">
            <button
              aria-label="2019 02 17"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">17</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 18"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">18</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 19"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">19</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 20"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">20</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 21"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">21</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 22"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">22</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 23"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">23</span>
            </button>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="date-picker-col">
            <button
              aria-label="2019 02 24"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">24</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 25"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">25</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 26"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">26</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 27"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">27</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 28"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">28</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 03 01"
              className="date-picker-date date-picker-calendar-item next-month-date"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">1</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 03 02"
              className="date-picker-date date-picker-calendar-item next-month-date"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">2</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Date Picker Field

Add the class focus to the input-group-item to show the focus border.

Snippet

<div className="input-group">
  <div className="input-group-item">
    <input name="datePicker" type="hidden" defaultValue="" />
    <input
      className="form-control input-group-inset input-group-inset-after"
      placeholder="YYYY-MM-DD"
      type="text"
      defaultValue=""
    />
    <div className="input-group-inset-item input-group-inset-item-after">
      <button
        className="btn btn-unstyled date-picker-dropdown-toggle"
        type="button"
      >
        <span className="c-inner" tabIndex="-1">
          <svg
            className="lexicon-icon lexicon-icon-calendar"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#calendar" />
          </svg>
        </span>
      </button>
    </div>
  </div>
</div>

Date Picker Date Range

The class c-selected must be added to date-picker-col for all dates in the range.

The modifier class c-selected-start must be added to date-picker-col for the first date in the range.

The class c-selected-end must be added to date-picker-col for the last date in the range.

Snippet

<div className="date-picker">
  <div className="date-picker-dropdown-menu dropdown-menu">
    <div className="date-picker-calendar">
      <div className="date-picker-calendar-header">
        <div className="date-picker-nav">
          <div className="date-picker-nav-item input-date-picker-month">
            <select className="form-control" disabled 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">September</option>
              <option value="9">October</option>
              <option value="10">November</option>
              <option value="11">December</option>
            </select>
          </div>
          <div className="date-picker-nav-item input-date-picker-year">
            <select className="form-control" name="year">
              <option value="1997">1997</option>
              <option value="1998">1998</option>
              <option value="1999">1999</option>
              <option value="2000">2000</option>
              <option value="2001">2001</option>
              <option value="2002">2002</option>
              <option value="2003">2003</option>
              <option value="2004">2004</option>
              <option value="2005">2005</option>
              <option value="2006">2006</option>
              <option value="2007">2007</option>
              <option value="2008">2008</option>
              <option value="2009">2009</option>
              <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">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
              <option value="2021">2021</option>
              <option value="2022">2022</option>
              <option value="2023">2023</option>
            </select>
          </div>
          <div
            className="date-picker-nav-item date-picker-nav-item-expand date-picker-nav-controls"
          >
            <button
              aria-label="Select the previous month"
              className="btn nav-btn nav-btn-monospaced"
              disabled
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-angle-left"
                  focusable="false"
                  role="presentation"
                >
                  <use xlinkHref="/icons.svg#angle-left"></use>
                </svg>
              </span>
            </button>
            <button
              aria-label="Select current date"
              className="btn nav-btn nav-btn-monospaced"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-simple-circle"
                  focusable="false"
                  role="presentation"
                >
                  <use xlinkHref="/icons.svg#simple-circle"></use>
                </svg>
              </span>
            </button>
            <button
              aria-label="Select the next month"
              className="btn nav-btn nav-btn-monospaced"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-angle-right"
                  focusable="false"
                  role="presentation"
                >
                  <use xlinkHref="/icons.svg#angle-right"></use>
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div className="date-picker-calendar-body">
        <div className="date-picker-days-row date-picker-row">
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>Mon</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>Tues</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>Wed</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>Thu</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>Fri</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>Sat</abbr>
            </div>
          </div>
          <div className="date-picker-col">
            <div className="date-picker-day date-picker-calendar-item">
              <abbr>Sun</abbr>
            </div>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="date-picker-col">
            <button
              aria-label="2019 01 27"
              className="date-picker-date date-picker-calendar-item previous-month-date"
              disabled
              type="button"
            >
              <span className="c-inner" tabIndex="-1">27</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 01 28"
              className="date-picker-date date-picker-calendar-item previous-month-date"
              disabled
              type="button"
            >
              <span className="c-inner" tabIndex="-1">28</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 01 29"
              className="date-picker-date date-picker-calendar-item previous-month-date"
              disabled
              type="button"
            >
              <span className="c-inner" tabIndex="-1">29</span>
            </button>
          </div>
          <div className="c-selected c-selected-start date-picker-col">
            <button
              aria-label="2019 01 30"
              className="active date-picker-date date-picker-calendar-item previous-month-date"
              tabindex="-1"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">30</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 01 31"
              className="date-picker-date date-picker-calendar-item previous-month-date"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">31</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 01"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">1</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 02"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">2</span>
            </button>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 03"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">3</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 04"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">4</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 05"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">5</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 06"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">6</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 07"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">7</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 08"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">8</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 09"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">9</span>
            </button>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 10"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">10</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 11"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">11</span>
            </button>
          </div>
          <div className="c-selected date-picker-col">
            <button
              aria-label="2019 02 12"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">12</span>
            </button>
          </div>
          <div className="c-selected c-selected-end date-picker-col">
            <button
              aria-label="2019 02 13"
              className="date-picker-date date-picker-calendar-item active"
              tabindex="-1"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">13</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 14"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">14</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 15"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">15</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 16"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">16</span>
            </button>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="date-picker-col">
            <button
              aria-label="2019 02 17"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">17</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 18"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">18</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 19"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">19</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 20"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">20</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 21"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">21</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 22"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">22</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 23"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">23</span>
            </button>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <div className="date-picker-col">
            <button
              aria-label="2019 02 24"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">24</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 25"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">25</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 26"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">26</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 27"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">27</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 02 28"
              className="date-picker-date date-picker-calendar-item"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">28</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 03 01"
              className="date-picker-date date-picker-calendar-item next-month-date"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">1</span>
            </button>
          </div>
          <div className="date-picker-col">
            <button
              aria-label="2019 03 02"
              className="date-picker-date date-picker-calendar-item next-month-date"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">2</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Date Picker Old Markup

In Clay CSS versions 3.24.1 and below, Date Picker days and dates weren’t wrapped in an extra element date-picker-col. We added the wrapping element for highlighting a range of dates. See #3986. This old pattern is still supported, but we recommend updating your markup.

Snippet

<div className="date-picker">
  <div className="date-picker-dropdown-menu dropdown-menu">
    <div className="date-picker-calendar">
      <div className="date-picker-calendar-header">
        <div className="date-picker-nav">
          <div className="date-picker-nav-item input-date-picker-month">
            <select className="form-control" disabled 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">September</option>
              <option value="9">October</option>
              <option value="10">November</option>
              <option value="11">December</option>
            </select>
          </div>
          <div className="date-picker-nav-item input-date-picker-year">
            <select className="form-control" name="year">
              <option value="1997">1997</option>
              <option value="1998">1998</option>
              <option value="1999">1999</option>
              <option value="2000">2000</option>
              <option value="2001">2001</option>
              <option value="2002">2002</option>
              <option value="2003">2003</option>
              <option value="2004">2004</option>
              <option value="2005">2005</option>
              <option value="2006">2006</option>
              <option value="2007">2007</option>
              <option value="2008">2008</option>
              <option value="2009">2009</option>
              <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">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
              <option value="2021">2021</option>
              <option value="2022">2022</option>
              <option value="2023">2023</option>
            </select>
          </div>
          <div
            className="date-picker-nav-item date-picker-nav-item-expand date-picker-nav-controls"
          >
            <button
              aria-label="Select the previous month"
              className="btn nav-btn nav-btn-monospaced"
              disabled
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-angle-left"
                  focusable="false"
                  role="presentation"
                >
                  <use xlinkHref="/icons.svg#angle-left"></use>
                </svg>
              </span>
            </button>
            <button
              aria-label="Select current date"
              className="btn nav-btn nav-btn-monospaced"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-simple-circle"
                  focusable="false"
                  role="presentation"
                >
                  <use xlinkHref="/icons.svg#simple-circle"></use>
                </svg>
              </span>
            </button>
            <button
              aria-label="Select the next month"
              className="btn nav-btn nav-btn-monospaced"
              type="button"
            >
              <span className="c-inner" tabIndex="-1">
                <svg
                  className="lexicon-icon lexicon-icon-angle-right"
                  focusable="false"
                  role="presentation"
                >
                  <use xlinkHref="/icons.svg#angle-right"></use>
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div className="date-picker-calendar-body">
        <div className="date-picker-days-row date-picker-row">
          <div className="date-picker-day date-picker-calendar-item">
            <abbr>Mon</abbr>
          </div>
          <div className="date-picker-day date-picker-calendar-item">
            <abbr>Tues</abbr>
          </div>
          <div className="date-picker-day date-picker-calendar-item">
            <abbr>Wed</abbr>
          </div>
          <div className="date-picker-day date-picker-calendar-item">
            <abbr>Thu</abbr>
          </div>
          <div className="date-picker-day date-picker-calendar-item">
            <abbr>Fri</abbr>
          </div>
          <div className="date-picker-day date-picker-calendar-item">
            <abbr>Sat</abbr>
          </div>
          <div className="date-picker-day date-picker-calendar-item">
            <abbr>Sun</abbr>
          </div>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <button
            aria-label="2019 01 27"
            className="date-picker-date date-picker-calendar-item previous-month-date"
            disabled
            type="button"
          >
            <span className="c-inner" tabIndex="-1">27</span>
          </button>
          <button
            aria-label="2019 01 28"
            className="date-picker-date date-picker-calendar-item previous-month-date"
            disabled
            type="button"
          >
            <span className="c-inner" tabIndex="-1">28</span>
          </button>
          <button
            aria-label="2019 01 29"
            className="date-picker-date date-picker-calendar-item previous-month-date"
            disabled
            type="button"
          >
            <span className="c-inner" tabIndex="-1">29</span>
          </button>
          <button
            aria-label="2019 01 30"
            className="active date-picker-date date-picker-calendar-item previous-month-date"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">30</span>
          </button>
          <button
            aria-label="2019 01 31"
            className="date-picker-date date-picker-calendar-item previous-month-date"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">31</span>
          </button>
          <button
            aria-label="2019 02 01"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">1</span>
          </button>
          <button
            aria-label="2019 02 02"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">2</span>
          </button>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <button
            aria-label="2019 02 03"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">3</span>
          </button>
          <button
            aria-label="2019 02 04"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">4</span>
          </button>
          <button
            aria-label="2019 02 05"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">5</span>
          </button>
          <button
            aria-label="2019 02 06"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">6</span>
          </button>
          <button
            aria-label="2019 02 07"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">7</span>
          </button>
          <button
            aria-label="2019 02 08"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">8</span>
          </button>
          <button
            aria-label="2019 02 09"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">9</span>
          </button>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <button
            aria-label="2019 02 10"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">10</span>
          </button>
          <button
            aria-label="2019 02 11"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">11</span>
          </button>
          <button
            aria-label="2019 02 12"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">12</span>
          </button>
          <button
            aria-label="2019 02 13"
            className="date-picker-date date-picker-calendar-item active"
            tabindex="-1"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">13</span>
          </button>
          <button
            aria-label="2019 02 14"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">14</span>
          </button>
          <button
            aria-label="2019 02 15"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">15</span>
          </button>
          <button
            aria-label="2019 02 16"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">16</span>
          </button>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <button
            aria-label="2019 02 17"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">17</span>
          </button>
          <button
            aria-label="2019 02 18"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">18</span>
          </button>
          <button
            aria-label="2019 02 19"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">19</span>
          </button>
          <button
            aria-label="2019 02 20"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">20</span>
          </button>
          <button
            aria-label="2019 02 21"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">21</span>
          </button>
          <button
            aria-label="2019 02 22"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">22</span>
          </button>
          <button
            aria-label="2019 02 23"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">23</span>
          </button>
        </div>
        <div className="date-picker-date-row date-picker-row">
          <button
            aria-label="2019 02 24"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">24</span>
          </button>
          <button
            aria-label="2019 02 25"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">25</span>
          </button>
          <button
            aria-label="2019 02 26"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">26</span>
          </button>
          <button
            aria-label="2019 02 27"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">27</span>
          </button>
          <button
            aria-label="2019 02 28"
            className="date-picker-date date-picker-calendar-item"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">28</span>
          </button>
          <button
            aria-label="2019 03 01"
            className="date-picker-date date-picker-calendar-item next-month-date"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">1</span>
          </button>
          <button
            aria-label="2019 03 02"
            className="date-picker-date date-picker-calendar-item next-month-date"
            type="button"
          >
            <span className="c-inner" tabIndex="-1">2</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Browser Default Input Date

Check the browser support for input[type="date"] before deciding if it’s a good fit for your application.

Default Input Date

Snippet

<div className="form-group">
  <label htmlFor="defaultInputDate">Default Input Date</label>
  <input
    className="form-control"
    id="defaultInputDate"
    name="defaultInputDate"
    type="date"
    defaultValue="1970-01-01"
  />
</div>

Time Picker

This requires external javascript to change values of nested inputs and increment/decrement buttons. We use input type=“text” because it gives us better cross browser support for formatting numbers and text.

Time Picker 12H

Time Picker (12H)

Snippet

<div className="form-group">
  <label htmlFor="timePicker12h">Time Picker (12H)</label>
  <div className="clay-time">
    <div className="input-group">
      <div className="input-group-item input-group-item-shrink">
        <div className="form-control">
          <div className="clay-time-edit">
            <input
              className="clay-time-hours form-control-inset"
              id="timePicker12h"
              maxlength="2"
              name="hours"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-minutes form-control-inset"
              maxlength="2"
              name="minutes"
              type="text"
              defaultValue="--"
            />
            <input
              className="clay-time-ampm form-control-inset"
              maxlength="2"
              name="ampm"
              type="text"
              defaultValue="PM"
            />
          </div>
          <div className="clay-time-action-group">
            <div className="clay-time-action-group-item">
              <div
                className="btn-group-vertical clay-time-inner-spin"
                role="group"
              >
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-inc"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-up"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-up"></use>
                  </svg>
                </button>
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-dec"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-down"></use>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Time Picker 12H With Time Zone

Time Picker (12H) with Time Zone

(GMT+01:00)

Time Picker 12H With Time Zone and Icon

Time Picker (12H) with Time Zone and Icon

(GMT+01:00)

Snippet

<div className="form-group">
  <label htmlFor="timePicker12hTimeZoneIcon"
    >Time Picker (12H) with Time Zone and Icon</label
  >
  <div className="clay-time">
    <div className="input-group">
      <div className="input-group-item input-group-item-shrink">
        <div className="input-group-text">
          <svg
            className="lexicon-icon lexicon-icon-time"
            focusable="false"
            role="presentation"
          >
            <use xlinkHref="/icons.svg#time"></use>
          </svg>
        </div>
      </div>
      <div className="input-group-item input-group-item-shrink">
        <div className="form-control">
          <div className="clay-time-edit">
            <input
              className="clay-time-hours form-control-inset"
              id="timePicker12hTimeZoneIcon"
              maxlength="2"
              name="hours"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-minutes form-control-inset"
              maxlength="2"
              name="minutes"
              type="text"
              defaultValue="--"
            />
            <input
              className="clay-time-ampm form-control-inset"
              maxlength="2"
              name="ampm"
              type="text"
              defaultValue="PM"
            />
          </div>
          <div className="clay-time-action-group">
            <div className="clay-time-action-group-item">
              <div
                className="btn-group-vertical clay-time-inner-spin"
                role="group"
              >
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-inc"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-up"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-up"></use>
                  </svg>
                </button>
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-dec"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-down"></use>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="input-group-item input-group-item-shrink">
        <span className="input-group-text">(GMT+01:00)</span>
      </div>
    </div>
  </div>
</div>

Time Picker 24H

Time Picker (24H)

Snippet

<div className="form-group">
  <label htmlFor="timePicker24h">Time Picker (24H)</label>
  <div className="clay-time">
    <div className="input-group">
      <div className="input-group-item input-group-item-shrink">
        <div className="form-control">
          <div className="clay-time-edit">
            <input
              className="clay-time-hours form-control-inset"
              id="timePicker24h"
              maxlength="2"
              name="hours"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-minutes form-control-inset"
              maxlength="2"
              name="minutes"
              type="text"
              defaultValue="--"
            />
          </div>
          <div className="clay-time-action-group">
            <div className="clay-time-action-group-item">
              <div
                className="btn-group-vertical clay-time-inner-spin"
                role="group"
              >
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-inc"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-up"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-up"></use>
                  </svg>
                </button>
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-dec"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-down"></use>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Time Picker With Seconds and Clear

Time Picker (12H)

Time Picker (24H)

Snippet

<div className="form-group">
  <label htmlFor="timePicker12hSeconds">Time Picker (12H)</label>
  <div className="clay-time">
    <div className="input-group">
      <div className="input-group-item input-group-item-shrink">
        <div className="form-control">
          <div className="clay-time-edit">
            <input
              className="clay-time-hours form-control-inset"
              id="timePicker12hSeconds"
              maxlength="2"
              name="hours"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-minutes form-control-inset"
              maxlength="2"
              name="minutes"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-seconds form-control-inset"
              maxlength="2"
              name="seconds"
              type="text"
              defaultValue="--"
            />
            <input
              className="clay-time-ampm form-control-inset"
              maxlength="2"
              name="ampm"
              type="text"
              defaultValue="--"
            />
          </div>
          <div className="clay-time-action-group">
            <div className="clay-time-action-group-item">
              <button className="btn clay-time-clear-btn" type="button">
                <svg
                  className="lexicon-icon lexicon-icon-times-circle"
                  focusable="false"
                  role="presentation"
                >
                  <use xlinkHref="/icons.svg#times-circle"></use>
                </svg>
              </button>
            </div>
            <div className="clay-time-action-group-item">
              <div
                className="btn-group-vertical clay-time-inner-spin"
                role="group"
              >
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-inc"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-up"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-up"></use>
                  </svg>
                </button>
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-dec"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-down"></use>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="form-group">
  <label htmlFor="timePicker24hSeconds">Time Picker (24H)</label>
  <div className="clay-time">
    <div className="input-group">
      <div className="input-group-item input-group-item-shrink">
        <div className="form-control">
          <div className="clay-time-edit">
            <input
              className="clay-time-hours form-control-inset"
              id="timePicker24hSeconds"
              maxlength="2"
              name="hours"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-minutes form-control-inset"
              maxlength="2"
              name="minutes"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-seconds form-control-inset"
              maxlength="2"
              name="seconds"
              type="text"
              defaultValue="--"
            />
          </div>
          <div className="clay-time-action-group">
            <div className="clay-time-action-group-item">
              <button className="btn clay-time-clear-btn" type="button">
                <svg
                  className="lexicon-icon lexicon-icon-times-circle"
                  focusable="false"
                  role="presentation"
                >
                  <use xlinkHref="/icons.svg#times-circle"></use>
                </svg>
              </button>
            </div>
            <div className="clay-time-action-group-item">
              <div
                className="btn-group-vertical clay-time-inner-spin"
                role="group"
              >
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-inc"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-up"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-up"></use>
                  </svg>
                </button>
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-dec"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-down"></use>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Time Picker Focus State

Add the class focus to form-control.

Time Picker (12H)

Snippet

<div className="form-group">
  <label htmlFor="timePicker12hFocus">Time Picker (12H)</label>
  <div className="clay-time">
    <div className="input-group">
      <div className="input-group-item input-group-item-shrink">
        <div className="form-control focus">
          <div className="clay-time-edit">
            <input
              className="clay-time-hours form-control-inset"
              id="timePicker12hFocus"
              maxlength="2"
              name="hours"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-minutes form-control-inset"
              maxlength="2"
              name="minutes"
              type="text"
              defaultValue="--"
            />
            <input
              className="clay-time-ampm form-control-inset"
              maxlength="2"
              name="ampm"
              type="text"
              defaultValue="PM"
            />
          </div>
          <div className="clay-time-action-group">
            <div className="clay-time-action-group-item">
              <div
                className="btn-group-vertical clay-time-inner-spin"
                role="group"
              >
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-inc"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-up"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-up"></use>
                  </svg>
                </button>
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-dec"
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-down"></use>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Time Picker Disabled State

Add the class disabled to form-control and the attribute disabled to all nested inputs and buttons. The label can also be styled in a disabled state with the class disabled.

Time Picker (12H)

Snippet

<div className="form-group">
  <label htmlFor="timePicker12hDisabled">Time Picker (12H)</label>
  <div className="clay-time">
    <div className="input-group">
      <div className="input-group-item input-group-item-shrink">
        <div className="form-control disabled">
          <div className="clay-time-edit">
            <input
              className="clay-time-hours form-control-inset"
              disabled
              id="timePicker12hDisabled"
              maxlength="2"
              name="hours"
              type="text"
              defaultValue="--"
            />
            <span className="clay-time-divider">:</span>
            <input
              className="clay-time-minutes form-control-inset"
              disabled
              maxlength="2"
              name="minutes"
              type="text"
              defaultValue="--"
            />
            <input
              className="clay-time-ampm form-control-inset"
              disabled
              maxlength="2"
              name="ampm"
              type="text"
              defaultValue="PM"
            />
          </div>
          <div className="clay-time-action-group">
            <div className="clay-time-action-group-item">
              <div
                className="btn-group-vertical clay-time-inner-spin"
                role="group"
              >
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-inc"
                  disabled
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-up"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-up"></use>
                  </svg>
                </button>
                <button
                  className="btn btn-secondary clay-time-inner-spin-btn clay-time-inner-spin-btn-dec"
                  disabled
                  type="button"
                >
                  <svg
                    className="lexicon-icon lexicon-icon-angle-down"
                    focusable="false"
                    role="presentation"
                  >
                    <use xlinkHref="/icons.svg#angle-down"></use>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Browser Default Input Time

Check the browser support for input[type="time"] before deciding if it’s a good fit for your application.

Time

Time With Time Zone

(GMT+01:00)

Snippet

<div className="form-group">
  <label htmlFor="defaultTimeInput">Time</label>
  <input
    className="form-control"
    id="defaultTimeInput"
    name="defaultTimeInput"
    type="time"
    defaultValue="14:00:00"
  />
</div>

<div className="form-group">
  <div className="input-group">
    <div className="input-group-item">
      <input
        className="form-control"
        name="timer"
        type="time"
        defaultValue="00:00"
      />
    </div>
    <div className="input-group-item input-group-item-shrink">
      <span className="input-group-text">(GMT+01:00)</span>
    </div>
  </div>
</div>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 10:22:46 PM

Table of Contents

Example
Date Picker
Date Picker Field
Date Picker Date Range
Date Picker Old Markup
Browser Default Input Date
Time Picker
Time Picker 12H
Time Picker 12H With Time Zone
Time Picker 12H With Time Zone and Icon
Time Picker 24H
Time Picker With Seconds and Clear
Time Picker Focus State
Time Picker Disabled State
Browser Default Input Time

install	yarn add @clayui/date-picker
version
use	`import DatePicker from '@clayui/date-picker';`

Date Picker

Example

Date Picker

Date Picker Field

Date Picker Date Range

Date Picker Old Markup

Browser Default Input Date

Time Picker

Time Picker 12H

Time Picker 12H With Time Zone

Time Picker 12H With Time Zone and Icon

Time Picker 24H

Time Picker With Seconds and Clear

Time Picker Focus State

Time Picker Disabled State

Browser Default Input Time