How to re-initiate tailwind's datepicker when added dynamically?

Question

I am using tailwind's datepicker and I add new items by clicking a button:

<html>
   <head>
      <!-- ... -->
      <script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
   </head>
   <body>
      <!-- ... -->
        <input datepicker type="text" placeholder="Select date">
        <button>Add</button>
      <!-- ... -->
      <script>
        document.querySelector('button').addEventListener('click', function() {
          var input = document.createElement('input');
          input.setAttribute('datepicker', '');
          document.body.appendChild(input);

          document.querySelectorAll('[datepicker]').forEach(function(datepickerEl) {
             new Datepicker(datepickerEl, getDatepickerOptions(datepickerEl));
            // ❌ Unhandled Promise Rejection: ReferenceError: Can't find variable: Datepicker
          });
        });
      </script>
   </body>
</html>

Once a new item has been added, it does not have the datepicker. How can I re-initate the datepicker to all new items?

score 1 · Accepted Answer · answered Sep 10 '22 at 23:25

There are a couple of issues in the code -

The script that's been imported does not expose Datepicker and Daterangepicker objects. You will need to replace the import with the correct script that exposes the objects.
You need to import flowbite.min.css and flowbite.js for the functionalities to work correctly.
Import the flowbite scripts before the end of the body tag so your page has loaded before the scripts kick in and scan for input tags with datepicker or other data-tags.
Additionally, I have wrapped your script inside the ready function which will execute only after the page has fully loaded or refreshed. Thanks to this post.

    <html>
    
    <head>
      <!-- ... -->
    
      <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.3/dist/flowbite.min.css" />
    
    </head>
    
    <body>
      <!-- ... -->
      <input id="test" datepicker type="text" placeholder="Select date">
      <button>Add</button>
      <script>
    
        function ready(callback){
        // in case the document is already rendered
        if (document.readyState!='loading') callback();
        // modern browsers
        else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
        // IE <= 8
        else document.attachEvent('onreadystatechange', function(){
            if (document.readyState=='complete') callback();
        });
    }
    
    ready(function(){
        document.querySelectorAll('[datepicker]').forEach(function (datepickerEl) {
          new window.Datepicker(datepickerEl);
        });
    
        document.querySelector('button').addEventListener('click', function () {
          var input = document.createElement('input');
          input.setAttribute('datepicker', '');
          input.setAttribute('type', 'text');
          document.body.appendChild(input);
    
          new window.Datepicker(input);
        });
    });
      </script>
      <script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>
      <script src="https://unpkg.com/flowbite-datepicker@1.2.2/dist/js/datepicker-full.js"></script>
    
    </body>
    
    </html>

How to re-initiate tailwind's datepicker when added dynamically?

1 Answers1