Topic: reinitializing datetimepicker with changed option

ibks priority asked 7 months 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);
    ...
    changeOption();
}

function changeOption(){
    options01.timepicker.disabled = true;
    mdb.Datetimepicker.getInstance(document.getElementById('startDateTimepicker')).dispose();
    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 7 months 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: https://mdbootstrap.com/snippets/standard/m-duszak/3864298#js-tab-view

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);
  headerDate.appendChild(BUTTONS_WRAPPER);
} else if (this._timepicker._modal) {
  const header = SelectorEngine.findOne(`${SELECTOR_TIMEPICKER}-elements`, document.body);
  const headerTime = SelectorEngine.findOne(
    `${SELECTOR_TIMEPICKER}-clock-wrapper`,
    document.body
  );
  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 https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/#section-custom-version-of-mdb-ui-kit



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