記述追加 GemFile(75行目)
gem 'jquery-ui-rails', '~> 5.0'
GemFile
source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.7', '>= 5.0.7.1' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', '< 2.0' # Use Puma as the app server gem 'puma', '~> 3.0' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platform: :mri end group :development do # Access an IRB console on exception pages or by using <%= console %> anywhere in the code. gem 'web-console', '>= 3.3.0' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] #bootstrap gem 'bootstrap-sass', '~> 3.4.1' #デバイス gem 'devise', '~>4.2' #Gravatar gem 'gravtastic' #フラッシュメッセージ gem 'toastr-rails', '~> 1.0' #日本語化 gem 'rails-i18n' #画像アップロード gem 'paperclip', '~> 5.1.0' #googleマップ gem 'geocoder', '~> 1.4' #アマゾンS3 gem 'aws-sdk', '~> 2.8' #日付ピッカー gem 'jquery-ui-rails', '~> 5.0'
コマンド
bundle
記述追加 app\assets\javascripts\application.js
「//= require jquery-ui/datepicker」の記述追加(16行目)
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require bootstrap-sprockets //= require jquery_ujs //= require jquery-ui/datepicker //= require toastr //= require gravtastic //= require turbolinks //= require_tree .
記述更新 app\views\reservations\_form.html.erb
コピーしてファイルの内容を置き換えてください。
<%= form_for([@room, @room.reservations.new]) do |f| %> <%= f.text_field :start_date, readonly: true, placeholder: "チェックイン日", class: "form-control datepicker" %> <%= f.text_field :end_date, readonly: true, placeholder: "チェックアウト日", class: "form-control datepicker" %> <br/> <%= f.submit "予約する", class: "btn btn-normal btn-block" %> <% end %> <script> $(function() { $('#reservation_start_date').datepicker({ dateFormat: 'dd-mm-yy' }); $('#reservation_end_date').datepicker({ dateFormat: 'dd-mm-yy' }); }); </script>
以下のサイトで日付ピッカーのデザインを変更することができます。
jQuery CDN
デザインの名前をコピーしてリンクの名前を変更します。
今回は「sunny」を使います。
記述追加 app\views\layouts\application.html.erb(13行目)
<!-- 日付ピッカー デザインsunny--> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css"> <!-- 日付ピッカーの日本語化--> <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
app\views\layouts\application.html.erb
<!DOCTYPE html> <html> <head> <title>Minpaku</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- googleフォント --> <link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet"> <!-- アイコン --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- 日付ピッカー デザインsunny--> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css"> <!-- 日付ピッカーの日本語化--> <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script> </head> <body> <!-- _navbar.html.erb をレンダーする --> <%= render 'shared/navbar' %> <%= render 'shared/message' %> <!-- ページをコンテナに格納 --> <div class="container"> <%= yield %> </div> </body> </html>