Flatpickr AlpineJS 在危险范围选择上坚持插件

Answer 1

这是一个可能的解决方案：

<div x-data="{
                    thePicker: null,

                    chosenDates: $persist([]).using(sessionStorage).as('_x_range'),

                    init() {
                        this.thePicker = flatpickr(this.$refs.picker, {
                            mode: 'range',
                            inline: false,
                            dateFormat: 'm/d/Y',
                            showMonths: 2,
                            defaultDate: this.chosenDates,
                            onChange: (selectedDates) => {this.chosenDates = [...selectedDates];}
                        });
                    },
                }"
>

    <div class="flex items-center flex-1 gap-2 overflow-hidden border border-gray-500 rounded-lg">

        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ml-4 bi bi-calendar-event-fill" viewBox="0 0 16 16">
            <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/>
        </svg>

        <input type="text"
               x-ref="picker"
               placeholder="Add dates"
               class="p-0 py-4 placeholder-gray-600 border-0 bg-none focus:ring-0"
        >

        <span title="Clear"
              class="text-blue-600 cursor-pointer"
              @click="thePicker.clear()"
        >
            X
        </span>

    </div>

    <div x-text="chosenDates"> </div>

</div>

日期范围存储在 Alpine chosenDates 变量中，该变量通过 Persist 进行持久化并初始化为空数组。
当日期选择器初始化时，chosenDates变量用于填充defaultDate参数。
选择日期范围后，flatpicker 会触发 onChage 事件，因此我使用它将新范围复制到 chosenDates 变量中。
我添加了一个 “clear” 按钮以 flatpicker 方式重置输入字段，调用 clear() 方法（这是一个简单的示例），然后我必须将 flatpicker 引用存储在 thePicker 中变量.
我还添加了一个

通过 x-text 显示 choosenDates

的内容