Datetime picker in Rails app
There are several options to make Date input in Rails application:
= 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 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:
= 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:
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
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
jQuery UI datepicker is tied to a standard form input field.
Read more:
View
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:
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:
//= 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
{
"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
application.scss:
@import 'font_awesome';
@import "bootstrap/scss/bootstrap";
@import "jquery-ui-dist/jquery-ui.theme.css"; // !! NOT WORK
Include jquery UI theme in view explicitly
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Gemfile:
gem 'jquery-ui-rails'
@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'
// include theme 'cupertino'
@import 'jquery-ui/cupertino';
A Datepicker for Bootstrap, integrated with Rails assets pipeline
OLD: