Ajouter un DateTimepicker sur votre app Ruby on Rails

Nous allons voir comment ajouter un sélecteur de date et de temps sur Ruby on Rails. Ainsi, vos utilisateurs pourront sélectionner une date et une période à partir d’un calendrier. Dans cet exemple, nous allons utiliser le datetimepicker de bootstrap.

Voila ce que nous allons obtenir !

datetimepicker : résulat

DateTimepicker: C’est parti !

Créez un nouveau projet avec le nom de votre choix, ici “datetimepicker” en précisant l’utilisation d’une base de données PostgreSQL.

$ rails new datetimepicker -d postgresql
$ cd datetimepicker
$ spring stop
$ rails generate controller contacts index
$ rails generate model Contact appointment:datetime
$ git init
$ git add .
$ git commit -m "First commit"
$ hub create
$ git push origin master

Ajoutez les gems ‘simple_form‘, ‘bootstrap-sass‘, ‘bootstrap3-datetimepicker-rails‘, ‘bootstrap-sass‘ et ‘momentjs-rails‘ à votre Gemfile.

# Gemfile
# [...]
gem 'simple_form'
gem 'bootstrap-sass'
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.47'
gem 'jquery-rails'
gem 'momentjs-rails', '>= 2.9'

Installez les Gems à l’aide de la commande bundle depuis l’invite de commande.

$ bundle install
$ rails generate simple_form:install --bootstrap

Renommez le fichier application.css en application.scss

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss 

Importez les styles Bootstrap dans application.scss

# app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap-datetimepicker'; 

Ajoutez ‘moment‘ au fichier javascript application.js

# app/assets/javascripts/application.js
//= require jquery
//= require rails-ujs
//= require moment
//= require moment/fr.js
# [...] 

Ajoutez la route pour pointer sur notre index.html.erb

# app/config/routes.rb Rails.application.routes.draw do
 root 'contacts#index'
 resources :contacts, only: [:index, :create, :show]
end 

Éditez le fichier index.html.erb pour y ajouter le code ci-dessous :

<h1>Datetimepicker</h1>
<%= simple_form_for :contact, url: :contacts, method: :post do |f| %>
<div class="container">
<div class="row">
<div class='col-sm-6 col-sm-offset-3'>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<%= f.input :appointment, label: false, placeholder: "Sélectionnez la date et l'heure", class: "form-control" %>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="form-group">
<%= f.submit "C'est parti", class: "btn btn-primary" %>
</div>
</div>
</div>
</div>
<% end %>

Créez le fichier date_time_picker.js dans app/assets/javascripts/

//app/assets/javascripts/date_time_picker.js $( document ).on('turbolinks:load', function() {
$('#datetimepicker').datetimepicker({
locale: 'fr',
sideBySide: true,
format: "DD-MM-YYYY h:mm A"
});
});

Le contrôleur Contact

Ajoutez le code ci-dessous à votre contacts_controlleur.rb

class ContactsController < ApplicationController
def index
end

def new
end

def create
@contact = Contact.new(contact_params)
if @contact.save
redirect_to contact_path(@contact)
else
render 'index'
end
end

def show
@contact = Contact.find(params[:id])
end

private
def contact_params
params.require(:contact).permit(:appointment)
end
end

Ajoutons un peu de style !

datetimepicker : ajoutons du style !

Créer le fichier contact.scss dans app/assets/stylesheets/contact.scsss et ajouter le code pour centrer certains éléments comme le titre

# app/assets/stylesheets/contact.scss h1,
.form-group {   
   text-align: center; 
} 

Dans le fichier application.scss, importez notre contact.scss

# app/assets/stylesheets/application.scss
# [...]
@import "contacts"; 

Vous n’avez plus qu’à lancer votre serveur depuis l’invite de commande avec rails s et à vérifier le résultat depuis votre navigateur

$ rails s 

Pour voir le résultat, cliquez ICI

Pour afficher les sources, cliquez ICI

Sources

https://github.com/twbs/bootstrap-sass

https://github.com/plataformatec/simple_form

https://github.com/derekprior/momentjs-rails

https://github.com/rails/jquery-rails

https://github.com/jquery-ui-rails/jquery-ui-rails

https://github.com/Eonasdan/bootstrap-datetimepicker

signature Pierre-Christophe

Aucun commentaires

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.