<div class="md-form">
    <div class="date-picker">
        <label for="date-picker-example-input">Date picker</label>
        <span class="sr-only" id="date-picker-example-instruction">
            Geef een datum op in het volgende formaat: dag/maand/jaar. Bijvoorbeeld: 30/05/2010.
        <input placeholder="dag/maand/jaar" type="text" id="date-picker-example-input" class="form-control" aria-describedby="date-picker-example-instruction">
        <button id="date-picker-example-button" aria-hidden="true" tabindex="-1">
            <span class="mdi mdi-calendar" aria-hidden="true"></span>

Date 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 self = this;
    var $datePicker = $('#date-picker-example-button').pickadate({
        monthsFull: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
        monthsShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
        weekdaysFull: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
        weekdaysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
        today: 'vandaag',
        clear: 'verwijderen',
        close: 'sluiten',
        firstDay: 1,
        format: 'dd/mm/yyyy',
        formatSubmit: 'yyyy/mm/dd',
        buttonClear: 'none',
        onSet: function (context) {
            var date = new Date(context.select);
        onStart: function () {
            $('.picker__nav--prev, .picker__nav--next').attr('tabindex', '-1');
    self.picker = $datePicker.pickadate("picker");

    $('#date-picker-example-input').on('change', function () {
        if (dateIsValid(this.value)) {
            self.picker.set("select", parseDateInput(this.value));
        } else {

    function parseDateInput(dateInput) {
        var dateSplitSlashes = dateInput.split(/[- /.]+/);
        if (dateSplitSlashes.length === 3) {
            return new Date(dateSplitSlashes[2], dateSplitSlashes[1] - 1, dateSplitSlashes[0]);
        return new Date(dateInput.substr(4, 4), dateInput.substr(2, 2) - 1, dateInput.substr(0, 2));

    function dateIsValid(dateInput) {
        return /(0?[1-9]|[12][0-9]|3[01])[- /.]?(0?[1-9]|1[012])[- /.]?(19|20)\d\d/.test(dateInput);


The datepicker icon can not be used with a keyboard because the mdb datepicker is not accessible enough. Keyboard users can use the input field to type a date directly. Dates in the following format will be parsed:

  • 30/05/2015
  • 30-05-2015
  • 30.12.2015
  • 30 05 2015
  • 30052015

Make sure that you link a description with aria-describedby to the input element of the date picker. Screenreaders will announce the text in the linked element when the input element gets focus.