我创建了一个日历，用户可以在其中单击右侧的箭头，并因此显示接下来的2周（因为start_date已更新2周）。这就像一个超级按钮（适用于当前日期附近的日期）。

目标

现在，我也尝试添加日历，以便用户能够选择较远的日期，因此该日期将用于更新日历。我正在尝试采用与以前相同的方法，将选定的日历日期用作start_date。

问题

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

• 我是否需要执行控制器操作calendar并更新start_date（我该怎么做？）
• 我可以在我的视图中直接将所选日期用作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 -->
..........