twitter-bootstrap 表单中的更改不会保存到数据库中

Changes in the form are not saved to database

提问by Vitaly

I'm trying to add a date field to my form.

我正在尝试向我的表单添加一个日期字段。

I added bootstrap-datepicker-rails gem, all required css and javascript.

我添加了 bootstrap-datepicker-rails gem，所有必需的 css 和 javascript。

When I choose the date in the calendar and click Save, it's not updated in the database.

当我在日历中选择日期并单击保存时，它不会在数据库中更新。

Here's the code of the form:

这是表单的代码：

= simple_form_for @model
  = f.input :date_last, :required => true, 
            :input_html => { data: {behaviour: "datepicker"}}, 
            :as => :string
  = f.button :submit, 'Save', :class => 'btn btn-primary'

I think this might have to do with formats, but not sure where to look at.

我认为这可能与格式有关，但不确定在哪里查看。

Update

更新

It works when I change default format to yyyy-mm-dd (default is mm/dd/yyyy):

当我将默认格式更改为 yyyy-mm-dd（默认为 mm/dd/yyyy）时，它会起作用：

$('[data-behaviour~=datepicker]').datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});

回答by Andrew Hacking

I just answered a similar question hereand have included my answer below:

我刚刚在这里回答了一个类似的问题，并在下面提供了我的答案：

---

---

I also needed to get this working and support multiple locales that do not use US centric date formats, eg: en-AU (Australia) which has the date format dd/mm/yyyy.

我还需要让它工作并支持不使用以美国为中心的日期格式的多个语言环境，例如：en-AU（澳大利亚），它的日期格式为 dd/mm/yyyy。

The Problem

问题

Rails expects the date format to be yyyy-mm-ddfrom the browser, yet you want to display the date in the user's locale. Whilst the date control allows you to specify the format for display it does NOT allow you to separately specify the format to be sent back to the server.

Rails 期望日期格式yyyy-mm-dd来自浏览器，但您希望以用户的语言环境显示日期。虽然日期控件允许您指定显示格式，但它不允许您单独指定要发送回服务器的格式。

The Solution

解决方案

Build a hidden input field that sends the correct format back to your rails server. I do this with with a custom simple_form input control that builds both the date-picker input field and a hidden field, and use some javascript to convert to the rails date when the input control changes.

构建一个隐藏的输入字段，将正确的格式发送回您的 rails 服务器。我使用一个自定义 simple_form 输入控件来完成此操作，该控件构建日期选择器输入字段和隐藏字段，并在输入控件更改时使用一些 javascript 转换为 rails 日期。

The upshot is you can have a nice bootstrap date-picker in rails and use it with simple_form as follows:

结果是您可以在 rails 中拥有一个不错的引导日期选择器，并将其与 simple_form 一起使用，如下所示：

<%= f.input :date, as: :bootstrap_datepicker %>

Or to use a long date format:

或者使用长日期格式：

<%= f.input :date, as: :bootstrap_datepicker, input_html: { format: :long } %>

Implementation

执行

Create or edit the following files:

创建或编辑以下文件：

Gemfile

文件

gem 'bootstrap-sass'
gem 'bootstrap-datepicker-rails'

config/locales/en-AU.yml

配置/语言环境/en-AU.yml

en-AU:
  date:
    datepicker:
      default: "dd/mm/yyyy"
      long: "dd MM, yyyy"
    formats:
      default: ! '%d/%m/%Y'
      long: ! '%d %B, %Y'

config/locales/en-US.yml

配置/语言环境/en-US.yml

en-US:
  date:
    datepicker:
      default: "mm/dd/yyyy"
      long: "MM dd, yyyy"
    formats:
      default: "%m/%d/%Y"
      long: ! '%B %d, %Y'

app/assets/stylesheets/application.css.scss

应用程序/资产/样式表/application.css.scss

@import "bootstrap-responsive";
@import "bootstrap-datepicker";

app/assets/javascripts/application.js.coffee

应用程序/资产/javascripts/application.js.coffee

#= require bootstrap
#= require bootstrap-datepicker
#= require bootstrap-datepicker-rails

Alternatively, app/assets/javascripts/application.js

或者，app/assets/javascripts/application.js

//= require bootstrap
//= require bootstrap-datepicker
//= require bootstrap-datepicker-rails

app/assets/javascripts/bootstrap-datepicker-rails.js.coffee

应用程序/资产/javascripts/bootstrap-datepicker-rails.js.coffee

$ ->
  # convert bootstrap-datepicker value to rails date format (yyyy-mm-dd) on our hidden field
  $(document).on 'changeDate', '.bootstrap-datepicker', (evt) ->
    rails_date = evt.date.getFullYear() + '-' + ('0' + (evt.date.getMonth() + 1)).slice(-2) + '-' + ('0' + evt.date.getDate()).slice(-2)
    $(this).next("input[type=hidden]").val(rails_date)

app/inputs/bootstrap_datepicker_input.rb

应用程序/输入/bootstrap_datepicker_input.rb

class BootstrapDatepickerInput < SimpleForm::Inputs::Base
  def input
    text_field_options = input_html_options.with_indifferent_access
    format =  text_field_options.delete(:format)
    hidden_field_options = text_field_options.dup
    hidden_field_options[:class] = text_field_options[:class].dup # so they won't work with same array object
    hidden_field_options[:id] = "#{attribute_name}_hidden"
    text_field_options[:class] << 'bootstrap-datepicker'
    text_field_options[:type] = 'text'
    text_field_options[:value] ||= format_date(value(object), format)
    set_data_option text_field_options, 'date-format', I18n.t(format, scope: [:date, :datepicker], default: :default)
    default_data_option text_field_options, 'provide', 'datepicker'

    return_string =
      "#{@builder.text_field(attribute_name, text_field_options.to_hash)}\n" +
      "#{@builder.hidden_field(attribute_name, hidden_field_options.to_hash)}\n"
    return return_string.html_safe
  end

protected

  def default_data_option(hash, key, value)
    set_data_option(hash,key,value) unless data_option(hash, key)
  end

  def data_option(hash, key)
    hash[:data].try(:[],key) || hash["data-#{key}"]
  end

  def set_data_option(hash, key, value)
    hash[:data].try(:[]=,key,value) || (hash["data-#{key}"] = value)
  end

  def value(object)
    object.send @attribute_name if object
  end

  def format_date(value, format=nil)
    value.try(:strftime, I18n.t(format, scope: [ :date, :formats ], default: :default))
  end
end

回答by korada

I encountered similar problem and converting format in create action solved it for me:

我遇到了类似的问题，在创建操作中转换格式为我解决了这个问题：

def create
     .....
     @person.dob = DateTime.strptime(params[:person][:dob], '%m/%d/%Y').to_date
     .....
     @person.save
     .....
end

回答by Brian Graham

Andrew Hacking's answer worked great for me, with two small changes to app/inputs/bootstrap_datepicker_input.rb. I'm using Rails 4.2.0. It was ignoring the value in the hidden field as a duplicate (since the text input and hidden input have identical "name" attributes). I switched:

Andrew Hacking 的回答对我很有用，对app/inputs/bootstrap_datepicker_input.rb 做了两个小改动。我正在使用 Rails 4.2.0。它忽略了隐藏字段中的值作为重复项（因为文本输入和隐藏输入具有相同的“名称”属性）。我换了：

"#{@builder.text_field(attribute_name, text_field_options.to_hash)}\n"

... to this:

...到这个：

"#{@builder.text_field(attribute_name.to_s+'_box',text_field_options.to_hash)}\n" +

Also, I was losing wrapper options, so I added an argument to inputand merged the wrapper options into the html options.

此外，我丢失了包装器选项，所以我添加了一个参数input并将包装器选项合并到 html 选项中。

This:

这：

def input
    text_field_options = input_html_options.with_indifferent_access
    ...

... became:

...变成：

def input(wrapper_options)
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
    text_field_options = merged_input_options.with_indifferent_access
    ...

回答by rider_on_rails

I′ve used the anwser from Andrew. It worked well for me, except that it not displayed the localized month names correct (For example July instead of Juli).

我使用了 Andrew 的 anwser。它对我来说效果很好，只是它没有正确显示本地化的月份名称（例如，七月而不是七月）。

Here is my approach, if you want to use a localized version for your date_picker.

这是我的方法，如果您想为 date_picker 使用本地化版本。

By default the bootsrap-datepicker gem loads all language versions.

默认情况下 bootsrap-datepicker gem 加载所有语言版本。

If you want for example to load only the english and german version you have to change application.js

例如，如果您只想加载英文和德文版本，则必须更改application.js

from

从

//= require bootstrap-datepicker

to

到

//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.en-GB.js
//= require bootstrap-datepicker/locales/bootstrap-datepicker.de.js

Nest step is to change BootstrapDatepickerInput

Nest 步骤是更改BootstrapDatepickerInput

What we want now is that the language is dynamically choosen from a given parameter.

我们现在想要的是从给定的参数中动态选择语言。

so add the following line to you Input class inside of the input method

所以将以下行添加到您的输入法中的 Input 类中

set_data_option text_field_options, 'date-language', input_html_options[:locale]

In our view we can call now the form with

在我们看来，我们现在可以调用表单

= f.input :your_attribute_name, as: :bootstrap_datepicker, input_html: { locale: locale }