Nijmegen Component Library
You are viewing version 3 of the library, the latest version is

Time Picker 

<div class="md-form">
    <div class="time-picker">
        <input placeholder="uu:mm" type="text" id="time-picker-example-input" class="form-control time-picker-input" />
        <input type="hidden" class="time-picker-input-hidden" />
        <label for="time-picker-example-input">Time picker (uu:mm)</label>
        <button class="time-picker-button" aria-hidden="true" tabindex="-1">
            <i class="mdi mdi-timer" aria-hidden="true"></i>
        </button>
    </div>
</div>

Time Picker

Based on the version from MDB:
https://mdbootstrap.com/javascript/time-picker/

Notes

  • The hidden input can then be ignored when collecting results
  • For the best accessibility support the label should contain the time format, and not just the placeholder
  • MDB framework defines that the input element comes prior to the label element
  • It’s best practice to have an input element accompanied with a label element which are connected via the for attribute on the label element and the corresponding id on the input element