Ruby-on-rails Bootstrap 日期选择器默认值 simple_form_for

Bootstrap datepicker default value simple_form_for

提问by zurik

I am using the bootstrap date picker to enable selection of dates in a form using simple_form_for. For example

我正在使用引导程序日期选择器来启用使用 simple_form_for 的表单中的日期选择。例如

  <%= f.input :payment_date, as: :string, input_html: { class: "datepicker" } %>

My date picker uses the format of dd-mm-yyyy

我的日期选择器使用 dd-mm-yyyy 格式

I would like to set today's date as the default value in the form using simple_form_for, any ideas on how I can do that?

我想使用 simple_form_for 将今天的日期设置为表单中的默认值，关于如何做到这一点的任何想法？

回答by sites

<%= f.input :payment_date, as: :string, input_html: { class: "datepicker", value: Time.now.strftime('%d-%m-%Y') } %>   

Another format to it is: (working with active admin gem)

另一种格式是：（使用活动管理 gem）

f.input :date, as: :date_picker, :input_html => { :value => Date.today}

回答by AllenC

You can also use this gem:https://github.com/Nerian/bootstrap-datepicker-rails

你也可以使用这个 gem：https : //github.com/Nerian/bootstrap-datepicker-rails

on your gemfile.rb

在你的gemfile.rb 上

gem 'bootstrap-datepicker-rails'

then bundle install and restart rails server

然后捆绑安装并重新启动rails服务器

then add this line to app/assets/stylesheets/application.css

然后将此行添加到app/assets/stylesheets/application.css

 *= require bootstrap-datepicker

and add this line to app/assets/javascripts/application.js

并将这一行添加到app/assets/javascripts/application.js

 //= require bootstrap-datepicker

and to use this in your form:

并在您的表单中使用它：

<%= f.text_field :payment_date, :id => "datepicker", :value => Date.today %>

and add this javascript on the same view of your form

并在表单的同一视图中添加此 javascript

<script>
$('#datepicker').datepicker({format: 'yyyy-mm-dd'});
</script>

回答by Andrew Hacking

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: "dd/mm/yyyy"
      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 Brian Graham

Minor addition to what Andrew Hacking said: your coffeescript will also want to capture the clearDateevent.

Andrew Hacking 所说的一个小补充：你的咖啡脚本也想捕捉这个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) ->`