将 end_time 值设置为与 rails 表单中的 start_time 值相同

Posted 2023-02-15

【中文标题】将 end_time 值设置为与 rails 表单中的 start_time 值相同

【英文标题】：Setting the end_time value the same as start_time value in a rails form

【发布时间】：2021-07-13 19:43:33

【问题描述】：

Rails 6.0.3

我正在使用表格来安排会议。 它既可用于跨越数天（包括 start_time 和 end_time）的单次会议，也可用于仅持续一天的任务。

对于单日会议，我需要将 end_time 设置为与 start_time 相同的值，而无需用户选择。

我在控制器中尝试了很多东西，但无法解决。

你会怎么做。

感谢您的帮助

<div class="border border-grey-light rounded" style ="padding: 10px;">
  <%= form_with(model: meeting, local: true, :html => :id => "flatpickr-form-single" ) do |form| %>
    <div class="mb-6">
      <%= form.label :name, class: 'label' %>
      <%= form.text_field :name, required: true, class: 'form-control', placeholder: "Task name" %>
    </div>
    <div class="mb-6">
      <%= form.label :body %>
      <%= form.rich_text_area :body, class: 'form-control' %>
    </div>
    <div class="start_time_result mb-6" style ="width: 30vw;">
      <%= form.label :start_time, class: 'label' %>
      <div class="flex items-center justify-between max-w-md">
        <%= form.text_field :start_time, data:  behavior: "flatpickr" , placeholder: "Date and time select ...", class: "form-control" %>
      </div>
    </div>
    <div class=" field" style ="width: 30vw;">
      <%= form.label :end_time, class: 'label' %>
      <div class="end_time_result flex items-center justify-between max-w-md" >
        <%= form.text_field :end_time, data:  behavior: "flatpickr" , placeholder: "Date and time select ...", class: "form-control required" %>
      </div>
    </div>
    <%= form.submit class: "btn btn-primary text-base py-1.5 px-5", value: "Confirm" %>
  <% end %>
</div>

<script>
  const selectElement = document.querySelector('.start_time_result');

  selectElement.addEventListener('change', (event) => 
    const end_time_result = document.querySelector('.end_time_result');
    end_time_result.textContent = `$event.target.value`;
  );
</script>

【问题讨论】：

不选择结束时间怎么知道是一天会议？

好问题。我正在使用 jQuery 将表单放在页面上，并且用户选择单日会议或跨越几天的会议。表单被保存到 2 个部分中，这取决于单击哪个按钮

但是您需要在表格中显示结束日期吗？如果是这样，我认为javascript是要走的路。在开始日期放置一个更改事件侦听器并在那里设置结束日期

太好了，谢谢。我在 start_time 中添加了一个更改事件侦听器。我已经让它工作了，所以它用 start_Time 替换了 end_time 的<div>，但是我如何更改 end_time 表单值。我已将脚本添加到我的问题中

【参考方案1】：

您可以在控制器中添加before_action，并将end_time 参数值设置为与start_time 相同。