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

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

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

目标

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

问题

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

代码

控制器

  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 -->
..........

从您所说的来看,我认为 "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 调用。