Preloading input value does not work with mode: "range"

[Sage Livingstone]

I'm trying to preload a range into the input value field, but for mode: 'range' it is not loading. (This works for mode:single) I've tried passing in the formats: "2023-10-10 to 2023-10-20", "2023-10-10,2023-10-20", and using Vue to pass ["2023-10-10", "2023-10-20"]. At best, it will strip the first date out of the string and select the first half of the range, but the second half does not select. When passing an array, nothing selects.

(Neither of these work:)

<input type="text" value="2023-10-10 to 2023-10-20" placeholder="Select Date.." class=date>

<input type="text" value="2023-10-10,2023-10-20" placeholder="Select Date.." class=date>

Nor with Vue:

<input type="text" :value="['2023-10-10', '2023-10-20']" placeholder="Select Date.." class=date>

Fiddle showing the issue:
https://jsfiddle.net/sagewlivingstone/m2tvo87k/5/

Your Environment

• flatpickr version used: latest
• Browser name and version: Chrome 117.0.5938.150
• OS and version: Windows 11

[David Lazar]

I wish this worked too. It is easy to use this plugin to collect 2 dates, but then if you ever refresh and want to present the already saved dates, it is not possible to initialize the dates to what they were initially set to. That bites! I wonder what the best approach to fixing this is.

[ourko1e]

Hi, it already works, just setup like that 👍

const fp = flatpickr(".date", {
dateFormat: "Y-m-d",
mode: "range",
altInput: true,
altFormat: "d.m.Y",
});
Fabien