如何将Flowbite默认时间选择器从12小时制改为24小时制？

要把Flowbite时间选择器切换为24小时制，核心是利用组件自带的format配置项，有两种实现方式：

方式一：通过JavaScript初始化配置 #

直接在初始化Timepicker实例时指定format: '24'，同时可以设置时间范围等参数：

// 初始化时间选择器并启用24小时制
const timepicker = new Timepicker(document.getElementById('time'), {
  format: '24',
  minTime: '09:00',
  maxTime: '18:00',
  value: '00:00'
});

对应修改后的HTML（将input类型改为text避免和浏览器原生控件冲突）：

<form class="max-w-[8rem] mx-auto">
    <label for="time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select time:</label>
    <div class="relative">
        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"/>
            </svg>
        </div>
        <input type="text" id="time" class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
    </div>
</form>

方式二：通过HTML data属性配置 #

无需手写JS，直接在input标签上添加data-format="24"属性，同时可以用data属性设置时间范围：

<form class="max-w-[8rem] mx-auto">
    <label for="time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select time:</label>
    <div class="relative">
        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"/>
            </svg>
        </div>
        <input type="text" id="time" class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" data-format="24" data-min-time="09:00" data-max-time="18:00" value="00:00" required />
    </div>
</form>

关键说明 #

• 建议将input的type从time改为text，避免浏览器原生时间控件与Flowbite组件冲突，确保24小时制格式正常生效。
• Flowbite时间选择器默认使用12小时制，通过format: '24'（JS）或data-format="24"（HTML）即可切换为24小时制的显示与选择逻辑。

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