带有JQuery-ui-rails日期的Rails 5.2 Datepicker临时保存日期

时间:2018-09-30 20:57:49

标签: ruby-on-rails

我的应用中有一个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>

我确实有一些关于日期选择器的问题,但是我遵循了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会被保存,等等),但是什么也没有我确实使它保存了所有三个日期。我已验证它在nil中另存为rails c

任何人都可以看到这里发生的事情吗?

其他信息

以下是用于创建新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)

1 个答案:

答案 0 :(得分:0)

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

这是您的控制器收到的:

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

这就是您的模型要保存的内容:

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

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

要解决此问题,您需要将UI中的日期转换为正确的格式(模型可以理解)。最好的方法是在用户界面(即datepicker)中进行转换。如果要保留一种日期格式(month/day/year)以便显示给用户以供选择,并以模型可识别的格式(year-month-day)将日期发送给控制器,则可以使用{{3} } 方法。修改模板中与日期选择器相关的字段:

<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 -->

并替换初始化datepicker的代码:

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

与此:

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

这里是一个简短的演示,解释了其工作方式(为清楚起见,用文本字段替换了隐藏字段):altFormat