Rails6.0 | 民泊予約サイトの構築 | 80 | Bootstrap | jQuery日付ピッカー - 学生向けプログラミング入門

[７９]Bootstrap |予約コントローラとビュー<<　[ホームに戻る]　>> [８１]Bootstrap | 予約フォーム

 「31 | jQuery日付ピッカー」をBootstrapの記述に変更します。

jqueryはすでにインストールされているので、「jquery-ui」をインストールします。

コマンド
yarn add jquery-ui

記述追加　config\webpack\environment.js(14行目)

environment.toWebpackConfig().merge({
    resolve: {
        alias: {
            'jquery': 'jquery/src/jquery'
        }
    }
});

config\webpack\environment.js

const { environment } = require('@rails/webpacker')

module.exports = environment

const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)

environment.toWebpackConfig().merge({
    resolve: {
        alias: {
            'jquery': 'jquery/src/jquery'
        }
    }
});

「app\javascript\packs\application.js」ファイルに以下の記述を追加します。

記述追加　app\javascript\packs\application.js(13行目)

require("jquery-ui/ui/widgets/datepicker");

app\javascript\packs\application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")

require("jquery-ui/ui/widgets/datepicker");

import 'bootstrap';
import '../stylesheets/application';

window.Noty = require("noty")
window.Dropzone = require("dropzone")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require("trix")
require("@rails/actiontext")

記述追加　app\views\reservations\_form.html.erb(27行目)

<script>
  $(function() {
    $('#reservation_start_date').datepicker({
      dateFormat: 'dd-mm-yy'
    });
    $('#reservation_end_date').datepicker({
      dateFormat: 'dd-mm-yy'
    });
  });
</script>

app\views\reservations\_form.html.erb

<%= form_for([@room, @room.reservations.new]) do |f| %>

    <div class="card" style="width: 24rem; margin-left: -70px;">
    <div class="card-header">
 
    </div>
    <div class="card-body">
    <form>
    <div class="form-row">
      <div class="col">
        <%= f.text_field :start_date, readonly: true, placeholder: "チェックイン", class: "form-control" %>
      </div>
      <div class="col">
      <%= f.text_field :end_date, readonly: true, placeholder: "チェックアウト", class: "form-control" %>
      </div>
    </div>
  </form>

    <br/>
      <%= f.submit "予約する", id: "btn_book", class: "btn btn-danger btn-block", disabled: true %>

    </div>
  </div>
 
<% end %>

<script>
  $(function() {
    $('#reservation_start_date').datepicker({
      dateFormat: 'dd-mm-yy'
    });
    $('#reservation_end_date').datepicker({
      dateFormat: 'dd-mm-yy'
    });
  });
</script>

以下のサイトで日付ピッカーのデザインを変更することができます。
code.jquery.com

デザインの名前をコピーしてリンクの名前を変更します。
今回は「sunny」を使います。

記述追加　app\views\layouts\application.html.erb(14行目)

    <!-- 日付ピッカー　デザイン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>MinpakuBs</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- Googleフォント　-->
    <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">    
    <!--　アイコン　Font Awesome　-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.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>

    <!-- ナビゲーションバー　-->
    <%= render  "shared/navbar" %>

    <!-- noty -->
    <%= render 'shared/notification' %>

    <%= yield %>
  </body>
</html>