Topic: Unable to instantiate a datepicker

btgdev priority asked 10 months ago


**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 });

Grzegorz Bujański staff answered 10 months ago


You need to change 2 things in your code:

  1. Remove the datepicker class - if this class is added, the Datepicker will auto init and you would have to do extra steps to add options using JS code
  2. Init with JS code must be done on the main element (div), not on the input

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 4 weeks ago

I also got trapped, could you indicate this in the documentation?


Kamila Pieńkowska staff commented 4 weeks 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.



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

  • 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