rails 表单集成foundition时间选择器

首先在rails form的基础自定义自己的form，

application_helper.rb

def jxcat_form_for(object, *args, &block)    options = args.extract_options!    simple_form_for(object, *(args << options.merge(builder: JxcatFormBuilder)), &block)  end

class JxcatFormBuilder < SimpleForm::FormBuilder  delegate :content_tag, :link_to, :icon, :safe_join, :raw, to: :@templateend

集成foundition时间选择器

在package.json添加"foundation-datepicker": "1.5.6",

rails集成

class JxcatFormBuilder < SimpleForm::FormBuilder  delegate :content_tag, :link_to, :icon, :safe_join, :raw, to: :@template  require 'time'    def datatime_picker(attribute_name, options = {})    input(attribute_name, options) do      content_tag :div, class: 'datatime-picker', data: options[:data] do        value = object.send(attribute_name)        unless value.blank?          value = Time.parse("#{value}").strftime('%Y-%m-%d %H:%M')        end        icon_tag = icon('clock-o')        tip_tag = safe_join([raw(icon_tag), '日期'])        input_tag = content_tag :input,                      '',                      class: 'datatime-picker-button',                      value: value                              hidden = hidden_field attribute_name, class: 'datatime-picker-field', value: value                [input_tag, tip_tag, hidden].join&.html_safe      end    end  endend

js集成

$('.datatime-picker .datatime-picker-button').fdatepicker({    format: 'yyyy-mm-dd hh:ii',    disableDblClickSelection: true,    language: 'vi',    pickTime: true  }).on('changeDate', () => {    const selectDate = $('.datatime-picker .datatime-picker-button').val()    $('.datatime-picker .datatime-picker-field').val(selectDate)  })

使用：

<%= jxcat_form_for [:backend, @shop], wrapper: :horizontal_form, method: 'PUT' do |f| %>
  <%= f.datatime_picker :expired_at, label: '过期时间' %>
<% end %>