A Flatpickr Wrapper for Stimulus

1

Hey

As an experiment, I have built a standard wrapper of the Flatpickr library.

One of my first goals was to publish a package on NPM (first time… so far from perfect) and also to package in a Stimulus way a standard library.

Overall this wrapper doesn’t bring a lot of magic but makes all Flatpickr options available as HTML tags and hooks available in the Controller. Therefore you can directly enable and configure a DateTime picker in your erb/html view with the data-attributes and extend a standard stimulus-flatpickr controller to add some business logic.

This was inspired by several initiatives:

Comments, issues, PR Welcome of course
:pray:

3 Likes
2

I’m using this library right now and love it! Was just about to implement something on my own but came across this. Thanks!

1 Like
3

Great glad to here your feedback @kylekeesling.
This means that this package has at least 2 users :slight_smile:.

Don’t hesitate to create an issue if you find out something.

4

We are also using this package :smile:

1 Like
5

Hello

A bit of news here, I started this stimulus-flatpickr wrapper project as an experiment. I used it in several of my personal projects and so far it has proven its value from my point of view.

I recently took the time to move it to v1. which I just released on npm :tada:…
This latest version brings a few additional features but mostly it is all the test suits that are now in place to make it a battlefield tested product. thanks, @jwald1 for showing me the way.

I have created a sample app to show it in action. The really nice thing is how nicely it works with Turbolinks out of the box :clap: .

You can find also a full introduction article on dev.to

and the package repo

1 Like
6

Really nice work, Adrien! Thank you for sharing.

2 Likes
7

I tried to use your wrapper around flatpickr, but the range mode wasn’t working.

https://flatpickr.js.org/examples/#range-calendar

8

@sfusato will look into it. I am pretty sure I got it to work at some point. Will either correct it or publish an example

9

Has there been a fix to the range mode?
For me it fires on the first date selection, not the second.

10

Hello @sfusato, @petter

Here is an example using the range mode of Flatpickr.
the change event is fired for the first and second selection (see console.log)
the close event is fired for the second selection

Is this what you are looking for?

Adrien

11

Yes, thanks! It is working fine :slight_smile: I had a onchange event on the input field :man_facepalming:

1 Like
12

hey @adrienpoly,

Dos this still work with rails7, ruby3.3

i followed the same installation process, but doesn’t seems to work

i’m just getting the text input, there is no datepicker