Topic: Programmatically create multiple Datepicker

smachesney free asked 3 years ago


Can you show me how to programmatically create, initialize and set values of multiple date pickers please?

I'm using it in a dynamically loaded table and it's proving to be troublesome. Thanks Sonia

Grzegorz Bujański staff answered 3 years ago

A code snippet showing what your table looks like and how you are trying to set to value would be very helpful.

It should be enough to catch datepicker input and set its value.

<div class="form-outline datepicker">
  <label for="exampleDatepicker1" class="form-label">Select a date</label>

document.querySelector('#exampleDatepicker1').value = '18/08/2022';

Of course, when setting value you must take into account the date format which is set to dd/mm/yyyy by default. If you store the date in a different format, you would have to set the format option in the Datepicker accordingly.

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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: desktop
  • Browser: Chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No