Time Pickers

Showcasing MICL time pickers

Default non-MICL time input field

MICL time textfield component without the MICL time picker component

MICL time textfield component with the MICL time picker component

Enter time

:
Hour Minute

Time input using a MICL button component that opens the MICL time picker

Enter time

:
Hour Minute

Code example


<dialog class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="id0">
  <form method="dialog">
    <div class="micl-dialog__headline">
      <h2 id="id0">Enter time</h2>
    </div>
    <div class="micl-dialog__content">
      <input type="number" name="hour" value="00" aria-labelledby="id1">
      <span class="micl-timepicker__separator">:</span>
      <input type="number" name="minute" value="00" aria-labelledby="id2">
      <div class="micl-timepicker__period"></div>
      <span id="id1" class="micl-timepicker__supporting-text-hour">Hour</span>
      <span id="id2" class="micl-timepicker__supporting-text-minute">Minute</span>
      <div class="micl-timepicker__dial"></div>
    </div>
    <div class="micl-dialog__actions">
      <button type="button" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--square material-symbols-outlined" data-alticon="schedule">keyboard</button>
      <div>
        <button class="micl-button-text-s" value="">Cancel</button>
        <button class="micl-button-text-s" value="OK">OK</button>
      </div>
    </div>
  </form>
</dialog>