Qu’est ce que flatpickr sur rails ?

Flatpickr est une librairie javascript disponible sur npm. Elle vous permet de styliser vos formulaires de réservation par exemple. Cette librairie est très facilement accessible pour rails.

Installer flatpickr sur votre application rails

Avant de commencer, une fois votre rails new lancé, vos routes, controllers et fichiers de vues en place, nous allons devoir ajouter la librairie javascript sur notre projet rails. Pour cela nous utilisons la commande dans le terminale :

yarn add flatpickr

Coder flatpickr avec stimulus

Pour commencer à utiliser flatpickr; il vous faudra générer un controller stimulus sur votre application rails. Utilisez la commande :

rails g stimulus flatpickr

Une fois le controller généré, nous allons importer la librairie flatpickr sur notre controller :

import flatpickr from "flatpickr";

Puis dans la méthode connect ajouter ce code :

 new flatpickr(this.element, {
      enableTime: true
  })

Configurer notre formulaire simple form

Pour ajouter le controller stimulus à notre simple form pour styliser nos dates, nous devons transformer nos inputs de notre schema de type date en string. Pour cela nous allons insérer le : as: :string. Puis nous allons également ajouter le controller sur nos champs de dates. Voici un exemple du rendu :

<div class="container">    
    <%= simple_form_for [@flat, @booking] do |f| %>
    <%= f.input :startbook_time, as: :string, input_html: { data: { controller: 'flatpickr' } } %>
    <%= f.input :endbook_time, as: :string, input_html: { data: { controller: 'flatpickr' } } %>
    <%= f.input :picture, as: :file %>
    <%= f.button :submit %>
    <% end %>
</div>

Ajouter le style de flatpickr

Qui dit style, dit ajout des librairies externes de css ou de scss. Pour cela rendez-vous dans le fichier application.scss puis ajouter ces deux lignes :

@import "flatpickr/dist/flatpickr";
@import "flatpickr/dist/themes/airbnb";

Tester notre vue !

Bravo, si vous avez tout bien suivi correctement il ne reste plus qu’à tester notre booking (vue sur laquelle nous avons installé flatpickr). Coupez puis relancer bien un serveur après un yarn add flatpickr