Add a DateTimepicker to your Ruby on Rails app

We will see how to add a date and time selector to Ruby on Rails. This way, your users will be able to select a date and period from a calendar. In this example, we will use the bootstrap datetimepicker.

That’s what we’re going to get !

datetimepicker in action

DateTimepicker: Let’s go !

Create a new project with the name of your choice, here “datetimepicker” specifying the use of a PostgreSQL database.

$ 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 

Add the gems’simple_form‘,’bootstrap-sass‘,’bootstrap3-datetimepicker-rails‘,’bootstrap-sass‘ and ‘momentjs-rails‘ to the Gemfile

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

Install the Gems using the bundle command from the command prompt.

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

Rename the file application.css to application.scss

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

Import Bootstrap styles into application.scss

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

Add ‘moment‘ to the javascript file application.js

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

Add the route to point to our index.html.erb

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

Edit the index.html.erb file to add the code below :

<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: "Select the date and time", class: "form-control" %>
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
     </div>
    </div>
   <div class="form-group">
   <%= f.submit "Let's get started", 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"
  });
}); 

The Contact Controller

Add the code below to your contacts_controller.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

Let’s add a little style !

Let's add a little style !

Create the file contact.scss in app/assets/stylesheets/contact.scsss and add the code to center some elements like the title

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

In the application.scss file, import our contact.scss

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

All you have to do is launch your server from the command prompt with rails s and check the result from your browser

$ rails s

To see the result, click HERE

To view the sources, click HERE

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-Cgristophe

No Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.