Topic: initial values aren't loaded into datepicker
Expected behavior: By passing a value to the field the datepicker will initialize with this value, in the specified format, when the page loads.
Actual behavior: The field initializes with the raw value in the input element (e.g. 2016-01-01) and does not follow the specified format. The datepicker element also does not load this date and opens with a default date. Once a date is selected the format is applied.
Resources (screenshots, code snippets etc.):
https://mdbootstrap.com/snippets/standard/iamjonmiller/3087399
Hello. For format to work properly, please use attribute in the element which contains the datepicker class. e.g:
<div class="form-outline datepicker" data-mdb-format='mm/dd/yyyy'>
https://mdbootstrap.com/snippets/standard/m-duszak/3088680
If it comes to the initial value, I have already added this issue to the list. Fix will be provided asap.
I also discovered that if you have two datepicker elements with a data-mdb-format declared, the format only works on the first element.
To replicate this select a value for each field.
https://mdbootstrap.com/snippets/standard/iamjonmiller/3087527
Michał Duszak staff commented 3 years ago
I checked it and two datepickers work for me.
https://mdbootstrap.com/snippets/standard/m-duszak/3107286
Just wanted to update. I found out that if you change the desired format (data-mdb-format='yyyy-mm-dd') to match the exact format passed in the initial value (value='2016-01-01') the datepicker will use the initial value.
This is still a bug, as you would ideally have some data-friendly format as the value and a pretty, localized format for the user, but at least you can get the full expected behavior this way.
Michał Duszak staff commented 3 years ago
We will release fix to the attribute soon, so that you can pass initial value in many formats.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.4.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes