maxivak/date_time_picker_rails.md

## date_time_picker_rails.md

      
    Raw
  

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

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