Bootstrap datepicker默认值为simple_form_for

zur*_*rik 4 ruby ruby-on-rails ruby-on-rails-3 simple-form

我正在使用引导日期选择器来使用simple_form_for在表单中选择日期.例如

  <%= f.input :payment_date, as: :string, input_html: { class: "datepicker" } %>
Run Code Online (Sandbox Code Playgroud)

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

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

jua*_*tas 11

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

另一种格式是:(使用活动的admin gem)

f.input :date, as: :date_picker, :input_html => { :value => Date.today}
Run Code Online (Sandbox Code Playgroud)


All*_*hun 8

您也可以使用此gem: https ://github.com/Nerian/bootstrap-datepicker-rails

在你的gemfile.rb上

gem 'bootstrap-datepicker-rails'
Run Code Online (Sandbox Code Playgroud)

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

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

 *= require bootstrap-datepicker
Run Code Online (Sandbox Code Playgroud)

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

 //= require bootstrap-datepicker
Run Code Online (Sandbox Code Playgroud)

并在您的表单中使用此:

<%= f.text_field :payment_date, :id => "datepicker", :value => Date.today %>
Run Code Online (Sandbox Code Playgroud)

并在表单的同一视图上添加此JavaScript

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


And*_*ing 5

我还需要使用它并支持多个不使用以美国为中心的日期格式的语言环境,例如:en-AU(澳大利亚),其日期格式为dd/mm/yyyy.

问题

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

解决方案

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

结果是你可以在rails中有一个很好的bootstrap日期选择器,并使用simple_form,如下所示:

<%= f.input :date, as: :bootstrap_datepicker %>
Run Code Online (Sandbox Code Playgroud)

或者使用长日期格式:

<%= f.input :date, as: :bootstrap_datepicker, input_html: { format: :long } %>
Run Code Online (Sandbox Code Playgroud)

履行

创建或编辑以下文件:

的Gemfile

gem 'bootstrap-sass'
gem 'bootstrap-datepicker-rails'
Run Code Online (Sandbox Code Playgroud)

配置/区域设置/ EN-AU.yml

en-AU:
  date:
    datepicker:
      default: "dd/mm/yyyy"
      long: "dd MM, yyyy"
    formats:
      default: ! '%d/%m/%Y'
      long: ! '%d %B, %Y'
Run Code Online (Sandbox Code Playgroud)

配置/区域设置/ EN-US.yml

en-US:
  date:
    datepicker:
      default: "mm/dd/yyyy"
      long: "MM dd, yyyy"
    formats:
      default: "dd/mm/yyyy"
      long: ! '%B %d, %Y'
Run Code Online (Sandbox Code Playgroud)

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

@import "bootstrap-responsive";
@import "bootstrap-datepicker";
Run Code Online (Sandbox Code Playgroud)

应用程序/资产/ JavaScript的/ application.js.coffee

#= require bootstrap
#= require bootstrap-datepicker
#= require bootstrap-datepicker-rails
Run Code Online (Sandbox Code Playgroud)

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

//= require bootstrap
//= require bootstrap-datepicker
//= require bootstrap-datepicker-rails
Run Code Online (Sandbox Code Playgroud)

应用程序/资产/ 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)
Run Code Online (Sandbox Code Playgroud)

应用程序/输入/ 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
Run Code Online (Sandbox Code Playgroud)