Flatpickr 日期范围会话存储以 ISO 格式与 AlpineJS Persist

Answer 1

不建议改变存储格式。

您可以使用 onchange 事件来替换显示格式：

this.thePicker = flatpickr(this.$refs.picker, {
    mode: 'range',
    inline: false,
    dateFormat: 'M j Y',
    showMonths: 2,
    defaultDate: this.chosenDates,
    onChange: (selectedDates, dateStr, instance) => {

        this.chosenDates = [...selectedDates];

        const year0 = selectedDates[0]?.getFullYear();
        if (selectedDates[0]  &&  year0 === selectedDates[1]?.getFullYear())
            instance.element.value = dateStr.replaceAll (' ' + year0, '');
    }
});

这样只有当范围跨越两年时才显示年份。

要以您自己的格式在其他地方显示范围，您可以操纵日期，例如使用 toLocaleDateString:

<div x-data="{

   .....

   init() {

      .....

   },

   displayRange() {
       return new Date(this.chosenDates[0]).toLocaleDateString('en-us',{day: 'numeric', month: 'short'}) +
              ' to ' +
              new Date(this.chosenDates[1]).toLocaleDateString('en-us',{day: 'numeric', month: 'short'}) +
             ', ' +  new Date(this.chosenDates[0]).getFullYear()
   }
}">

   <!-- ..... -->

   <div x-text="displayRange"
         x-show="chosenDates[0]  &&  chosenDates[1]"
   > </div> 

</div> 

这里 displayRange() 是如何编写格式的简化示例