本文详细介绍如何在 Flowbite Datepicker 中禁用过往日期，通过设置 minDate 选项为当前日期实现用户无法选择今天之前日期的功能，并提供可运行示例与关键注意事项。
本文详细介绍如何在 flowbite datepicker 中禁用过往日期，通过设置 `mindate` 选项为当前日期实现用户无法选择今天之前日期的功能，并提供可运行示例与关键注意事项。
Flowbite 官方文档中提供的 Datepicker（注意：当前 Flowbite v2+ 已将日期选择器移至独立包 flowbite-datepicker）支持灵活的日期范围控制。若需禁止用户选择过去日期（即仅允许今日及之后的日期），核心方案是利用 minDate 配置项——它接受一个 Date 对象，所有早于该日期的单元格将自动禁用、置灰且不可点击。
以下是最小可行配置示例：
<!-- HTML --> <input id="mydatepicker" datepicker type="text" placeholder="选择日期">
// JavaScript（ES Module）
import Datepicker from 'flowbite-datepicker/Datepicker';
const el = document.getElementById('mydatepicker');
new Datepicker(el, {
todayHighlight: true,
minDate: new Date() // ✅ 关键：禁用所有早于今天的日期
});⚠️ 注意事项：
- minDate 必须传入 Date 实例（如 new Date()），不能传字符串（如 '2024-01-01'），否则将导致初始化失败或行为异常；
- 若需同时限制未来日期，可配合 maxDate 使用（例如 maxDate: new Date(2025, 11, 31)）；
- Flowbite Datepicker 默认不包含中文本地化，如需多语言支持，请额外引入对应 locale 文件并配置 language 选项；
- 在 SSR 或构建工具（如 Vite、Webpack）中使用时，请确保 flowbite-datepicker 已正确安装：npm install flowbite-datepicker；
- 若页面存在多个日期选择器，务必为每个实例单独初始化，避免复用同一 DOM 元素或配置对象引发冲突。
实际效果上，启用 minDate: new Date() 后，日历中所有历史日期将呈现为不可交互状态（灰色 + pointer-events: none），而今日日期会被高亮（因启用了 todayHighlight: true），显著提升表单的可用性与数据合规性——尤其适用于预约系统、订单截止日、保险生效期等业务场景。
最后提醒：Flowbite 的日期选择器生态正在演进，建议始终参考 官方 GitHub 仓库 获取最新 API 文档与版本兼容性说明，避免因依赖旧版 CDN（如 unpkg 上的过时版本）导致功能缺失或样式错乱。
