Rails 和 JS，如何在我看来最好地获取输入日期

Question

我创建了一个日历，用户可以在其中单击右侧的箭头，然后显示接下来的 2 周（因为 start_date 按 2 周更新）。这就像一个魅力（对于接近当前日期的日期）。

目标

现在我还尝试添加一个日历，这样用户就可以 select 一个很远的日期，因此这个日期将用于更新日历。我正在尝试采用与以前相同的方法，使用 selected 日历日期作为 start_date.

问题

我在 JS 的输入字段上使用 flatpickr，但我不知道如何使用选取的值来更新日历。更具体地说：

我是否需要转到我的控制器操作 calendar 并更新 start_date（我该怎么做？）
我能否将 selected 日期直接用作我认为的 start_date（我该怎么做？）
或者有更好的方法来实现我的目标吗？

代码

控制器

  def calendar
    @hotel = Hotel.find(params[:hotel_id])
    @room_categories = @hotel.room_categories
    @rooms = []
    @room_categories.each do |room_cat|
      @rooms << room_cat.rooms
    end
    @reservations = @hotel.reservations
    # @start_date = Date.today
    @start_date = params[:start_date] ? Date.parse(params[:start_date]) : Date.today
    authorize @reservations
  end

用于日历的 js

import flatpickr from 'flatpickr';

const toggleDateInputs2 = function() {
  const startDateInput = document.getElementById('input-calendar');

  if (startDateInput) {

    flatpickr(startDateInput, {
    format: "d-m-Y",
    altFormat: "d-m-Y",
    dateFormat: 'd-m-Y',
    onChange: function(selectedDates, selectedDate) {
      // Send selectedDate as start_date to view
    }
  });
  }
};

export { toggleDateInputs2 }

日历视图

<!-- Arrow left on click, previous 2 weeks -->
<div class="arrow-container d-flex align-text-center">
  <%= link_to(calendar_hotel_reservations_path(@hotel, start_date: @start_date - 14))  do %>
    <i class="fas fa-arrow-circle-left"></i>
  <% end %>

  <!-- Begin calendar -->
    <i class="far fa-calendar-alt fa-2x"></i>
  <input type="text" name="fname" placeholder="Pick date" id="input-calendar">

<!-- Arrow right on click, next 2 weeks -->
  <%= link_to(calendar_hotel_reservations_path(@hotel, start_date: @start_date + 14))  do %>
    <i class="fas fa-arrow-circle-right"></i>
  <% end %>
</div>

<!-- rest of calendar which is based on start_date -->
..........

Answer 1

从您所说的来看，我认为 "best way" 将利用您已有的资源。您可以使用 flatpickr 的 onChange 并将 selectedDate 值作为参数发送。 :

flatpickr(startDateInput, {
format: "d-m-Y",
altFormat: "d-m-Y",
dateFormat: 'd-m-Y',
onChange: function(selectedDates, selectedDate) {
  window.location.replace( "thecalendarhotelreservationsurl/<%=@hotel%>/"+selectedDate )
}

如果您不介意弄脏您的手，手动创建 url 字符串是实现您想要的效果的一种快速方法，但也许更好的方法是创建一个 POST 路由接受 hotel_id 和 start_date 作为参数，并在 onchange 中使用 AJAX 调用。

Rails 和 JS，如何在我看来最好地获取输入日期

Rails and JS, how to best get an input date in my view

javascript

ruby-on-rails

model-view-controller

flatpickr