jacobmischka/svelte-flatpickr

Error when more than one Flatpickr on a page

stav opened this issue · 3 comments

stav commented

If I have more than one <Flatpickr> on a page I get the error:

Uncaught (in promise) TypeError: selectedDates is undefined
getModeValue svelte-flatpickr.js:177

Versions:

flatpickr@^4.5.2:
  version "4.6.13"
  resolved "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz"

svelte-flatpickr@^3.3.4:
  version "3.3.4"
  resolved "https://registry.npmjs.org/svelte-flatpickr/-/svelte-flatpickr-3.3.4.tgz"
  dependencies:
    flatpickr "^4.5.2"

I had to comment the usage of the second instance to get it to work:

https://github.com/stav/sveltekit-blog-app/blob/a8ca20bf2d72386af30efcec16f11fd8afad9dc8/src/routes/admin/jobs/form.svelte#L41

<FormField label="Beginning Date" name="beg_date">
  <DateField name="beg_date" value={formItem?.beg_date ?? ''} />
</FormField>

<!-- Uncaught (in promise) TypeError: selectedDates is undefined -->
<!-- <FormField label="Ending Date" name="end_date">
  <DateField name="end_date" value={formItem?.end_date ?? ''} />
</FormField> -->

Component is here: https://github.com/stav/sveltekit-blog-app/blob/a8ca20bf2d72386af30efcec16f11fd8afad9dc8/src/lib/date-field.svelte#L14

Am I missing a documented way to have multiple data input fields on the same page?

stav commented

In getModeValue from svelte-flatpickr.js on line 177 the problem is that instance2 is an Array and selectedDates is undefined:

instance2
Array [ {…}, {…} ]
0: Object { l10n: {…}, parseDate: createDateParser(date, givenFormat, timeless, customLocale) , _handlers: [], … }
1: Object { l10n: {…}, parseDate: createDateParser(date, givenFormat, timeless, customLocale), _handlers: [], … }
jacobmischka commented

It's because you're explicitly giving it the same id each time in your date field component (element="#date-picker"). IDs need to be unique. You can either generate a unique ID, or not specify one at all, and should work.

stav commented

Thank you @jacobmischka of course worked like a charm.

<Flatpickr
  dateFormat="Y-m-d"
  element="#date-picker-{name}"
>
  <div class="flatpickr" id="date-picker-{name}">
  • 👍1