jquery - Rails：从 jquery Datepicker 切换到 jquery Timepicker

Question

我正在寻找一个聪明的建议，而不是用勺子喂食的解决方案来覆盖我的 rails 应用程序中的 datepicker，因为我对 jquery 不太了解。

目前我启用了 datepicker，我从 jonthornton 找到了一个不错的 jquery timepicker，并且真的很想尝试以一种智能且最小的方式将它实现到我的 rails 应用程序中。

可能那里有更好的时间选择器，请随时提出建议。

目前我正在使用 jquery-ui/datepicker

预订控制器：

class ReservationsController < ApplicationController
  before_action :authenticate_user!
def create

  if current_user == service.user
    flash[:alert] = "You cannot book your own service!"
  else

  service = Service.find(params[:serivce_id])
  start_date = Date.parse(reservation_params[:start_date])
  end_date = Date.parse(reservation_params[:end_date])
  days = (end_date - start_date).to_i + 1

  @reservation = current_user.reservations.build(reservation_params)
  @reservation.service = service
  @reservation.price = service.price
  @reservation.total = service.price * days
  @reservation.save

  flash[:notice] = "Booked Successfully!"
end
  rediret_to service

end

  private
  def reservation_params
    params.require(:reservation).permit(:start_date, :end_date)
  end
end

服务控制器：

  # RESERVATION
  def preload
    today = Date.today
    reservations = @service.reservations.where("start_date >= ? OR end_date >= ?", today, today)

    render json: reservations
  end

  def preview
    start_date = Date.parse(params[:start_date])
    end_date = Date.parse(params[:end_date])

    output = {
      conflict: is_conflict(start_date, end_date, @service)

      render json: output
    }
  end

  private

  def is_conflict(start_date, end_date, service)
    check = service.reservations.where("? < start_date AND end_date < ?", start_date, end_date)
    check.size > 0? true : false
  end

预订控制器的视图：

<div class="panel panel-default">
  <div class="panel-heading">
    <span><i class="fa fa-bolt" style="color: #ffb400"></i> $<%= @service.price %></span>
    <span class="pull-right">For <%= @service.accommodate %></span>
  </div>
  <div class="panel-body">
    <%= form_for([@service, @service.reservations.new]) do |f| %>
      <div class="panel-body">
        <div class="col-md-6">
          <label>Check In</label>
          <%= f.text_field :start_date, readonly: true, placeholder: "dd-mm-yy", class: "form-control datepicker" %>
        </div>
        <div class="col-md-6">
          <label>Check Out</label>
          <%= f.text_field :end_date, readonly: true, placeholder: "dd-mm-yy", class: "form-control datepicker", disabled: true %>
        </div>
      </div>

      <h4 class="message-alert text-center"><span id="message"></span></h4>
      <div id="preview" style="display:none">
        <table class="reservation-table">
          <tbody>
            <tr>
              <td>Price</td>
              <td class="text-right"><%= @service.price %></td>
            </tr>
            <tr>
              <td>Night(s)</td>
              <td class="text-right">x <span id="reservation_days"></span></td>
            </tr>
            <tr>
              <td class="total">Total</td>
              <td class="text-right">$<span id="reservation_total"></span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <br/>

      <%= f.submit "Book Now", id: "btn_book", class: "btn btn-normal btn-block", disabled: true %>
    <% end %>
  </div>
</div>

<script>

  function checkDate(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    return [$.inArray(dmy, unavailableDates) == -1];
  }

  $(function() {

    unavailableDates = [];

    $.ajax({
      url: '<%= preload_room_path(@service) %>',
      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/24 + 1;

            var input {
              'start_date': start_date,
              'end_date': end_date
            }
            $.ajax({
              url: '<%= preview_room_path(@service) %>',
              data: input,
              success: function(data) {
                if(data.conflict) {
                  $('#message').text("These dates are not available.");
                  $('#preview').hide();
                  $('#btn_book').attr('disabled', true);
                } else {
                  $('#message').text("");
                  $('#preview').show();
                  $('#btn_book').attr('disabled', false);

                  var total = nights * <%= @service.price %>
                  $('#reservation_days').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/24 + 1;

            var input {
              'start_date': start_date,
              'end_date': end_date
            }
            $.ajax({
              url: '<%= preview_room_path(@service) %>',
              data: input,
              success: function(data) {
                if(data.conflict) {
                  $('#message').text("These dates are not available.");
                  $('#preview').hide();
                  $('#btn_book').attr('disabled', true);
                } else {
                  $('#message').text("");
                  $('#preview').show();
                  $('#btn_book').attr('disabled', false);

                  var total = nights * <%= @service.price %>
                  $('#reservation_days').text(nights);
                  $('#reservation_total').text(total);
                }
              }
            });
          }
        });
      }
    });


  });
</script>

标签： jqueryruby-on-railsjsonajaxjquery-ui-datepicker