Rails6.0 | 民泊予約サイトの構築 | 81 | Bootstrap | 予約フォーム - 学生向けプログラミング入門

[８０]Bootstrap |jQuery日付ピッカー<<　[ホームに戻る]　>> [８２]Bootstrap | 予約確認ページ

 「32 | 予約フォーム」をBootstrapの記述に変更します。
設定部分は省略します。

記述更新　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">
  <span></span>&nbsp;&nbsp;&nbsp;1泊 <%= number_to_currency(@room.price) %>
  </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>

<h4 class="message-alert text-center"><span id="message"></span></h4>
<div id="preview" style="display: none">
  <table class="reservation-table">
    <tbody>
        <tr>
          <td>宿泊費用</td>
          <td class="text-right", style="white-space: nowrap"><%= number_to_currency(@room.price) %></td>
        </tr>
        <tr>
          <td>宿泊日数</td>
          <td class="text-right"><span id="reservation_nights"></span>泊</td>
        </tr>
        <tr>
          <td class="total">合計金額</td>
          <td class="text-right", style="white-space: nowrap"><span id="reservation_total"></span>円</td>
        </tr>
      </tbody>
  </table>
</div>  

  <br/>

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

  </div>
</div>

<% end %>

<script>
function checkDate(date) {
  dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
  return [$.inArray(dmy, unavailableDates) == -1];
}
$(function() {
  unavailableDates = [];
  $.ajax({
    url: '<%= preload_room_path(@room) %>',
    dateTyp: 'json',
    success: function(data) {
      $.each(data, function(arrID, arrValue) {
          for(var d = new Date(arrValue.start_date); d <= new Date(arrValue.end_date); d.setDate(d.getDate() + 1)) {
            unavailableDates.push($.datepicker.formatDate('d-m-yy', d));
          }
      });
      $('#reservation_start_date').datepicker({
        dateFormat: 'dd-mm-yy',
        //今日から３ヶ月先まで予約可能
        minDate: 0,
        maxDate: '3m',
        beforeShowDay: checkDate,
        onSelect: function(selected) {
          $('#reservation_end_date').datepicker("option", "minDate", selected);
          $('#reservation_end_date').attr("disabled", false);
          var start_date = $('#reservation_start_date').datepicker('getDate');
          var end_date = $('#reservation_end_date').datepicker('getDate');
          //２日選択すると１泊になる
          var nights = (end_date - start_date)/1000/60/60/24;
          var input = {
            'start_date': start_date,
            'end_date': end_date
          }
          $.ajax({
            url: '<%= preview_room_path(@room) %>',
            data: input,
            success: function(data) {
              if(data.conflict) {
                $('#message').text("この日付はご利用できません。");
                $('#preview').hide();
                $('#btn_book').attr('disabled', true);
              } else {
                $('#message').text("");
                $('#preview').show();
                $('#btn_book').attr('disabled', false);
                var total = nights * <%= @room.price %>
                $('#reservation_nights').text(nights);
                $('#reservation_total').text(total);
              }
            }
          });
        }
      });
      $('#reservation_end_date').datepicker({
        dateFormat: 'dd-mm-yy',
        //今日から３ヶ月先まで予約可能
        minDate: 0,
        maxDate: '3m',
        beforeShowDay: checkDate,
        onSelect: function(selected) {
          $('#reservation_start_date').datepicker("option", "maxDate", selected);
          var start_date = $('#reservation_start_date').datepicker('getDate');
          var end_date = $('#reservation_end_date').datepicker('getDate');
          var nights = (end_date - start_date)/1000/60/60/24;
          var input = {
            'start_date': start_date,
            'end_date': end_date
          }
          $.ajax({
            url: '<%= preview_room_path(@room) %>',
            data: input,
            success: function(data) {
              if(data.conflict) {
                $('#message').text("この日付ではご予約できません。");
                $('#preview').hide();
                $('#btn_book').attr('disabled', true);
              } else {
                $('#message').text("");
                $('#preview').show();
                $('#btn_book').attr('disabled', false);
                var total = nights * <%= @room.price %>
                $('#reservation_nights').text(nights);
                $('#reservation_total').text(total);
              }
            }
          });
        }
      });
    }
  });
});
</script>