Save Flatpickr Date Range to Local Storage with AplineJS Persist

Question

I am attempting to find some information on how I may use Flatpickr daterange to have a user select a date range and save it to local storage when clicking the "next" button.

I'd like to have a Flatpickr date range calendar on a page and when the user selects a date range and clicks next, that data would be stored so that I can use it on another page to continue with a full form where that data would be injected into two fields and passed along.

Currently I am stuck at just simply being able to store that data in the console.log and I am unable to find any resources that will guide me in the direction I am looking to go.

            <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

This is what ended up working for me. It may not be perfect, but it does store the range and let's me access it on other pages.

Improvements are encouraged!

<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>