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

Time Picker

Based on the version from MDB:


To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to achieve this and should be placed in the Additional component(s) script section as documented in How to use.

    var timePicker = $('#time-picker-example-input-hidden').pickatime({
        twelvehour: false,
        donetext: 'Gereed',
        beforeShow: function () {
        afterDone: function () {

    $('#time-picker-example-button').click( function (event) {


  • 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