How to set default dates for Range Calendar?

[kzkn]

I want to use the below feature with stimulus-flatpickr. https://flatpickr.js.org/examples/#preloading-range-dates

But, for example, setting data-flatpickr-default-date='["2019-10-01","2019-10-02"]' to an element, flatpickr shows only 2019-10-01. Is there a way to set the both dates?

Maybe relates: #29

[kzkn]

Here is my workaround that I'm using currently:

<input
  type="text"
  data-controller="flatpickr"
  data-flatpickr-mode="range"
  data-flatpickr-my-default-date="[&quot;2019-11-13&quot;,&quot;2019-11-14&quot;]"
>

export default class extends Flatpickr {
  initialize() {
    this.config = { /* blah, blah, blah */ }

    const defaultDate = this.data.get('my-default-date')
    if (defaultDate) {
      let val
      try {
        val = JSON.parse(defaultDate)
      } catch {
        val = defaultDate
      }
      this.config['defaultDate'] = val
    }
  }
  // ...
}

[adrienpoly]

@kzkn Interesting solution let me look how I could port that as a standard feature of the package

[kzkn]

How is this?

// index.js
_arrayOrString(option) {
  const val = this.data.get(option)
  try {
    return JSON.parse(val)
  } catch {
    return val
  }
}

// config_options.js
arrayOrStringOptions = ['defaultDate']

export const options = {
  string: stringOptions,
  boolean: booleanOptions,
  date: dateOptions,
  array: arrayOptions,
  number: numberOptions,
  arrayOrString: arrayOrStringOptions
}

[adrienpoly]

yes that was my idea feel free to open a PR

[adrienpoly]

I have released a new 1.2.0-1 beta version with those change https://www.npmjs.com/package/stimulus-flatpickr/v/1.2.0-1

[fritzmg]

I am having the same issue - but with version 1.4.0 which should include the fix of #43. I defined

<input type="text" name="daterange" 
    data-controller="flatpickr" 
    data-flatpickr-date-format="d.m.Y" 
    data-flatpickr-mode="range" 
    data-flatpickr-default-date="['25.04.2024','25.05.2024']">

for example, but it always only shows 25.04.2024 as the default date - instead of the given date range 🤔

// oh, nvm, it needs to be data-flatpickr-default-date='["25.04.2024","25.05.2024"]' of course, otherwise it's not valid JSON.