代码之家 › 专栏 › 技术社区 › Blair Anderson

javascript头的简单形式自定义输入?

simple-form ruby-on-rails

Blair Anderson · 技术社区 · 7 年前

datepicker 想要创建一个自定义的简单的表单输入

目前,我在每个表单上都执行以下操作:

<link rel="stylesheet" href="/datepicker/master/dist/datepicker.min.css">
<script src="/datepicker/master/dist/datepicker.min.js"></script>

<%= simple_form_for(myobj) do |f| %>
  <%= f.input :some_date, as: :string, input_html: {class: "datepicker", onchange: "this.form.submit();", autocomplete: "off"} %>
<% end %>

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

这在第一次之后很烦人,所以我创建了一个自定义输入:

# app/inputs/datepicker_input.rb
class DatepickerInput < SimpleForm::Inputs::Base
  def input(wrapper_options={})
    wrapper_options.symbolize_keys!
    wrapper_options[:input_html] ||= {class: 'datepicker', onchange: 'this.form.submit();', autocomplete: 'off'}
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

    template.content_for(:head) do
      [
        template.stylesheet_link_tag('https://rawgit.com/fengyuanchen/datepicker/master/dist/datepicker.min.css'),
        template.javascript_include_tag('https://rawgit.com/fengyuanchen/datepicker/master/dist/datepicker.min.js')
      ].join.html_safe
    end

    js = <<JS
<script type="text/javascript">
$(function() {$(".datepicker").datepicker({format: "yyyy-mm-dd"});});
</script>
JS

    template.content_for(:javascript) { js.html_safe }
    @builder.text_field(attribute_name, merged_input_options).html_safe
  end
end

我可以这样做:

<%= simple_form_for(myobj) do |f| %>
  <%= f.input :some_date, as: :my_datepicker %>
<% end %>

0 回复 | 直到 7 年前

Blair Anderson 7 年前

下面是一个简单的“表单日期选择器”自定义输入:

# app/inputs/datepicker_input.rb
class DatepickerInput < SimpleForm::Inputs::Base
  def input(wrapper_options={})
    wrapper_options.symbolize_keys!
    wrapper_options[:input_html] ||= {class: 'datepicker', onchange: 'this.form.submit();', autocomplete: 'off'}
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

    unless template.instance_variable_get(:@submitted_content_for_head)
      # prevents from being inserted twice
      template.instance_variable_set(:@submitted_content_for_head, true)
      template.content_for(:head) do
        [
          template.stylesheet_link_tag('https://rawgit.com/fengyuanchen/datepicker/master/dist/datepicker.min.css'),
          template.javascript_include_tag('https://rawgit.com/fengyuanchen/datepicker/master/dist/datepicker.min.js')
        ].join.html_safe
      end
    end

    unless template.instance_variable_get(:@submitted_content_for_footer)
      # prevents from being inserted twice
      template.instance_variable_set(:@submitted_content_for_footer, true)

      js = <<JS
<script type="text/javascript">
$(function() {$(".datepicker").datepicker({format: "yyyy-mm-dd"});});
</script>
JS

      template.content_for(:javascript) { js.html_safe }
    end

    @builder.text_field(attribute_name, merged_input_options).html_safe
  end
end

-1

San 7 年前