Question

我是RoR的新手，在这里和网上阅读了很多文章之后，我在我的RoR项目中使用了datepicker来过滤搜索结果。但是，现在我需要使用datepicker在我的模型中设置一些值，但_tag阻止了这一点，并且create动作不会在数据库中保存日期。

我尝试删除_tag，但是JS似乎没有在我的网页上激活，并且Datepicker不再弹出（尽管如果我手动输入日期到该字段，创建工作正常并且日期存储在DB）。

我尝试使用hidden_field和其他各种东西让它工作并与我的模型交互，但我被卡住了。

所以我有两种相同的问题： 1 - 如何在没有_tag的情况下使datepicker工作？基于我在Stackoverflow上看到的，这是正常使用。 2 - 如何将datepicker与_tag一起使用并与我的模型交互？

以下是我的代码的相关代码段，其中包含带有_tag的datepicker。任何帮助将不胜感激！

的Gemfile

gem 'rails', '4.2.2'
gem 'jquery-rails',           '4.0.4'
gem 'jquery-ui-rails'
gem 'tinymce-rails'
# Bootstrap and stuff
gem "twitter-bootstrap-rails"
gem 'bootstrap-sass',          '3.2.0.0'
gem 'bootstrap-datepicker-rails'

# Datatables
gem 'jquery-datatables-rails', '~> 3.3.0'

HTML

<div class="row">
    <%= form_tag("/vacations/list", method: "get", action: 'dateFilter') do %>
  <div class="col-md-2 col-md-offset-0">
      <%= label_tag :start_date %>
      <%= text_field_tag :start_date %>
      <%= submit_tag "Filter by Date", class: "btn btn-primary" %>
  </div>
  <div class="col-md-2 col-md-offset-0">
      <%= label_tag :end_date %>
      <%= text_field_tag :end_date %>
  </div>
    <% end %>
</div>

VACATIONS.JS

$(document).ready(function() {
$('#vacations').dataTable({
    "pageLength": 25
});
$("#start_date").datepicker({dateFormat: 'yy-mm-dd'});
$("#end_date").datepicker({dateFormat: 'yy-mm-dd'});
});

假期控制器

def list
  get_data_set
  @start_date = params['start_date'] || ""
  @end_date = params['end_date'] || ""
    if @start_date.empty? && @end_date.empty?
      @vacations = Vacation.all
    else
      @vacations = dateFilter
    end
  end

def dateFilter
  @start_date = params['start_date']
  @end_date = params['end_date']
  @vacations = Vacation.where(start_date: @start_date..@end_date)
  return @vacations
end

datepicker与_tag一起正常工作的事实让我觉得我要么接近要么做一些愚蠢的事情。任何帮助都会很棒。

更新：

以下是一半工作的新用例的HTML - 如果我手动填写start_date和end_date字段，我可以更新模型，但点击该字段不会激活JS以启动Datepicker。

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@vacation_report) do |f| %>

      <%= f.label :timeperiod_name %>
      <%= f.text_field :timeperiod_name, class: 'form-control' %>

      <div class="row">
        <div class="col-md-2 col-md-offset-0">
          <%= f.label :start_date %>
          <%= f.text_field :start_date %>
        </div>
      <div class="col-md-2 col-md-offset-0">
          <%= f.label :end_date %>
          <%= f.text_field :end_date %>
      </div>
    </div>
      <%= f.submit "Create", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

Answer 1

您应该了解Rails表单的工作原理。带有_tag后缀的Rails辅助方法在form_tag帮助程序定义的表单中使用，而没有_tag后缀的帮助程序在form_for帮助程序定义的表单中使用。第二种助手称为model object helper。

了解您如何定义表单：

<%= form_tag("/vacations/list", method: "get", action: 'dateFilter') do %>
  ...
<% end %>

这意味着表单中的所有帮助者必须是_tag种类。当你随机引入f.text_field时，当然它不起作用，并不是因为它是一个datepicker字段。

更新：

为了让Datepicker工作，您必须确保JS文件中引用的元素与您通过助手方法生成的HTML一致。

在您的情况下，您已将该元素指定为类：

<%= f.text_field :timeperiod_name, class: 'form-control' %>

另一方面，你的JS使用一个哈希标记（＃），它表示一个ID，而不是一个类。

变化：

$('#vacations').dataTable({

为：

$('.vacations').dataTable({

当表单中只有一个Datepicker元素时，您可以安全地用＃表示ID。

Answer 2

我得到了这个工作。感谢@MarsAtomic将我的想法指向JS。下面是更新的HTML和可行的JS - 我发布它以防万一有一天它会帮助其他人。

vacation_report.html.erb

<% provide(:title, "Create Report") %>
<h1>Create Report</h1>

<%= form_for(@vacation_report) do |f| %>

<div class="row">
  <div class="col-md-6 col-md-offset-3">

  <%= f.label :timeperiod_name %>
  <%= f.text_field :timeperiod_name, class: 'form-control' %>

  <div class="row">
    <div class="col-md-2 col-md-offset-0">
          <%= f.label :start_date %>
          <%= f.text_field :start_date, :class => 'datepicker' %>
    </div>
    <div class="col-md-2 col-md-offset-0">
        <%= f.label :end_date %>
        <%= f.text_field :end_date, :class => 'datepicker' %>
    </div>
  </div>
  <%= f.submit "Create", class: "btn btn-primary" %>
  </div>
</div>

<% end %>

vacation_reports.js

$(document).ready(function(){
$('#vacation_reports').dataTable({
    "pageLength": 25
});
$('.datepicker').datepicker();
});

Rails datepicker仅适用于_tag

2 个答案: