Datetime picker in Rails app

date_time_picker_rails.md

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:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

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:

• https://jqueryui.com/datepicker/

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:

• https://jqueryui.com/datepicker/#date-formats - date formats
• http://api.jqueryui.com/datepicker/ - options of 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 <[email protected]>",
  "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:

• use gem jquery-ui-rails to add themes

Gemfile:

gem 'jquery-ui-themes'

• application.scss

// include theme 'cupertino'
@import 'jquery-ui/cupertino';

• see the list of available themes: https://github.com/fatdude/jquery-ui-themes-rails.

Rails gems for Date picker with Bootstrap v4

• A Datepicker for Bootstrap, integrated with Rails assets pipeline

• https://tempusdominus.github.io/bootstrap-4/

• https://github.com/tempusdominus/bootstrap-4

• https://github.com/xdan/datetimepicker

• https://github.com/uxsolutions/bootstrap-datepicker

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

• https://github.com/Bialogs/bootstrap4-datetime-picker-rails

• https://github.com/Nerian/bootstrap-datepicker-rails

OLD:

• https://github.com/TrevorS/bootstrap3-datetimepicker-rails

+1 Thanks for compiling!

I just spent so much time fiddling with bootstrap3-datetimepicker-rails to see if it would do anything in Bootstrap 4. I can confirm it does not.

nice!!!