借助AlpineJS Persist将Flatpickr日期范围保存至本地存储

步骤1：修改当前页面代码，添加「下一步」按钮与存储逻辑 #

在你的Alpine.js组件中新增存储日期的方法，记录选中的起止日期，再添加触发存储的按钮：

<div
    x-data="{
        value: [],
        startDate: null,
        endDate: null,
        init() {
            let picker = flatpickr(this.$refs.picker, {
                mode: 'range',
                inline: true,
                dateFormat: 'm/d/Y',
                defaultDate: this.value,
                onChange: ([start, end]) => {
                    if (start && end) {
                        this.startDate = start;
                        this.endDate = end;
                        console.log({ start, end });
                    }
                }
            })

            this.$watch('value', () => picker.setDate(this.value))
        },
        saveDates() {
            if (this.startDate && this.endDate) {
                // 组装包含原始日期对象和格式化字符串的结构
                const dateRange = {
                    start: this.startDate.toISOString(),
                    end: this.endDate.toISOString(),
                    formattedStart: flatpickr.formatDate(this.startDate, 'm/d/Y'),
                    formattedEnd: flatpickr.formatDate(this.endDate, 'm/d/Y')
                };
                // 转成字符串存入LocalStorage
                localStorage.setItem('selectedDateRange', JSON.stringify(dateRange));
                // 跳转到表单页面，替换为你的实际路径
                window.location.href = '/your-form-page.html';
            }
        }
    }"
    class="w-full max-w-sm"
    id="chosenDates"
>
    <div class="mb-2 font-bold">Date Range:</div>
    <input class="w-full rounded-md border border-gray-200 px-3 py-2.5 hidden" x-ref="picker" type="text">
    <!-- 新增下一步按钮 -->
    <button @click="saveDates" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md cursor-pointer">下一步</button>
</div>

关键提示：

• LocalStorage仅支持存储字符串，必须用JSON.stringify()将对象转为字符串后存储
• 用flatpickr.formatDate()可以快速匹配你设置的日期格式，无需手动拼接

步骤2：在表单页面读取LocalStorage并注入数据 #

页面加载时读取存储的日期范围，填充到对应表单字段中，以下是两种实现方式：

方式1：原生JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const dateRangeStr = localStorage.getItem('selectedDateRange');
    if (dateRangeStr) {
        const dateRange = JSON.parse(dateRangeStr);
        // 替换为你的表单输入框ID
        document.getElementById('form-start-date').value = dateRange.formattedStart;
        document.getElementById('form-end-date').value = dateRange.formattedEnd;
        
        // 如需使用原始Date对象做后续处理
        // const startDateObj = new Date(dateRange.start);
        // const endDateObj = new Date(dateRange.end);
    }
});

方式2：Alpine.js（与当前技术栈一致）

<div x-data="{
    init() {
        const dateRangeStr = localStorage.getItem('selectedDateRange');
        if (dateRangeStr) {
            const dateRange = JSON.parse(dateRangeStr);
            this.$refs.startDate.value = dateRange.formattedStart;
            this.$refs.endDate.value = dateRange.formattedEnd;
        }
    }
}" class="your-form-container">
    <input type="text" x-ref="startDate" name="start_date" id="form-start-date">
    <input type="text" x-ref="endDate" name="end_date" id="form-end-date">
    <!-- 其他表单字段 -->
</div>

可选：表单提交后清除LocalStorage #

为避免残留数据，建议在表单成功提交后清除存储的日期范围：

// 在表单提交成功的逻辑中添加
localStorage.removeItem('selectedDateRange');

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