如何为动态新增的Tailwind日期选择器重新初始化？

错误原因 #

你碰到的ReferenceError: Can't find variable: Datepicker，是因为Flowbite 1.5.1的日期选择器构造函数并非全局的Datepicker，而是挂载在flowbite全局对象下的Datepicker。另外，你每次点击按钮都遍历所有[datepicker]元素初始化，会重复初始化已存在的日期选择器，容易引发额外问题。

修复步骤 #

• 改用flowbite.Datepicker来实例化日期选择器
• 只针对新添加的输入项做初始化，无需重复处理已存在的元素
• 确保getDatepickerOptions函数已定义，若不需要自定义配置，直接传空对象或省略该参数即可

修改后的完整代码 #

<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.querySelectorAll('[datepicker]').forEach(el => {
          new flowbite.Datepicker(el, getDatepickerOptions(el));
        });

        // 自定义配置函数（不需要的话可替换为默认配置）
        function getDatepickerOptions(el) {
          return {
            format: 'yyyy-mm-dd',
            autohide: true
          };
        }

        document.querySelector('button').addEventListener('click', function() {
          var input = document.createElement('input');
          input.setAttribute('datepicker', '');
          input.type = 'text';
          input.placeholder = 'Select date';
          document.body.appendChild(input);

          // 仅初始化新添加的输入项
          new flowbite.Datepicker(input, getDatepickerOptions(input));
        });
      </script>
   </body>
</html>

关键点说明 #

1. 构造函数修正：Flowbite的日期选择器必须通过flowbite.Datepicker实例化，因为它没有将Datepicker暴露为全局变量，而是封装在flowbite对象内部。
2. 避免重复初始化：页面加载时先处理已有元素，新增按钮点击后只操作新创建的输入框，不会重复绑定事件或创建多个实例。
3. 配置灵活调整：如果不需要自定义配置，直接把getDatepickerOptions(input)替换为{}或者省略第二个参数即可。

内容的提问来源于stack exchange，提问作者JanBoehmer