在Ruby on Rails中用Flatpickr从日期范围拆分起止日期的问题

错误原因 #

你用:date_range表单字段报错的核心原因是Booking模型没有date_range属性，Rails表单助手会自动尝试调用模型的date_range方法，自然抛出undefined method错误。

实现步骤 #

1. 修改预订表单局部视图 #

放弃直接绑定date_range，改用普通输入框承载日期选择器，同时添加两个隐藏字段存储starts_at和ends_at的值：

<%= form_with(model: booking) do |form| %>
  <!-- 日期范围选择器容器，绑定Stimulus控制器 -->
  <div data-controller="date-range">
    <input type="text" data-date-range-target="picker" placeholder="选择日期范围">
    <!-- 隐藏字段用于传递起始/结束日期到后端 -->
    <%= form.hidden_field :starts_at, data: { date_range_target: "start" } %>
    <%= form.hidden_field :ends_at, data: { date_range_target: "end" } %>
  </div>

  <!-- 其他表单字段 -->
  <%= form.submit "提交预订" %>
<% end %>

2. 调整Stimulus日期范围控制器 #

在控制器中监听日期选择器的变化，提取起始和结束日期，赋值给对应的隐藏字段：

// app/javascript/controllers/date_range_controller.js
import { Controller } from "@hotwired/stimulus"
import flatpickr from "flatpickr" // 以flatpickr为例，根据你用的日期库调整

export default class extends Controller {
  static targets = ["picker", "start", "end"]

  connect() {
    flatpickr(this.pickerTarget, {
      mode: "range",
      dateFormat: "Y-m-d", // 匹配Rails默认日期格式
      onChange: (selectedDates) => {
        if (selectedDates.length === 2) {
          // 提取日期并赋值给隐藏字段
          this.startTarget.value = selectedDates[0].toISOString().split('T')[0]
          this.endTarget.value = selectedDates[1].toISOString().split('T')[0]
        }
      }
    })
  }
}

3. 确保Bookings控制器参数允许 #

在Bookings控制器的参数过滤方法中，保留starts_at和ends_at的权限（不需要date_range）：

# app/controllers/bookings_controller.rb
def booking_params
  params.require(:booking).permit(:starts_at, :ends_at, # 其他需要的字段...)
end

关键说明 #

• 日期选择器的mode: range模式选中后会返回包含两个日期的数组，直接取数组首尾元素即可拆分起始/结束日期。
• 隐藏字段会在表单提交时自动将日期值传给后端，逻辑和原双输入框完全一致，只是前端用单输入框展示。
• 如果你的日期选择器不是flatpickr，只需调整onChange回调的逻辑，确保能正确获取起始和结束日期即可。

内容的提问来源于stack exchange，提问作者Discopigeon