Flatpickr Events are not triggered

[leroyiman]

The Problem I have is that my Events are not triggered. The Flatpickr works, but the change Method is not working sadly. Any JS Events are sadly not fired. I want to achieve to have a change method, so when somebody chooses a date or changes it, that I get the selected Day and can check in my available method, which hours are still available.

// ./controllers/flatpickr_controller.js
// import stimulus-flatpickr wrapper controller to extend it
`import Flatpickr from 'stimulus-flatpickr'`

// you can also import a translation file
`import { French } from 'flatpickr/dist/l10n/fr.js'`

// import a theme (could be in your main CSS entry too...)
`import 'flatpickr/dist/themes/dark.css'`

// create a new Stimulus controller by extending stimulus-flatpickr wrapper controller

export default class extends Flatpickr {
  initialize() {
    // sets your language (you can also set some global setting for all time pickers)
    this.config = {
      locale: French
    }

    console.log("Hello");
    console.log(Flatpickr);
  }

  open(){
    console.log("Are you Open?")
  }

  // all flatpickr hooks are available as callbacks in your Stimulus controller

  change(selectedDates, dateStr, instance) {
    console.log('the callback returns the selected dates', selectedDates)
    console.log('but returns it also as a string', dateStr)
    console.log('and the flatpickr instance', instance)
  }
}`

// ./packs/applitcation.js
import "controllers"
import "bootstrap"

// document.addEventListener('turbolinks:load', () => {
//   flatpickr("[data-behavior='flatpickr']", {
// ./packs/application.js
import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'

const application = Application.start()
const context = require.context('../controllers', true, /\.js$/)
application.load(definitionsFromContext(context))

// import Flatpickr
import Flatpickr from 'stimulus-flatpickr'

// Import style for flatpickr
require("flatpickr/dist/flatpickr.css")

// Manually register Flatpickr as a stimulus controller
application.register('flatpickr', Flatpickr)

// Day Booking Field
 <%= f.text_field :day, class: 'calender_input_flatpickr', data:{
                        controller: "flatpickr",
                        flatpickr_date_format: "d.m.Y",
                        flatpickr_min_date: Time.zone.now,
                      }, placeholder: "Datum auswählen",
                        label: "Startdatum" %>

[BobWalsh]

Having the same issue. tried to implement custom controller - same thing.

[Svashta]

I have similar issue. I am trying to use close (aka onClose) hook, but it is triggered immediately when i select a first value in range mode. Nothing is triggered when selecting a second value or on actual close.

[nicolrx]

Same issue here, I guess there is an issue with Rails 7? Any idea @adrienpoly?

[Morganjackson]

This worked for me with [email protected] and [email protected] installed via yarn.

import Flatpickr from 'stimulus-flatpickr'
import { Turbo } from "@hotwired/turbo-rails"
import "flatpickr/dist/flatpickr.css";

export default class extends Flatpickr {
  static targets = [ "text", "startDate", "endDate" ]

  connect() {
    super.connect()
  }

  change(selectedDates, _dateStr, _instance) {
    Turbo.visit(`/dates/${selectedDates[0].toISOString().substring(0,10)}`)
  }
}