Topic: initial values aren't loaded into datepicker

iamjonmiller pro asked 3 years ago

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.):

Michał Duszak staff answered 3 years ago

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'>

If it comes to the initial value, I have already added this issue to the list. Fix will be provided asap.

iamjonmiller pro answered 3 years ago

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.

iamjonmiller pro answered 3 years ago

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.

Michał Duszak staff commented 3 years ago

I checked it and two datepickers work for me.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: Yes