<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.
</span>
<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>
</button>
</div>
</div>
Based on the version from MDB:
https://mdbootstrap.com/javascript/date-picker/
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:
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.