学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails6.1 | 民泊予約アプリ作成 | 28 | Datepicker

Ruby on Rails Rails6.1 民泊予約アプリ

↓↓クリックして頂けると励みになります。

ランキング参加中
プログラミング


【27 | 予約】 << 【ホーム】 >> 【29 | 予約機能実装】



jQuery日付ピッカー（Datepicker）は、jQueryを使用してウェブページ上で日付の選択を容易にするためのプラグインの一つです。
jQueryはJavaScriptライブラリであり、ウェブ開発者がウェブページのインタラクティブな要素を簡単に操作できるようにするツールです。
jQuery UIというライブラリは、さまざまなインタラクティブなUI要素を提供するためのプラグインを含んでおり、その中に日付ピッカーも含まれています。

jQuery日付ピッカーを使用することで、ユーザーはカレンダーから日付を選択できます。
これは、日付の入力フォームにカレンダーアイコンを表示し、ユーザーがカレンダーアイコンをクリックすると、カレンダーがポップアップ表示され、日付を選択できるようになります。

jQuery日付ピッカーは、日付のフォーマット、言語の設定、最小日付と最大日付の制限など、さまざまなオプションをカスタマイズできるため、多くのウェブアプリケーションで利用されています。
これはユーザーフレンドリーな方法で日付入力を提供し、日付の形式や制約に対するユーザーエクスペリエンスを向上させるのに役立ちます。


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


コマンド
yarn add jquery-ui@1.13.2


記述追加　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(16行目)

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.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

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

window.Noty = require("noty")

window.Dropzone = require("dropzone")

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



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

<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">
        <div class="card-body">
            <h5 class="card-title text-danger h4 font1 mb-4"><strong><span>予約はこちら</span></strong></h5>

            <div class="row">
                <div class="col-6">
                    <span class="badge bg-success">チェックイン　</span>
                    <%= f.text_field :start_date, readonly: true, placeholder: "ﾁｪｯｸｲﾝ", class: "form-control" %>
                </div>
                <div class="col-6">
                    <span class="badge bg-primary">チェックアウト</span>
                    <%= f.text_field :end_date, readonly: true, placeholder: "ﾁｪｯｸｱｳﾄ", class: "form-control" %>
                </div>
            </div>
            <div class="mt-4">
            <%= f.submit "予約する", id: "btn_book", class: "btn btn-danger w-100", disabled: true %>
        </div>
    </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(32行目)

    <!-- 日付ピッカー デザインsunny-->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/sunny/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
    <!-- 日付ピッカーの日本語化-->
    <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>VacationRental</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <!-- bootstrap5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

    <!-- noty3.1.4 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js" integrity="sha512-lOrm9FgT1LKOJRUXF3tp6QaMorJftUjowOWiDcG5GFZ/q7ukof19V0HKx/GWzXCdt9zYju3/KhBNdCLzK8b90Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css" integrity="sha512-0p3K0H3S6Q4bEWZ/WmC94Tgit2ular2/n0ESdfEX8l172YyQj8re1Wu9s/HT9T/T2osUw5Gx/6pAZNk3UKbESw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Kosugi+Maru&family=Rampart+One&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/dd8c589546.js" crossorigin="anonymous"></script>

    <!-- Dropzone5.5.1 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js" integrity="sha512-jytq61HY3/eCNwWirBhRofDxujTCMFEiQeTe+kHR4eYLNTXrUq7kY2qQDKOUnsVAKN5XGBJjQ3TvNkIkW/itGw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" integrity="sha512-zoIoZAaHj0iHEOwZZeQnGqpU8Ph4ki9ptyHZFPe+BmILwqAksvwm27hR9dYH4WXjYY/4/mz8YDBCgVqzc2+BJA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- 日付ピッカー デザインsunny-->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/sunny/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
    <!-- 日付ピッカーの日本語化-->
    <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>



日付フォームをクリックするとカレンダーが開くようになりました。
動作を確認してください。
ブラウザ確認
http://localhost:3000/rooms/1

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト




【27 | 予約】 << 【ホーム】 >> 【29 | 予約機能実装】



↓↓クリックして頂けると励みになります。

ランキング参加中
プログラミング

YAE C5 CLINIC(札幌美容クリニック)

関連記事（外部サイト）