Topic: Unable to instantiate a datepicker
**Expected behavior**
DatePicker initializes with confirmOnSelect = true, format = 'mmmm d, yyyy', and inline = true.
**Actual behavior**
DatePicker initializes without options, and errors are generated in the console:
Uncaught TypeError: Cannot read properties of null (reading 'classList')
**Resources (screenshots, code snippets etc.)**
Snippet: https://mdbootstrap.com/snippets/standard/btgdev/5323109
HTML (Same as snippet):
<div class="form-outline datepicker" data-mdb-toggle-button="false"><input type="text" class="form-control" id="weekof" data-mdb-toggle="datepicker" /><label for="weekof" class="form-label">Week of</label></div>
JavaScript (Same as snippet):
WeekOf = new mdb.Datepicker(document.querySelector('#weekof'), {confirmDateOnSelect: true, format: 'mmmm d, yyyy', inline: true });
You need to change 2 things in your code:
- Remove the
datepickerclass - if this class is added, the Datepicker will auto init and you would have to do extra steps to add options using JS code - Init with JS code must be done on the main element (
div), not on theinput
Or just set all options using data attributes. I have prepared a snippet with working code for you: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5324578#html-tab-view
U2P priority commented 10 months ago
I also got trapped, could you indicate this in the documentation?
Kamila Pieńkowska staff commented 10 months ago
First part of this answer relates to v6 and does not apply to MDB package after last major release.
About second part: we give multiple example that can be copied in our docs that are properly initiated and in API section there is info about available initiation methods.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.3.1
- Device: Laptop
- Browser: Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes