我如何为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初始化程序或类似的，就像我们一样，您应该：
- 将
DatepickerInput添加到其input列表 - 确保
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" %>
