如何在flatpickr的12小时制内联时间选择器设置[0:11]小时范围

我明白你遇到的困扰了——Flatpickr在启用12小时制（time_24hr: false）时，内部会强制把小时控件的范围固定为1-12，直接修改DOM的min/max属性或者设置defaultHour:0都会被它的内置逻辑覆盖，所以才会出现设置无效的情况。这里有两个可行的解决思路，帮你实现小时范围改为0-11的需求：

方法一：通过onReady钩子替换小时选项并同步逻辑 #

利用Flatpickr的onReady回调，在初始化完成后直接替换小时选择器的选项，并添加事件监听确保选中值能同步到Flatpickr的内部日期对象：

const time_picker = flatpickr("#time_picker", {
  enableTime: true,
  noCalendar: true,
  dateFormat: "G:i",
  time_24hr: false,
  inline: true,
  defaultHour: 0,
  onReady: function(selectedDates, dateStr, instance) {
    // 获取小时选择器的DOM元素
    const hourSelect = instance.hourElement;
    
    // 清空原有1-12的选项
    hourSelect.innerHTML = '';
    
    // 生成0-11的新选项
    for (let i = 0; i < 12; i++) {
      const option = document.createElement('option');
      option.value = i;
      option.textContent = i;
      hourSelect.appendChild(option);
    }
    
    // 设置默认选中0
    hourSelect.value = 0;
    
    // 监听小时选择变化，同步到Flatpickr内部的日期对象
    hourSelect.addEventListener('change', function() {
      const selectedHour = parseInt(this.value);
      const currentDate = instance.selectedDates[0] || new Date();
      currentDate.setHours(selectedHour);
      // 更新Flatpickr的选中日期
      instance.setDate(currentDate, true);
    });
  }
});

方法二：自定义日期解析与格式化逻辑（更彻底的方案） #

如果需要同时处理用户手动输入的时间，可以结合parseDate和formatDate钩子，强制Flatpickr按照0-11的小时范围来解析和显示时间：

const time_picker = flatpickr("#time_picker", {
  enableTime: true,
  noCalendar: true,
  dateFormat: "G:i",
  time_24hr: false,
  inline: true,
  defaultHour: 0,
  // 自定义解析逻辑：把输入的12转为0
  parseDate: function(dateStr, format) {
    const [hourStr, minuteStr] = dateStr.split(':');
    let hour = parseInt(hourStr);
    if (hour === 12) hour = 0; // 处理可能的12输入
    const minute = parseInt(minuteStr) || 0;
    
    const date = new Date();
    date.setHours(hour, minute, 0, 0);
    return date;
  },
  // 自定义格式化逻辑：直接显示0-11的小时
  formatDate: function(date, format) {
    const hour = date.getHours();
    const minute = date.getMinutes().toString().padStart(2, '0');
    return `${hour}:${minute}`;
  },
  onReady: function(selectedDates, dateStr, instance) {
    // 同样替换小时选择器选项
    const hourSelect = instance.hourElement;
    hourSelect.innerHTML = '';
    for (let i = 0; i < 12; i++) {
      const option = document.createElement('option');
      option.value = i;
      option.textContent = i;
      hourSelect.appendChild(option);
    }
    hourSelect.value = 0;
  }
});

为什么原有方法无效？ #

Flatpickr在12小时制模式下，会自动将内部的0小时映射为显示的12，并且初始化时会自动生成1-12的小时选项。直接修改DOM属性只是临时改变了表面，Flatpickr的内部状态和事件处理逻辑依然遵循12小时制的默认规则，所以你的设置会被覆盖。通过上述钩子介入初始化和数据处理流程，才能彻底修改小时的显示和可选范围。

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