带有 JQuery-ui-rails 日期的 Rails 5.2 Datepicker 偶尔保存日期

Question

我的应用中有一个People 模型，这给我带来了麻烦。每个person 具有三个日期时间列:birthday、:anniversary 和:other。我的表单设置如下：

<div class="container">
  <h2 class="text-center">Add a New Person</h2>
  <%= simple_form_for(@person) do |f| %>

    <div class="form-inputs">

      <div class="row">
        <div class="col-xs-12">
          <%= f.label :relationship %>
          <%= f.select :relationship, options_for_select(['Child', 'Spouse', 'Relative', 'Friend', 'Colleague', 'Acquaintance', 'Other'], :selected => f.object.relationship), {}, { :class => 'span3 controls controls-row' } %>
        </div> <!-- col -->
      </div> <!-- row -->

      <div class="row">
        <div class="col-sm-4">
          <%= f.input :first_name, required: true %>
        </div> <!-- col -->
        <div class="col-sm-4">
          <%= f.input :middle_name %>
        </div> <!-- col -->
        <div class="col-sm-4">
          <%= f.input :last_name, required: true %>
        </div> <!-- col -->
      </div> <!-- row -->

      <div class="row">
        <div class="col-sm-4">
          <%= f.label :anniversary %>
          <%= f.text_field :anniversary, class: "form-control datepicker" %>
        </div> <!-- col -->
        <div class="col-sm-4">
          <%= f.label :birthday %>
          <%= f.text_field :birthday, class: "form-control datepicker" %>
        </div> <!-- col -->
        <div class="col-sm-4">
          <%= f.label :other %>
          <%= f.text_field :other, class: "form-control datepicker" %>
        </div> <!-- col -->
      </div> <!-- row -->

      <div class="row">
        <div class="col-sm-12">
          <%= f.input :other_date_name %>
        </div> <!-- col -->
        <div class="col-xs-12">
          <%= f.input :notes %>
        </div> <!-- col -->
      </div> <!-- row -->

    </div> <!-- form inputs -->

    <div class="form-actions">
      <%= f.button :submit, class: "btn btn-outline-primary" %>
    </div>
  <% end %>
</div> <!-- container -->

但这个表单确实会在people#index 页面上的弹出窗口中呈现，如下所示：

<div id="newPersonPopup" class="white-popup mfp-hide">
  <%= render 'form', person: @person %>
</div>

我确实在使用 datepicker 时遇到了一些问题，但我关注了 this 问题并让它与 jquery-ui-rails gem 一起使用。

使用此当前设置，它会保存 :birthday 和 :anniversary 的日期，但不会保存 :other，即使代码相同。

相关的控制器方法有：

class PeopleController < ApplicationController
  before_action :set_person, only: [:show, :edit, :update, :destroy]
  before_action :authenticate_user!

  # GET /people
  # GET /people.json
  def index
    @people = Person.where(user_id: current_user.id)
    @person = Person.new
  end

  def create
    @person = Person.new(person_params)
    @person.user_id = current_user.id

    respond_to do |format|
      if @person.save
        format.html { redirect_to people_path, notice: 'Person was successfully created.' }
        format.json { render :show, status: :created, location: @person }
      else
        format.html { render :new }
        format.json { render json: @person.errors, status: :unprocessable_entity }
      end
    end
  end


  private
    # Use callbacks to share common setup or constraints between actions.
    def set_person
      @person = Person.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def person_params
      params.require(:person).permit(:relationship, :first_name, :middle_name, :last_name, :birthday, :anniversary, :other, :other_date_name, :notes, :user_id)
    end
  end

我改变了表单中字段的顺序并获得了不同的缺失属性（例如，在某些配置中:birthday 不会被保存，但:other 会，等等），但我没有做任何事情保存所有三个日期。我已经验证它在rails c 中保存为nil。

任何人都可以看到这里发生了什么事吗？

其他信息

这是创建新person 的服务器日志：

Started POST "/people" for 127.0.0.1 at 2018-10-02 20:26:08 -0700
Processing by PeopleController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"o7zlymmDmugZpN94i/xMzbnOCCwh/md0IOzA2W00Lhm8dVTE7bT6ny2BY1aDdqA4ilwenFO9/+XaLdevcyUqeA==", "person"=>{"relationship"=>"Child", "first_name"=>"Test", "middle_name"=>"For", "last_name"=>"Dates", "group"=>"The Testers", "anniversary"=>"10/06/2018", "birthday"=>"10/26/2018", "other"=>"10/13/2018", "other_date_name"=>"Test Date", "notes"=>"Notes go here."}, "commit"=>"Create Person"}
  User Load (3.9ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ /Users/lizbayardelle/.rvm/gems/ruby-2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
   (0.1ms)  begin transaction
  ↳ app/controllers/people_controller.rb:39
  User Load (0.6ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/people_controller.rb:39
  Person Create (2.7ms)  INSERT INTO "people" ("relationship", "first_name", "middle_name", "last_name", "anniversary", "other_date_name", "notes", "user_id", "created_at", "updated_at", "group") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)  [["relationship", "Child"], ["first_name", "Test"], ["middle_name", "For"], ["last_name", "Dates"], ["anniversary", "2018-06-10"], ["other_date_name", "Test Date"], ["notes", "Notes go here."], ["user_id", 1], ["created_at", "2018-10-03 03:26:08.941492"], ["updated_at", "2018-10-03 03:26:08.941492"], ["group", "The Testers"]]
  ↳ app/controllers/people_controller.rb:39
   (2.3ms)  commit transaction
  ↳ app/controllers/people_controller.rb:39
Redirected to http://localhost:3000/people
Completed 302 Found in 193ms (ActiveRecord: 9.5ms)


Started GET "/people" for 127.0.0.1 at 2018-10-02 20:26:08 -0700
Processing by PeopleController#index as HTML
  User Load (1.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ /Users/lizbayardelle/.rvm/gems/ruby-2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
  Person Load (10.3ms)  SELECT "people".* FROM "people" WHERE "people"."user_id" = ? AND "people"."birthday" IS NOT NULL  [["user_id", 1]]
  ↳ app/controllers/people_controller.rb:9
  Person Load (0.3ms)  SELECT "people".* FROM "people" WHERE "people"."user_id" = ?  [["user_id", 1]]
  ↳ app/controllers/people_controller.rb:11
  Person Load (0.3ms)  SELECT "people".* FROM "people" WHERE "people"."user_id" = ? AND "people"."group" IS NOT NULL  [["user_id", 1]]
  ↳ app/controllers/people_controller.rb:12
  Rendering people/index.html.erb within layouts/application
  Person Load (0.4ms)  SELECT "people".* FROM "people" WHERE "people"."user_id" = ? ORDER BY last_name ASC  [["user_id", 1]]
  ↳ app/views/people/index.html.erb:37
  Person Load (1.8ms)  SELECT "people".* FROM "people" WHERE "people"."user_id" = ? AND "people"."group" IS NULL ORDER BY last_name ASC  [["user_id", 1]]
  ↳ app/views/people/index.html.erb:70
  Person Load (6.2ms)  SELECT "people".* FROM "people" WHERE "people"."user_id" = ? AND "people"."birthday" IS NULL ORDER BY last_name ASC  [["user_id", 1]]
  ↳ app/views/people/index.html.erb:112
  Rendered people/_form.html.erb (165.9ms)
  Rendered people/index.html.erb within layouts/application (267.8ms)
Completed 200 OK in 1219ms (Views: 1167.9ms | ActiveRecord: 20.6ms)

Answer 1

问题在于您的日期格式。查看日志中的这些行。

这是您的控制器收到的内容：

"anniversary"=>"10/06/2018", "birthday"=>"10/26/2018", "other"=>"10/13/2018"

这就是您的模型试图保存的内容：

["anniversary", "2018-06-10"]

因此，“10 月 6 日”被转换为“6 月 10 日”，因为模型将您的日期视为 day/month/year 格式。这就是为什么 birthday 和 other 日期被忽略的原因。没有第 26 个月或第 13 个月，因此这些属性因无效而被跳过。

要解决此问题，您需要将 UI 中的日期转换为正确的格式（您的模型可以理解）。最好是在 UI 中转换它，即在 datepicker 中。如果您想保留一种日期格式 (month/day/year) 显示给用户以供选择，并以模型可识别的格式 (year-month-day) 将日期发送到控制器，您可以使用 altFormat 方法。修改模板中datepicker相关的字段：

<div class="row">
  <div class="col-sm-4">
    <%= f.label :anniversary %>
    <input type="text" class="form-control datepicker" data-datepicker-holder="#anniversaryHolder"/>
    <%= f.hidden_field :anniversary, id: "anniversaryHolder" %>
  </div> <!-- col -->
  <div class="col-sm-4">
    <%= f.label :birthday %>
    <input type="text" class="form-control datepicker" data-datepicker-holder="#birthdayHolder"/>
    <%= f.hidden_field :birthday, id: "birthdayHolder" %>
  </div> <!-- col -->
  <div class="col-sm-4">
    <%= f.label :other %>
    <input type="text" class="form-control datepicker" data-datepicker-holder="#otherHolder"/>
    <%= f.hidden_field :other, id: "otherHolder" %>
  </div> <!-- col -->
</div> <!-- row -->

并替换初始化日期选择器的代码：

$('input.datepicker').data({behaviour: "datepicker"}).datepicker();

用这个：

$('input.datepicker').each(function() {
  $(this).data({behaviour: "datepicker"}).datepicker({altFormat: "yy-mm-dd", altField: $(this).data('datepicker-holder')});
});

这是一个简短的演示，解释了它是如何工作的（为了清楚起见，隐藏字段被替换为文本字段）：http://jsfiddle.net/dx0ufgo8/