我如何为SimpleForm编写一个更干净的dateselect器input

我喜欢rails的simple_form gem,但是我不喜欢这行代码:

 <%= f.input :deadline, :as => :string, :input_html => { :class => 'date_picker' } %> 

我想写:

 <%= f.input :deadline, :as => :date_picker %> 

甚至可以完全写入:date / :datetime匹配器。

但我真的不想写一个完整的custom_simple_form

我认为这一定是可能的…

请帮忙谢谢

你必须定义一个新的DatePickerInput类。

 module SimpleForm module Inputs class DatePickerInput < Base def input @builder.text_field(attribute_name,input_html_options) end end end end 

你现在可以写

 <%= f.input :deadline, :as => :date_picker %> 

当然你也需要

  $("input.date_picker").datepicker(); 

application.js

这对于本地化date非常有用。 看这个:

 module SimpleForm module Inputs class DatePickerInput < Base def input @builder.text_field(attribute_name, input_html_options.merge(datepicker_options(object.send(attribute_name)))) end def datepicker_options(value = nil) datepicker_options = {:value => value.nil?? nil : I18n.localize(value)} end end end end 

你现在已经在文本字段中的本地化date!

更新:更干净的方式来做同样的事情

 module SimpleForm module Inputs class DatePickerInput < SimpleForm::Inputs::StringInput def input_html_options value = object.send(attribute_name) options = { value: value.nil?? nil : I18n.localize(value), data: { behaviour: 'datepicker' } # for example } # add all html option you need... super.merge options end end end end 

SimpleForm::Inputs::StringInputinheritance(如@ kikito所述)并添加一些html选项。 如果你还需要一个特定的类,你可以添加类似的东西

 def input_html_classes super.push('date_picker') end 

这里的答案似乎有点过时,如果你使用的是simple_form 2.0。

我一直在与这个战斗一段时间,并能够调制这一点; 它使用inheritance(注意它是StringInput的子类,而不是Base ),支持i18n,并以更干净的方式添加datepicker css类,恕我直言。

 # app/inputs/date_picker_input.rb class DatePickerInput < SimpleForm::Inputs::StringInput def input value = input_html_options[:value] value ||= object.send(attribute_name) if object.respond_to? attribute_name input_html_options[:value] ||= I18n.localize(value) if value.present? input_html_classes << "datepicker" super # leave StringInput do the real rendering end end 

用法如上:

 <%= f.input :deadline, :as => :date_picker %> 

而JavaScript保持不变:

 $("input.date_picker").datepicker(); 

基于@ kikito的答案,我做了这个获得本机dateselect器(即没有特殊的JS类)。

configuration/初始化/ simple_form_datepicker.rb

 class SimpleForm::Inputs::DatepickerInput < SimpleForm::Inputs::StringInput def input input_html_options[:type] = "date" super end end 

然后用它像:

 f.input :paid_on, as: :datepicker 

请注意,如果您也有一个simple_form_bootstrap3.rb初始化程序或类似的,就像我们一样,您应该:

  1. DatepickerInput添加到其input列表
  2. 确保simple_form_bootstrap3.rb (或类似的)初始化程序 simple_form_datepicker.rb 之后 simple_form_datepicker.rb ,以便simple_form_datepicker.rb类可用。 通过例如将dateselect器初始化simple_form_0_datepicker.rb命名为simple_form_0_datepicker.rb

其他选项也可以覆盖默认的DateTimeInput助手,这里是一个例子,放在app/inputs/date_time_input.rb

 class DateTimeInput < SimpleForm::Inputs::DateTimeInput def input add_autocomplete! @builder.text_field(attribute_name, input_html_options.merge(datetime_options(object.send(attribute_name)))) end def label_target attribute_name end private def datetime_options(value = nil) return {} if value.nil? current_locale = I18n.locale I18n.locale = :en result = [] result.push(I18n.localize(value, { :format => "%a %d %b %Y" })) if input_type =~ /date/ if input_type =~ /time/ hours_format = options[:"24hours"] ? "%H:%M" : "%I:%M %p" result.push(I18n.localize(value, { :format => hours_format })) end I18n.locale = current_locale { :value => result.join(', ').html_safe } end def has_required? options[:required] end def add_autocomplete! input_html_options[:autocomplete] ||= 'off' end end 

请注意,在使用这种方法的时候,这会使其成为窗体的拖放function,也可能会破坏未来版本的simple_form。

关于本地化的date的注意事项 :据我所知,Ruby只解释了几个格式的date,你可能要在本地化之前小心,并确保Ruby能够处理它们。 https://github.com/ZenCocoon/I18n-date-parser上启动了Ruby Dateparsing的更好的本地化支持的尝试,但是这不起作用。

在新的formtastic预览答案不起作用。 请参阅http://justinfrench.com/notebook/formtastic-2-preview-custom-inputs这是一个简单的工作示例(保存到app / inputs / date_picker_input.rb):

 class DatePickerInput < Formtastic::Inputs::StringInput def input_html_options { :class => 'date_picker', }.merge(super).merge({ :size => '11' }) end end 

创build一个文件的应用程序/ assets / javascripts / date_picker.js与内容:

 $(function() { $("input#.date_picker").datepicker(); }); 

你也需要加载jquery-ui。 为此,请插入到app / assets / javascripts / application.js行:

 //= require jquery-ui 

或者简单地使用CDN例如:

 <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" %> <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" %> 

样式表jquery-ui coul be inclded http://babinho.net/2011/10/rails-3-1-jquery-ui/或从CDN:;

 <%= stylesheet_link_tag "application", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-lightness/jquery-ui.css" %>