initial values aren't loaded into datepicker


Topic: initial values aren't loaded into datepicker

iamjonmiller pro asked a year 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.):

https://mdbootstrap.com/snippets/standard/iamjonmiller/3087399


Michał Duszak staff answered a year 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'>

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.


iamjonmiller pro answered a year 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.

https://mdbootstrap.com/snippets/standard/iamjonmiller/3087527


Michał Duszak staff commented a year ago

I checked it and two datepickers work for me.

https://mdbootstrap.com/snippets/standard/m-duszak/3107286


iamjonmiller pro answered a year 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 a year ago

We will release fix to the attribute soon, so that you can pass initial value in many formats.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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