rails 예약 기능을 붙인다. (두 번째) rails 예약 기능을 붙인다. DateTimePicker 소개

환경

rails 5.0
deviseでログイン機能を作っている

예약 기능으로, 날짜, 시간을 간편하게 기입하기 위해, DateTimePicker를 도입한다.

아래 그림이 완성된 이미지

Gemfile에 추가

Gemfile

gem 'bootstrap3-datetimepicker-rails'
gem 'momentjs-rails', '>= 2.9.0'

$ bundle install

application.scss

@import 'bootstrap-datetimepicker';

application.js

//= require moment
//= require bootstrap-datetimepicker

app/views/books/show.html.erb

  <%= form_for [@book, @book.reservations.new] do |f| %>

<%= f.hidden_field :book_id, value: @book.id %>

<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
                <%= f.text_field :start_date, :class => 'form-control', :placeholder => "借りたい日"%>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <%= f.text_field :end_date, :class => 'form-control', :placeholder => "返す日"%>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>




   <%= f.submit "この日程で予約する", class: "btn btn-danger btn-wide" %>    


<% end %>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });


    });

</script>

이런 느낌이 된다.

가능한 기능

　
・오른쪽에 있는 캘린더의 그림을 누르면,
나오고 날짜와 시간을 선택할 수 있습니다.


・빌리는 날의 캘린더의 그림을 누르면, 현재의 일시와 시간이 나온다.

・빌린 날, 시간을 선택해, 돌려주는 시간을 선택할 때, 빌린 날 이전의 일정을 선택할 수 없다.

감상

자신은 gem 'bootstrap-datetimepicker-rails'라고 해 버리고, 수정에 시간이 걸렸다.
Javascript를 사용하면 다양한 설정을 할 수 있다.　

추가

다음 번은, 빌린 사람측과 빌려준 사람측의 view를 만든다.
참고 자료
h tp // 에오나 s단. 기주 b. 이오 / 보오 tst et p

마지막 게시물 1 번째
ぃ tp // 이 m / 온 / ms / 77f66016075 A2b773376