Nijmegen Component Library
You are viewing version 2 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">
        <input type="hidden" id="time-picker-example-input-hidden" />
        </input>
        <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>
        </button>
    </div>
</div>

Time Picker

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

Using

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.

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

    $('#time-picker-example-button').click( function (event) {
        event.stopPropagation();
        timePicker.pickatime('show');
    });
</script>

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