1893 avis : 5/5 ⭐️⭐️⭐️⭐️⭐️

Wordpress développement

Developpeur wordpress fullstack

flatpickr exemple rails

Ajouter Flatpickr rails

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
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
stimulus controller flatpickr

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

import flatpickr from "flatpickr";
import flatpickr controller stimulus

Puis dans la méthode connect ajouter ce code :

 new flatpickr(this.element, {
      enableTime: true
  })
ajout code pour flatpickr js

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>
installation de flatpickr

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";
style flatpickr

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

Articles dans la thématique Wordpress :
enregistrement dns
Comprendre les DNS / Gérer

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. Les enregistrements DNS (Domain Name System) sont des entrées qui permettent de lier les noms de domaines aux adresses IP correspondantes. Ils jouent un.

Lire l'article
Gérer son nom de domaine sur Heroku

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. Un nom de domaine est similaire à une adresse postale. Il est important pour votre application rails qu’elle soit accessible sur le nom de.

Lire l'article
scraper en ruby
Créer un scraper automatisé en ruby

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. Le scraping vous permet d’extraire de la donnée d’un site internet afin de la traiter localement. L’intérêt du scraping est de pouvoir manipuler, traiter,.

Lire l'article