You are viewing version 3 of the library, the latest version is
<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 date-picker-input" aria-describedby="date-picker-example-instruction">
        <button class="date-picker-button" aria-hidden="true" tabindex="-1">
            <span class="mdi mdi-calendar" aria-hidden="true"></span>

Date Picker

Based on the version from MDB:


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.