我正在尝试在表单中添加日期字段。
我添加了bootstrap-datepicker-rails gem,所有需要的css和javascript。
当我在日历中选择日期并单击“保存”时,它不会在数据库中更新。
以下是表单的代码:
= 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'
我认为这可能与格式有关,但不确定在哪里查看。
更新
当我将默认格式更改为yyyy-mm-dd(默认为mm / dd / yyyy)时,它可以正常工作:
$('[data-behaviour~=datepicker]').datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});
答案 0 :(得分:16)
我刚刚回答了类似的问题here,并在下面提供了我的答案:
我还需要让这个工作并支持多个不使用以美国为中心的日期格式的语言环境,例如:en-AU(澳大利亚),其日期格式为dd / mm / yyyy。
Rails期望浏览器的日期格式为yyyy-mm-dd
,但您希望在用户的语言环境中显示日期。虽然日期控件允许您指定显示格式,但它不允许您单独指定要发送回服务器的格式。
构建一个隐藏的输入字段,将正确的格式发送回rails服务器。我使用自定义的simple_form输入控件来构建日期选择器输入字段和隐藏字段,并在输入控件更改时使用一些javascript转换为rails日期。
结果是你可以在rails中使用一个很好的bootstrap日期选择器,并将它与simple_form一起使用,如下所示:
<%= f.input :date, as: :bootstrap_datepicker %>
或使用长日期格式:
<%= f.input :date, as: :bootstrap_datepicker, input_html: { format: :long } %>
创建或编辑以下文件:
<强>的Gemfile 强>
gem 'bootstrap-sass'
gem 'bootstrap-datepicker-rails'
<强>配置/语言环境/ EN-AU.yml 强>
en-AU:
date:
datepicker:
default: "dd/mm/yyyy"
long: "dd MM, yyyy"
formats:
default: ! '%d/%m/%Y'
long: ! '%d %B, %Y'
<强>配置/语言环境/ EN-US.yml 强>
en-US:
date:
datepicker:
default: "mm/dd/yyyy"
long: "MM dd, yyyy"
formats:
default: "%m/%d/%Y"
long: ! '%B %d, %Y'
应用/资产/样式表/ application.css.scss 强>
@import "bootstrap-responsive";
@import "bootstrap-datepicker";
应用/资产/ Javascript角/ application.js.coffee 强>
#= require bootstrap
#= require bootstrap-datepicker
#= require bootstrap-datepicker-rails
或者, app / assets / javascripts / application.js
//= require bootstrap
//= require bootstrap-datepicker
//= require bootstrap-datepicker-rails
应用/资产/ Javascript角/ 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)
应用/输入/ 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
答案 1 :(得分:5)
我遇到了类似的问题,并且在create action中转换格式为我解决了这个问题:
def create
.....
@person.dob = DateTime.strptime(params[:person][:dob], '%m/%d/%Y').to_date
.....
@person.save
.....
end
答案 2 :(得分:0)
Andrew Hacking的回答对我很有帮助,对 app / inputs / bootstrap_datepicker_input.rb 进行了两处小改动。我使用的是Rails 4.2.0。它忽略了隐藏字段中的值作为重复项(因为文本输入和隐藏输入具有相同的&#34; name&#34;属性)。我换了:
"#{@builder.text_field(attribute_name, text_field_options.to_hash)}\n"
......对此:
"#{@builder.text_field(attribute_name.to_s+'_box',text_field_options.to_hash)}\n" +
另外,我丢失了包装选项,所以我在input
添加了一个参数,并将包装选项合并到html选项中。
这:
def input
text_field_options = input_html_options.with_indifferent_access
...
......成了:
def input(wrapper_options)
merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
text_field_options = merged_input_options.with_indifferent_access
...
答案 3 :(得分:0)
如果您想为date_picker使用本地化版本,这是我的方法。
默认情况下,bootsrap-datepicker gem会加载所有语言版本。
如果您想要仅加载英语和德语版本,则必须更改 application.js
这
//= require bootstrap-datepicker
到
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.en-GB.js
//= require bootstrap-datepicker/locales/bootstrap-datepicker.de.js
Nest步骤是更改 BootstrapDatepickerInput
我们现在想要的是从给定参数中动态选择语言。
所以将以下行添加到输入法
中的输入类set_data_option text_field_options, 'date-language', input_html_options[:locale]
在我们的视图中,我们现在可以使用
调用表单= f.input :your_attribute_name, as: :bootstrap_datepicker, input_html: { locale: locale }