Bootstrap datepicker默认值为simple_form_for
我正在使用引导日期选择器来使用simple_form_for在表单中选择日期。 例如
我的日期选择器使用dd-mm-yyyy的格式
我想使用simple_form_for将今天的日期设置为表单中的默认值，关于如何做到这一点的任何想法？
<%= f.input :payment_date, as: :string, input_html: { class: "datepicker", value: Time.now.strftime('%d-%m-%Y') } %>
另一种格式是:(使用活动的admin gem）
f.input :date, as: :date_picker, :input_html => { :value => Date.today}
您也可以使用此gem： https ： //github.com/Nerian/bootstrap-datepicker-rails
在你的gemfile.rb上
gem 'bootstrap-datepicker-rails'
然后捆绑安装并重启rails服务器
然后将此行添加到app / assets / stylesheets / application.css
*= require bootstrap-datepicker
并将此行添加到app / assets / javascripts / application.js
//= require bootstrap-datepicker
并在您的表单中使用此：
<%= f.text_field :payment_date, :id => "datepicker", :value => Date.today %>
并在表单的同一视图上添加此JavaScript
我还需要使用它并支持多个不使用美国中心日期格式的语言环境，例如：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: "dd/mm/yyyy" 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
Andrew Hacking所说的小补充：你的coffeescript也想要捕捉clearDate事件。
$ -> # convert bootstrap-datepicker value to rails date format (yyyy-mm-dd) on our hidden field $(document).on 'changeDate clearDate', '.bootstrap-datepicker', (evt) -> rails_date = if evt.date? then evt.date.getFullYear() + '-' + ('0' + (evt.date.getMonth() + 1)).slice(-2) + '-' + ('0' + evt.date.getDate()).slice(-2) else '' $(this).next("input[type=hidden]").val(rails_date)$(document).on 'changeDate clearDate', '.bootstrap-datepicker', (evt) ->`