shimadama
5/23/2018 - 11:10 AM

Datetime picker in Rails app

Datetime picker in Rails app

date_time_picker_rails.md
content_copyfile_download
  • Rendered
  • Source

Date time picker in Rails app

There are several options to make Date input in Rails application:

  • Default inputs from simple_form
  • HTML 5 date input
  • Text input with jQuery UI Date time picker
  • Other plugins for date input with Bootstrap 4

simple_form default date inputs

  • by default simple_form will show three selects for day/month/year for date.
= simple_form_for([:admin, @item]) do |f|

    = f.input :created_at, as: :date

it will look like this:

it is not so pretty.

HTML 5 Date input

HTML 5 inputs has types like date, datetime, datetime-local.

Note! The displayed date format differs from the actual value — the displayed date format will be chosen based on the set locale of the user's browser, whereas the date value is always formatted yyyy-mm-dd.

read more about HTML 5 date input:

Rails 5 application.

View:

  • with simple_form and Bootstrap 4
  • set value in format 'yyyy-mm-dd'
= simple_form_for([:admin, @item]) do |f|
 
.form-group.row
    .col-3
      %label{:for => "news_created_at"} Date
      %input#news_created_at{ :name => "news[created_at]", :type => "date", required: true, value: @item.created_at.strftime("%Y-%m-%d"), class: 'form-control' }

in Firefox in will look like this:

Controller:

  • access date in format 'yyyy-mm-dd'

  def update
    @item = model.find(params[:id])

    # params[:news][:created_at] # == '2018-05-23'

    @res = @item.update(item_params)


    #
    respond_to do |format|
      if @res
        format.html {
          redirect_to admin_news_index_path, notice: 'Saved'
        }
      else
        format.html { render :edit }
      end
    end
  end
  
  def item_params
    params.require(:news).permit(:title, :description, :image, :enabled, :created_at)
  end

simple_form and HTML 5 date input

you can tell simple_form to display date as HTML 5 input

= simple_form_for([:admin, @item]) do |f|
  
  .form-group.row
    .col-3
      %label{:for => "news_created_at"} Date
      = f.input :created_at, as: :date, html5: true

Text input with jQuery UI Datepicker

jQuery UI datepicker is tied to a standard form input field.

Read more:

View

  • use option dateFormat to set desired date format in the input
= simple_form_for([:admin, @item]) do |f|

  .form-group.row
    .col-3
      %label{:for => "news_created_at"} Date
      %input#news_created_at{ :name => "news[created_at]", :type => "text", required: true, value: @item.created_at.strftime("%Y-%m-%d"), class: 'form-control' }
        


:javascript
  $(function() {
    // init jQuery datepicker
    $('#news_created_at').datepicker({
      dateFormat: "yy-mm-dd"
    });
    
  });

Read more about jQuery UI datepicker:

Controller:

  • date comes in format 'yyyy-mm-dd'

  def update
    @item = model.find(params[:id])

    # params[:news][:created_at] # == '2018-05-23'

    @res = @item.update(item_params)


    #
    respond_to do |format|
      if @res
        format.html {
          redirect_to admin_news_index_path, notice: 'Saved'
        }
      else
        format.html { render :edit }
      end
    end
  end
  
  def item_params
    params.require(:news).permit(:title, :description, :image, :enabled, :created_at)
  end

Assets:

  • application.js
//= require jquery/dist/jquery
//= require jquery-ui-dist/jquery-ui
//= require jquery-ujs


//= require popper.js/dist/umd/popper.js
//= require bootstrap/dist/js/bootstrap
  • package.json
{
  "name": "mysite",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "github/maxivak/mysite.git",
  "author": "mmx <maxivak@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "jquery": "3.2.1",
    "jquery-ui-dist": "1.12.1",
    "jquery-ujs": "1.2.2",
    "bootstrap": "4.1.0",
    "popper.js": "1.14.3",
    "font-awesome": "4.7.0",
    "moment": "2.22.1"

  }
}

  • CSS

  • jquery-ui themes

  • option 1. npm package "jquery-ui-dist" - NOT WORK

application.scss:

@import 'font_awesome';
@import "bootstrap/scss/bootstrap";

@import "jquery-ui-dist/jquery-ui.theme.css"; // !! NOT WORK
  • npm package "jquery-ui-dist" is not integrated with Rails assets pipeline, and you will have problems with images (because of bad paths).
  • option 2. jquery CDN

Include jquery UI theme in view explicitly

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  • option 3. gem jquery-ui-rails

Gemfile:

gem 'jquery-ui-rails'
  • application.scss

@import 'jquery-ui/core';
@import 'jquery-ui/theme';

@import 'jquery-ui/draggable';
@import 'jquery-ui/resizable';
@import 'jquery-ui/selectable';
@import 'jquery-ui/sortable';

@import 'jquery-ui/accordion';
@import 'jquery-ui/autocomplete';
@import 'jquery-ui/button';
@import 'jquery-ui/datepicker';
@import 'jquery-ui/dialog';
@import 'jquery-ui/menu';
@import 'jquery-ui/progressbar';
@import 'jquery-ui/selectmenu';
@import 'jquery-ui/slider';
@import 'jquery-ui/spinner';
@import 'jquery-ui/tabs';
@import 'jquery-ui/tooltip';

Input with Datepicker will look like this

More themes:

Gemfile:

gem 'jquery-ui-themes'
  • application.scss
// include theme 'cupertino'
@import 'jquery-ui/cupertino';

Rails gems for Date picker with Bootstrap v4

OLD: