fix(date-picker): load rangePlugin dynamically

src/DatePicker/DatePicker.svelte

@@ -128,9 +128,8 @@
     },
   });
 
-  afterUpdate(() => {
+  async function initCalendar() {
-    if ($hasCalendar && !calendar) {
+    calendar = await createCalendar({
-      calendar = createCalendar({
       options: {
         appendTo: datePickerRef,
         dateFormat,
@@ -165,6 +164,7 @@
     });
   }
 
+  afterUpdate(() => {
     if (calendar) {
       if ($range) {
         calendar.setDate([$inputValueFrom, $inputValueTo]);
@@ -189,6 +189,7 @@
   $: valueFrom = $inputValueFrom;
   $: inputValueTo.set(valueTo);
   $: valueTo = $inputValueTo;
+  $: if ($hasCalendar && !calendar && inputRef) initCalendar();
 </script>
 
 <svelte:body

src/DatePicker/DatePickerInput.svelte

@@ -72,9 +72,7 @@
 
   add({ id, labelText });
 
-  onMount(() => {
+  $: if (ref) declareRef({ id, ref });
-    declareRef({ id, ref });
-  });
 </script>
 
 <div

src/DatePicker/createCalendar.js

@@ -1,5 +1,4 @@
 import flatpickr from "flatpickr";
-import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 
 let l10n;
 
@@ -48,7 +47,7 @@ function updateMonthNode(instance) {
   }
 }
 
-function createCalendar({ options, base, input, dispatch }) {
+async function createCalendar({ options, base, input, dispatch }) {
   let locale = options.locale;
 
   if (options.locale === "en" && l10n && l10n.en) {
@@ -61,6 +60,13 @@ function createCalendar({ options, base, input, dispatch }) {
     locale = l10n.en;
   }
 
+  let rangePlugin;
+
+  if (options.mode === "range") {
+    const importee = await import("flatpickr/dist/esm/plugins/rangePlugin");
+    rangePlugin = importee.default;
+  }
+
   return new flatpickr(base, {
     ...options,
     allowInput: true,