Flowbite Datepicker 中禁用过去日期的完整实现指南

在 flowbite datepicker 中，可通过设置 `mindate` 选项为当前日期（`new date()`）来禁用所有过去日期，确保用户只能选择今天及之后的日期。该方案简洁可靠，无需额外逻辑或 dom 操作。

Flowbite 官方文档中虽未在基础示例中强调日期范围限制，但其底层 flowbite-datepicker（注意：非 React 版本，而是原生 JS 版本）完全支持 minDate 和 maxDate 配置项。要禁用过去日期，只需在初始化时传入 minDate: new Date() 即可：

import Datepicker from 'flowbite-datepicker/Datepicker'; // ✅ 注意包名正确性（最新版为 'flowbite-datepicker'）

const datepickerEl = document.getElementById('mydatepicker');

new Datepicker(datepickerEl, {
  todayHighlight: true,
  minDate: new Date() // ? 关键配置：禁用所有早于今天的日期
});

⚠️ 注意事项：

• 确保导入的是正确的包：flowbite-datepicker（v1.9+），而非已废弃的 flowbite-datapicker（拼写错误且非官方维护）；
• minDate 接收 Date 实例，不支持字符串（如 '2025-01-01'），建议始终使用 new Date() 动态获取当日零点时间；
• 若需更严格控制（例如排除今天，仅允许未来日期），可使用：

  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  minDate: tomorrow

此外，HTML 结构推荐使用 元素并添加 datepicker 属性（语义更清晰、兼容性更好），而非空

：

这样不仅符合 Flowbite 官方推荐用法，还能自动绑定焦点与键盘交互（如 Enter 确认、Escape 关闭等）。最终效果是：所有过去日期格子呈禁用态（灰色、不可点击），今日高亮，未来日期可正常选择。

✅ 总结：一行配置 minDate: new Date() 即可实现“仅允许选择今日及以后日期”的业务需求，轻量、高效、无副作用。