Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1656

Easepicker's LockPlugin not working in Svelte

$
0
0

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.


Viewing all articles
Browse latest Browse all 1656

Trending Articles