Vue中flat-pickr日期时间选择器如何配置起止时间默认值？

Vue项目flat-pickr日期默认时间配置方案 #

你可以通过flat-pickr内置的onChange事件钩子，在用户选中日期时自动拼接指定的默认时间，实现需求效果，修改后的代码如下：

<!-- 模板部分无需调整 -->
<flat-pickr
     id="campaign-startdate"
     v-model="model.startdate"
     class="form-control"
     :config="formatStartDate"
/>
<flat-pickr
     id="campaign-enddate"
     v-model="model.endDate"
     class="form-control"
     :config="formatEndDate"
/>

<script>
export default {
  data() {
    return {
      model: {
        startDate: null,
        endDate: null,
      },
      formatStartDate: {
        enableTime: true,
        dateFormat: 'd-m-Y H:i',
        // 选中开始日期后自动设置为12点AM（00:00）
        onChange: (selectedDates, dateStr, instance) => {
          if (selectedDates.length) {
            const targetDate = selectedDates[0]
            targetDate.setHours(0, 0, 0, 0)
            instance.setDate(targetDate, true)
          }
        }
      },
      formatEndDate: {
        enableTime: true,
        dateFormat: 'd-m-Y H:i',
        // 选中结束日期后自动设置为12点PM（12:00）
        onChange: (selectedDates, dateStr, instance) => {
          if (selectedDates.length) {
            const targetDate = selectedDates[0]
            targetDate.setHours(12, 0, 0, 0)
            instance.setDate(targetDate, true)
          }
        }
      }
    }
  }
}
</script>

如果业务中结束日期需要默认取当天最后一刻，可将结束日期配置中的targetDate.setHours(12, 0, 0, 0)修改为targetDate.setHours(23, 59, 59, 999)即可。

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