railsで予約日が設定できるようにカレンダーを表示するpluginのdatepickerを導入しています。しかし、予約ができない日を設定して、それをカレンダーに反映させたいのですが、できずにおりますのでご相談したい次第です。よろしくお願いいたします。
環境
rails 5.0.2 ruby 2.3.0
やりたいこと
①1日だけ日付を選択できるようにしたい。 ②他に予約がある場合は、その日程は予約できないようにしたい。 ③カレンダーに、予約できない日を反映したい。 現状は、カレンダーは表示されるのですが、予約できない日がカレンダーに反映できないでおります。これを解決したいと考えております。
@@@.html.erb
ここをクリックしたら、カレンダーが表示される。 <div class='input-group date'> <%= f.text_field :start_date, class: 'form-control', id:"datetimepicker1", placeholder: "年/月/日" %> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"> </span> </span> </div>
ruby/controller.rb
def setdate listing = Listing.find(params[:listing_id]) today = Date.today reservations = listing.reservations.where("start_date = ?", today) render json: reservations end
js
<script> $(function(){ // // ①データの参照 datepickerがクリックされた時点で、非同期通信を行い、reservationの予約情報が表示されるようにする。 var disabledDates = []; $.ajax({ url: "/setdate", data: {"listing_id": <%= @listing.id %>}, dataType: "json", success: function(data){ $.each(data, function(objID,objValue){ var d = new Date(objValue.start_date); disabledDates.push($.datepicker.formatDate('yy/m/d',d)); }); } }); // ②予約できない日の確認関数を作成 function disable(date){ var y = date.getFullYear(); var m = date.getMonth(); var d = date.getDate(); var ymd = y + "/" + m + "/" + d; if ($.inArray(ymd,disabledDates) == -1){ return [false]; } } // ③datepickerで表示する。 $("#datetimepicker1").datepicker({ dateFormat: "yy/mm/dd", maxDate: "+2m", minDate: 0, beforeshowday: disable }); //.datepicker }); </script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/07 11:50
2017/11/07 11:52