Stimulus Discourse

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:


Conventions for shareable packages
#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!


#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:


#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


#6

Really nice work, Adrien! Thank you for sharing.


#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