Date Pickers

Showcasing MICL date pickers

Default non-MICL date input field

MICL date textfield component without the MICL date picker component

MICL date textfield component with the MICL date picker component

Enter dates

Select date

MICL date textfield component with a docked MICL date picker component

Enter date

MICL date textfield component with limited date range

Enter dates

Select date

Date input using a MICL button component that opens the MICL date picker

Enter dates

Select date

Code example


<dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1">
  <form method="dialog">
    <div class="micl-dialog__headline">
      <h2 id="id1">Enter dates</h2>
      <span class="micl-dialog__supporting-text">Select date</span>
      <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
      <hr class="micl-divider">
      <div class="micl-datepicker__month-selector">
        <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
        <button type="button" class="micl-datepicker__month micl-button-text-xs">
          <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
        </button>
        <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
      </div>
      <div class="micl-datepicker__year-selector">
        <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
        <button type="button" class="micl-datepicker__year micl-button-text-xs">
          <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
        </button>
        <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
      </div>
    </div>
    <div class="micl-dialog__content">
      <div class="micl-datepicker__calendars"></div>
      <div class="micl-datepicker__years"></div>
      <div class="micl-datepicker__months"></div>
      <div class="micl-datepicker__input micl-textfield-outlined">
        <label for="mydate1">Date</label>
        <input type="text" id="mydate1">
      </div>
    </div>
    <div class="micl-dialog__actions">
      <button class="micl-button-text-s" value="">Cancel</button>
      <button class="micl-button-text-s" value="OK">OK</button>
    </div>
  </form>
</dialog>