使用AlpineJS Persist存储Flatpickr日期范围的格式问题

方案1：直接存储M j格式的日期范围 #

修改Flatpickr配置，让它直接输出M j格式的日期字符串，再通过Alpine Persist自动存储到sessionStorage：

<div x-data="{ dateRange: $persist('') }" x-init="
  flatpickr($el, {
    mode: 'range',
    dateFormat: 'M j', // 直接设置输出格式为目标样式
    onChange: function(selectedDates, dateStr) {
      dateRange = dateStr; // 存储如"Jan 1 to Jan 8"的字符串
    },
    // 从sessionStorage恢复选中状态
    defaultDate: dateRange ? dateRange.split(' to ') : []
  })
">
  <input type="text" x-model="dateRange">
  <!-- 直接展示存储的格式 -->
  <p x-text="dateRange"></p>
</div>

方案2：存储ISO格式，展示时转换为M j格式 #

如果需要保留ISO格式用于后续日期计算，可在展示时通过自定义函数转换格式：

<div x-data="{ dateRange: $persist([]) }" x-init="
  flatpickr($el, {
    mode: 'range',
    onChange: function(selectedDates) {
      dateRange = selectedDates.map(date => date.toISOString()); // 存储ISO数组
    },
    defaultDate: dateRange.length ? dateRange.map(iso => new Date(iso)) : []
  })
">
  <input type="text">
  <!-- 调用格式化函数生成目标展示文本 -->
  <p x-text="dateRange.length ? `${formatDate(dateRange[0])} to ${formatDate(dateRange[1])}` : ''"></p>
</div>

<script>
function formatDate(isoString) {
  const date = new Date(isoString);
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}
</script>

方案3：存储带年份的格式，展示时移除年份 #

如果存储的是"Jan 1 to Jan 8, 2024"这类带年份的字符串，可通过字符串处理去掉年份部分：

<div x-data="{ dateRange: $persist('') }" x-init="
  flatpickr($el, {
    mode: 'range',
    dateFormat: 'M j to M j, Y', // 存储带年份的完整格式
    onChange: function(selectedDates, dateStr) {
      dateRange = dateStr;
    },
    defaultDate: dateRange ? dateRange.split(' to ') : []
  })
">
  <input type="text" x-model="dateRange">
  <!-- 用正则移除末尾的年份 -->
  <p x-text="dateRange ? dateRange.replace(/, \d{4}$/, '') : ''"></p>
</div>

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