【发布时间】: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 表单值。我已将脚本添加到我的问题中
标签: ruby-on-rails forms