我创建了一个日历,用户可以在其中单击右侧的箭头,并因此显示接下来的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 -->
..........