使用 AplineJS Persist 将 Flatpickr 日期范围保存到本地存储

Question

我正在尝试查找一些有关如何使用 Flatpickr daterange 让用户选择日期范围并在单击“下一步”按钮时将其保存到本地存储的信息。

我想在页面上有一个 Flatpickr 日期范围日历，当用户选择一个日期范围并单击“下一步”时，该数据将被存储，以便我可以在另一个页面上使用它来继续使用该数据的完整表单将被注入两个字段并传递。

目前，我只能将这些数据存储在 console.log 中，并且无法找到任何资源来指导我朝着我想要的方向前进。

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

                        this.$watch('value', () => picker.setDate(this.value))
                    },

                }"
            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" >
            </div>

Answer 1

这就是最终对我有用的东西。 它可能并不完美，但它确实存储了范围，让我可以在其他页面上访问它。

鼓励改进！

<div
                    x-data="{
                        value: [],
                        init() {
                            let picker = flatpickr(this.$refs.picker, {
                                mode: 'range',
                                inline: true,
                                dateFormat: 'm/d/Y',
                                defaultDate: this.value,
                            })

                            this.$watch('value', () => picker.setDate(this.value))
                        },
                    }"
                    class="w-full max-w-sm"
                    >

                    <input id="rangeValue" class="w-full rounded-md border border-gray-200 px-3 py-2.5 hidden" x-ref="picker" type="text">
                    <button onclick="dateRange()">Next</button>

                </div>

                <script>
                    function dateRange() {

                        var date = document.getElementById("rangeValue").value;

                        localStorage.setItem("dateRange", date);

                        localStorage.setItem("start", start);
                        localStorage.setItem("end", end);
                        const start = localStorage.getItem("start");
                    }
                </script>