I have a svelte (3.59.2) project where I am implementing easepicker on a conditionally rendered div. Everything is working well, except the LockPlugin functionality.
Imports:
import {easepick} from '@easepick/core';import {RangePlugin} from '@easepick/range-plugin';import {LockPlugin} from '@easepick/lock-plugin';
Since the easepicker can only be applied if the conditionally rendered div is, well, rendered, the init is done in a function so it can be done whenever required:
let plugins = [LockPlugin, RangePlugin];async function initDatePicker() { if (picker) { picker.destroy(); } await tick(); const element = document.getElementById('datepicker'); if (element) { picker = new easepick.create({ element, css: ['https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css', 'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css', customCSS], plugins, LockPlugin: { minDate: new Date(2023, 0, 1), maxDays: 5 } }); }}
All of the range features work whenever I create a datepicker in any compoment, but the LockPlugin ones don't seem to do anything. There is no error, but there is no functionality.As far as I can tell from the documentation and the examples, this should work.I have the latest version of easepick (1.2.1).
For testing reasons I have simplified my entire component down to just this:
<script lang="ts"> import {onMount} from 'svelte'; import {easepick} from '@easepick/core'; import {RangePlugin} from '@easepick/range-plugin'; import {LockPlugin} from '@easepick/lock-plugin'; let picker: easepick.Core; onMount(() => { picker = new easepick.create({ element: document.getElementById('datepicker'), css: ['https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css','https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css', ], plugins: [RangePlugin, LockPlugin], LockPlugin: { minDate: new Date(2023, 0, 1), maxDays: 5 }, }); })</script><input id="datepicker" type="text" />
And it still won't work.