reinitializing datetimepicker with changed option

Topic: reinitializing datetimepicker with changed option

ibks priority asked 2 years 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)

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

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 <code>dispose()</code> - 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: <a href="https://mdbootstrap.com/snippets/standard/m-duszak/3864298#js-tab-view" target="_blank">https://mdbootstrap.com/snippets/standard/m-duszak/3864298#js-tab-view</a>

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 <code>src/js/pro/date-time-picker/index.js</code> file - starting from line 171:

<pre class="prettyprint"><code>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);
 }
}
</code></pre>

We have to check whether the inline option in datepicker is <code>true</code> or <code>false</code> in <code>if (this._datepicker._isOpen && !this._datepicker._options.inline)</code>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 <a href="https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/#section-custom-version-of-mdb-ui-kit" target="_blank">https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/#section-custom-version-of-mdb-ui-kit</a>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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 3.10.2
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

ibks

5Support score
1Questions 0Answers 6Snippets