Topic: reinitializing datetimepicker with changed option

ibks priority asked 1 year ago

Expected behavior

as API tap guide said. i expected dispose() method would work. and i can recreate datetimepicker with new option

Actual behavior

dispose() or new initializing of datetimepicker is not working

Resources (screenshots, code snippets etc.)

var options01 = {
    datepicker: { format: 'yyyy-mm-dd', inline:true}
    ,timepicker: { format24: true }

function init(){
    new mdb.Datetimepicker(document.getElementById('startDateTimepicker'), options01);

function changeOption(){
    options01.timepicker.disabled = true;
    new mdb.Datetimepicker(document.getElementById('startDateTimepicker'), options01);

error info

index.js:312 Uncaught TypeError: Cannot read properties of null (reading 'defaultPrevented')
at qm._openDatePicker (index.js:312:59)
at HTMLButtonElement.<anonymous> (index.js:232:12)
at HTMLDivElement.n (event-handler.js:119:21)

Michał Duszak staff answered 1 year ago

Hello it is a bit harder with Datetimepicker. As I can see some issues can come up, so we have to change approach here. I encountered two issues while reproducing the error.

First of all, it's a problem with a dispose() - I believe it should allow you to create a new instance in the same wrapper. I have both prepared a workaround for you, and added this issue to our todo list. Here is a snippet with working option change:

Second issue is an inline mode for datepicker. I have also prepared a workaround, and added this issue to our todo list. You have to modify src/js/pro/date-time-picker/index.js file - starting from line 171:

if (this._datepicker._isOpen && !this._datepicker._options.inline) {
  const headerDate = SelectorEngine.findOne(`${SELECTOR_DATEPICKER}-header`, document.body);
} else if (this._timepicker._modal) {
  const header = SelectorEngine.findOne(`${SELECTOR_TIMEPICKER}-elements`, document.body);
  const headerTime = SelectorEngine.findOne(
  if(header) {
    header.insertBefore(BUTTONS_WRAPPER, headerTime);

We have to check whether the inline option in datepicker is true or false in if (this._datepicker._isOpen && !this._datepicker._options.inline)so that we don't refer to not existing DOM elements. Same for timepicker - we have to check whether timepicker's header is present.

Here's a piece of information to help you with building new mdb dist files

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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No