Datepicker manual instance creation causing error: Cannot r

Topic: Datepicker manual instance creation causing error: Cannot read property 'readOnly' of null

Realmonitor Ltd priority asked 2 years ago

*Expected behavior*I must create manually Datepicker, because there is no other way to apply language settings

*Actual behavior*Manual creation causing an error

*Resources (screenshots, code snippets etc.)*HTML:

div class="form-outline datepicker" data-mdb-inline="true" data-mdb-format="yyyy-mm-dd">
  <input type="text" class="form-control" id="activated" placeholder="yyyy-mm-dd">
  <label for="activated" class="form-label">Activated</label>
</div>

JS:

const el = document.querySelector('#activated');
let ct = mdb.Datepicker.getInstance(el);
if (ct && typeof ct.dispose === 'function') {
        ct.dispose();
        ct = null;
}
const config = {
  "cancelBtnLabel": "Kijelölés visszavonása",
  "cancelBtnText": "Mégse",
  "clearBtnLabel": "Kijelölés törlése",
  "clearBtnText": "Törlés",
  "monthsFull": ["Január", "Február", "Március", "Április", "Május", "Június", "Július", "Augusztus", "Szeptember", "Október", "November", "December"],
  "monthsShort": ["Jan", "Feb", "Már", "Ápr", "Máj", "Jún", "Júl", "Aug", "Sze", "Okt", "Nov", "Dec"],
  "okBtnLabel": "Kijelölés elfogadása",
  "nextMonthLabel": "Következő hónap",
  "nextMultiYearLabel": "Következő 24 év",
  "nextYearLabel": "Következő év",
  "okBtnText": "Rendben",
  "prevMonthLabel": "Előző hónap",
  "prevMultiYearLabel": "Előző 24 év",
  "prevYearLabel": "Előző év",
  "switchToDayViewLabel": "Dátum választás",
  "switchToMonthViewLabel": "Dátum választás",
  "switchToMultiYearViewLabel": "Év és hónap választása",
  "title": "Dátum választás",
  "weekdaysFull": ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"],
  "weekdaysNarrow": ["V", "H", "K", "Sz", "Cs", "P", "Sz"],
  "weekdaysShort": ["Vas", "Hét", "Ked", "Sze", "Csü", "Pén", "Szo"]
};
ct = new mdb.Datepicker(el, config);

ERROR:

VM7247 mdb.min.js:316 Uncaught TypeError: Cannot read property 'readOnly' of null
    at r.value (VM7243 mdb.min.js:316)
    at new r (VM7243 mdb.min.js:316)
    at 3266647:30

Example: https://mdbootstrap.com/snippets/standard/realmonitor-ltd/3266647#js-tab-view

Add comment

Dawid Wajszczuk staff answered 2 years ago

0 0 Best answer

Hi,

Here is the example from our documentation showing the translated datepicker <a href="https://mdbootstrap.com/docs/standard/forms/datepicker/#section-translations" target="_blank">https://mdbootstrap.com/docs/standard/forms/datepicker/#section-translations</a>. Custom class was used on div, so it can be applied to all needed datepickers, and then grabbed via query selector. You can simply Copy & Paste it to your project.

By "public way to assign a date to the control" do you mean <code>startDate</code> option? Here is the snippet showing how to use it <a href="https://mdbootstrap.com/snippets/standard/d-wajszczuk/3268155" target="_blank">https://mdbootstrap.com/snippets/standard/d-wajszczuk/3268155</a>. More information and available options can be found here <a href="https://mdbootstrap.com/docs/standard/forms/datepicker/#docsTabsAPI" target="_blank">https://mdbootstrap.com/docs/standard/forms/datepicker/#docsTabsAPI</a> under the API tab.

Keep coding, 
Dawid

Please insert min. 20 characters.

Hi,

Here is the example from our documentation showing the translated datepicker https://mdbootstrap.com/docs/standard/forms/datepicker/#section-translations. Custom class was used on div, so it can be applied to all needed datepickers, and then grabbed via query selector. You can simply Copy & Paste it to your project.

By "public way to assign a date to the control" do you mean startDate option? Here is the snippet showing how to use it https://mdbootstrap.com/snippets/standard/d-wajszczuk/3268155. More information and available options can be found here https://mdbootstrap.com/docs/standard/forms/datepicker/#docsTabsAPI under the API tab.

Keep coding,
Dawid

Realmonitor Ltd priority commented 2 years ago

Hi Dawid, A little comment for your second link. That example you using the HTML to convey the date value. However most of the time, the data arrives via JSON fetch call and I have to dynamically assign to the existing DatePicker instances (or all *Picker objects and all Select objects). There is no point to write down the arrived JSON data into the DOM, then read it back by recreating the control, (I assume correctly, that dynamically changing the "data-mdb-start-date="2020/10/11"" will not automatically picked up by the existing control). So you see, it would be useful to provide a Javascript method or property to get and set values for all controls.

Please insert min. 15 characters.

Dawid Wajszczuk staff commented 2 years ago

startDate is option that can be used via JavaScript (as well as all the options listed in Datepicker's documentation). Here are 2 snippets: 1. showing how to set startDate on init (init is done after you click the input) https://mdbootstrap.com/snippets/standard/d-wajszczuk/3269863, 2. showing how to update already initialized Datepicker https://mdbootstrap.com/snippets/standard/d-wajszczuk/3269955. So you can initialize or update your Datepickers when your JSON is fetched or whenever you want.

Please insert min. 15 characters.

Add comment

Realmonitor Ltd priority answered 2 years ago

1 0 Best answer

Please insert min. 20 characters.

I solved the problem, looking at other tickets, about events not firing properly... Apparently for the datepicker one must target the div surrounding the INPUT element. Unfortunately that is very counter intuitive and also this information is not conveyed via the examples. All example the input has an id and the div only has the "datepicker" class. Nothing shows that when one wants to individually recreate the control, then must use an ID on the DIV. Also there is no public way to assign a date to the control. I am using the _activeDate property, I bet you do not intended for public use, but here we are. When one using a binder to bind a model to control need an in and out property (or function) to update the control.

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.9.0
Device: Laptop
Browser: Chrome
OS: Linux Unbuntu 20.x
Provided sample code: No
Provided link: Yes

Realmonitor Ltd

52Support score
7Questions 2Answers 4Snippets