Flatpickr 24小时制时间选择器配置详解-html教程-PHP中文网

Flatpickr 24小时制时间选择器配置详解

在 Angular 中使用 Flatpickr 实现 24 小时制时间选择，关键在于正确设置 time24hr（非 time_24hr）选项，并配合 dateFormat: 'H:i'，同时确保 enableTime: true 启用时间模式。

在 angular 中使用 flatpickr 实现 24 小时制时间选择，关键在于正确设置 `time24hr`（非 `time_24hr`）选项，并配合 `dateformat: 'h:i'`，同时确保 `enabletime: true` 启用时间模式。

Flatpickr 的 24 小时制配置常因拼写错误而失效——最典型的误区是将官方选项 time24hr（驼峰命名、无下划线）误写为 time_24hr。该选项控制时间选择器是否以 24 小时格式（00:00–23:59）显示与解析，而非 12 小时制（AM/PM）。

✅ 正确配置如下（TypeScript）：

flatpickrOptions: any = {
  enableTime: true,    // 必须启用时间选择
  noCalendar: true,    // 隐藏日期面板，仅保留时间
  time24hr: true,      // ✅ 关键：注意是 time24hr（无下划线）
  dateFormat: 'H:i',   // H 表示 24 小时制小时（0–23），i 表示分钟（00–59）
  // locale: French,   // 如需本地化，确保已正确导入并注册
};

HTML 中保持简洁绑定：

<input type="text" class="form-control" mwlflatpickr>

⚠️ 注意事项：

简单的jQuery日期时间选择器

一款简单的jQuery日期时间选择器插件，允许用户自由选择一个日期和时间，可自定义设置日期，简单实用，喜欢的不要错过。

下载

time24hr 是布尔值，必须为 true（不能为字符串 'true' 或 1）；
dateFormat 必须使用大写 H（24 小时制）而非小写 h（12 小时制），否则即使 time24hr: true 也仅影响选择器 UI，不改变输入框输出格式；
若使用 locale（如 French），请确认该 locale 对象已通过 import { French } from 'flatpickr/dist/l10n/fr.js' 引入，并在模块中全局注册或按需传入；
noCalendar: true 与 enableTime: true 组合可实现纯时间选择器；若需日期+时间，请移除 noCalendar 并设置 dateFormat: 'Y-m-d H:i'。