flatpickr StimulusJS using Ruby on Rails

One of the common issue of the browser is the type="date" that cannot interpret the HTML5, one of the example is Safari. 

Using flatpickr and applying the latest technology of Ruby on Rails with StimulusJS we can solve all the issue on the browser for the date as our calendar and or time and date.

Here is my video on how to solve and install the flatpickr using stimulusjs-flatpickr wrapper. 

Let's deep dive-in in our codes: 

First step: 

1. Create your new rails application, if you have existing proceed adding StimulusJS. For reference: https://stimulus.hotwire.dev/

Opps make it sure you are using rails5 or rails6 if you have existing application. 

2. Add in webpacker package using the command:

$ yarn add flatpickr
$ yarn add stimulus-flatpickr

3. Manually add the following: to your controller or customise controller of flatpickr inside app/javascript/controller/index.js in my case I used index.js inside controller. 

// 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)

For more information: 

4. Now you are ready to add flatpickr data using stimulus wrapper. In my case I created scaffold post with title and date string. you can also create a date:date instead of string. 

Here's the example code: 

  <%= f.text_field :date,
      data: {
        controller: "flatpickr",
        flatpickr_alt_format: t("date.formats.long"),
        flatpickr_alt_input: true,
        flatpickr_min_date: Time.zone.now,
      } %>

You can create different format from ruby date formatted. 

5. Now try to run your rails application to Safari and Chrome and or other browser.

Ps. If you want to change the design, you can access the nodes_modules/flatpickr/dist/themes then you can change the design/layout into different like airbnb or dark, you can also customise the .css using webpack stylesheet. for more information: 

References:

StimulusJS
flatpickr
StimulusJS Wrapper

Thank you for watching!

Related Items Ruby on Rails