Calling `.flatpickr()` for the second time will blank-out previously set value

I have a page where form elements are dynamically pulled in and I call .flatpickr() so appropriate fields are shown with calendar.

However, if there are any other existing fields with flatpickr they will get cleared.

Easy demo.

• Got to: https://chmln.github.io/flatpickr/examples/
• Set date on first input you see
• Run $('.flatpickr').flatpickr()
• See field getting blanked

So it’s a bit unexpected and how do I work around this?

It doesn’t affect fields with ‘defaultDate’

Your Environment

• flatpickr version used: latest
• Browser name and version: n/a
• OS and version: ToasterOS

[kisuka]

Bit of a hacky solution, but you could do something like this:

var timeFields = document.querySelectorAll(".timefield"); flatpickr(timeFields[timeFields.length-1]);

You’re able to pass an element to the initialize call as documented here: https://flatpickr.js.org/instance-methods-properties-elements/

[GBH]

This is my use-case:

• Have few datepicker fields that I spent 3 hours populating
• Ajax brings in more form fields that I need to .flatpickr()
• All my existing form fields are blanked. defaultDate won’t help here.
• Cry

I used bootstrap timepicker before and it would not re-initialize like that.

One work-around I can think of is to manually check if flatpicker is initialized on the element before initializing. Kinda icky though.