Support Stimulus 2.0 Values API

[noahfpf]

Support for Stimulus 2.0's Values API would be useful, so that flatpickr options could be provided as attributes like data-flatpickr-the-option-value (in addition to deprecated support for data-flatpickr-the-option).

I think that support would be straight-forward and I could likely provide a PR.

(And thanks for providing this helpful and clean library!)

[adrienpoly]

yes this is definitely on my roadmap to support the value API. And some overalls clean up of this library, but I was quite busy with Stimulus Use recently.

Also initially I wanted to wait for this PR to be merged as I think it could simplify the implementation. But it is not mandatory to wait for that.

A PR would be very welcome and could be a starting point for a v2.0 of this package.

[noahfpf]

A PR would be very welcome and could be a starting point for a v2.0 of this package.

Do you want it to be backwards compatible with v1.0 this.data support, or to only support the new *-value attribute names? Either seems reasonable, with the latter an option if you're planning on a breaking 2.0 release.

[lukebooth]

Hi, just checking in to see if this is still on the table or not?

[noahfpf]

Not from me. We ended up coding the Flatpickr options that we care about as Stimulus controller values, and then transform them to Flatpickr options in the connect method. In case it's helpful, here's part of our controller:

import Flatpickr from 'stimulus-flatpickr';

/**
 * flatpickr (date / time picker) controller.
 *
 * http://flatpickr.js.org
 * https://github.com/adrienpoly/stimulus-flatpickr
 */
export default class extends Flatpickr {
  // For details on flatpickr options, see https://flatpickr.js.org/options/
  static values = {
    // If true, sets various config options to show just a time picker
    time: Boolean,
    // If true, sets various config options to show a date and time picker
    dateTime: Boolean,
    // CSS class name (or space-separated names) applied to the .flatpickr-calendar element
    class: String,
    // If true, the native date picker will be used in mobile browsers
    disableMobile: Boolean,
    // If true, the calendar is shown inline, i.e. permanently open
    inline: Boolean,
    // "single", "multiple", or "range"
    mode: String,
    // If set, the minimum date that can be selected, in YYYY-MM-DD format
    minDate: String,
  };

  initialize() {
    // Global config
    this.config = {
      allowInput: true,
      altInput: true,
      altFormat: 'n/j/Y',
      dateFormat: 'Y-m-d',
    };
  }

  connect() {
    // stimulus-flatpickr does not yet support the stimulus 2 values api, so any
    // values attrs we use need to be converted to the old data map api.
    // See https://flatpickr.js.org/options/ for details on supported options.

    if (this.hasModeValue) {
      this.data.set('mode', this.modeValue);
    }

    if (this.hasDisableMobileValue) {
      this.config.disableMobile = this.disableMobileValue;
    }

    if (this.hasInlineValue) {
      this.config.inline = this.inlineValue;
    }

    if (this.hasMinDateValue) {
      this.config.minDate = this.minDateValue;
    }

    if (this.dateTimeValue) {
      this.config = {
        ...this.config,
        enableTime: true,
        dateFormat: 'Y-m-d h:i K',
        altFormat: 'n/j/Y h:i K',
      };
    } else if (this.timeValue) {
      this.config = {
        ...this.config,
        enableTime: true,
        noCalendar: true,
        altInput: false,
        dateFormat: 'h:i K',
      };
    }

    super.connect();

    // Apply custom css classes to the .flatpickr-calendar element
    if (this.classValue) {
      const classes = this.classValue.split(' ');
      classes.forEach((class_) =>
        this.element._flatpickr.calendarContainer.classList.add(class_),
      );
    }
  }
}