Rails7.1 | 民泊予約アプリ作成 | 29 | Datepicker - 学生向けプログラミング入門

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

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

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

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

releases.jquery.com

日付ピッカー（Datepicker）を利用するには、「jQuery」「jQuery-UI」が必要ですが、Importmapを利用してCDNを読み込んでもうまく動作しないため、「app\views\layouts\application.html.erb」ファイルのheadタグに直接記述して読み込ませます。
合わせて、日付ピッカーのデザインと日本語化の記述も追加します。

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

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

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

   <!-- JQuery 3.7.1 -->
    <script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>

    <!-- JQuery-UI 1.13.2 -->
    <script
    src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"
    integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0="
    crossorigin="anonymous"></script>

    <!-- 日付ピッカー デザインsunny-->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/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>VacationRental7</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

    <!-- 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">

    <!-- 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" />

    <!-- JQuery 3.7.1 -->
    <script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>

    <!-- JQuery-UI 1.13.2 -->
    <script
    src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"
    integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0="
    crossorigin="anonymous"></script>

    <!-- 日付ピッカー デザインsunny-->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/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>

「app\views\reservations\_form.html.erb」ファイルにスクリプトを追加します。

記述追加　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>