Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB Datepicker issues with custom format and error when opening datepicker modal

VDLP priority asked 2 years ago


I've upgraded to v3 and according to the changelog and my previous issue, the datepicker should now work with a custom format. But I still encounter problems with the datepicker.

My code:

 <MDBDatepicker
        v-model="picker4"
        inputToggle
        label="Select a date"
        format="DD-MM-YYYY"
        placeholder="DD-MM-YYYY"
 />

And in script setup just an empty ref:

const picker4 = ref();

Problem 1

The current selected date will not be selected with a custom date format when you open the datepicker modal. It works with the default format.

Steps to reproduce

  1. Select 24th of October 2022
  2. Click on "Ok"
  3. Click on the input again
  4. The current date is not selected

Problem 2

When you rapidly keep selecting dates and reopening the modal there will be an error sometimes, which causes the datepicker to not open. The following error will appear in the console:

mdb.es.min.js?9dd2:31002 Uncaught TypeError: Cannot read properties of null (reading 'focus')
at eval (mdb.es.min.js?9dd2:31002:1)
eval @ mdb.es.min.js?9dd2:31002
setTimeout (async)
eval @ mdb.es.min.js?9dd2:31001
eval @ runtime-core.esm-bundler.js?d2dd:2710
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js?d2dd:2684
flushPostFlushCbs @ runtime-core.esm-bundler.js?d2dd:341
flushJobs @ runtime-core.esm-bundler.js?d2dd:395
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?d2dd:280
queueJob @ runtime-core.esm-bundler.js?d2dd:274
scheduler @ runtime-core.esm-bundler.js?d2dd:1805
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:384
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
set value @ reactivity.esm-bundler.js?89dc:1045
handleInputToggle @ mdb.es.min.js?9dd2:31996
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:354

Steps to reproduce

  1. Select a random date
  2. Click on "Ok"
  3. Click on the input again
  4. Repeat the steps above rapidly

Bartosz Cylwik staff answered 2 years ago


Hi! I have added these issues to our list and we will try to fix them in the next release. Best Regards!



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 Vue
  • MDB Version: MDB5 3.0.0
  • Device: Macbook Pro M1
  • Browser: chrome
  • OS: macOS Monterey
  • Provided sample code: No
  • Provided link: Yes