使用不同的html类将两个输入字段初始化为datepicker

时间:2019-03-04 15:10:10

标签: javascript datepicker datetimepicker bootstrap-datepicker bootstrap-datetimepicker

我正在使用bootstrap datepicker gem https://github.com/Nerian/bootstrap-datepicker-rails

在这个gem中,我可以使用simple_form来构建这样的表单,该表单具有两个输入字段,例如:start_date和end_date

 <% simple_form_for @user do |f| %>
   <%= f.input :start_date, :as => :date_time_picker, wrapper_html: {class: 'start-date'} %>
   <%= f.input :end_date, :as => :date_time_picker, wrapper_html: {class: 'end-date'} %>
 <% end %>

我遵循他们的示例,并按如下所示构建了自定义日期时间输入

class DateTimePickerInput < SimpleForm::Inputs::Base
  def input(wrapper_options)
    template.content_tag(:div, class: 'input-group date date-picker') do
      template.concat @builder.text_field(attribute_name, merge_wrapper_options(input_html_options, wrapper_options))
      template.concat span_remove
      template.concat span_table
    end
  end

  def input_html_options
    super.merge({class: 'form-control', readonly: true})
  end

  def span_remove
    template.content_tag(:span, class: 'input-group-addon') do
      template.concat icon_remove
    end
  end

  def span_table
    template.content_tag(:span, class: 'input-group-addon') do
      template.concat icon_table
    end
  end

  def icon_remove
    "<i class='glyphicon glyphicon-remove'></i>".html_safe
  end

  def icon_table
    "<i class='glyphicon glyphicon-th'></i>".html_safe
  end

end

并且我通过javascript初始化了datetimepicker输入字段,如下所示

$('.date-picker').datepicker({
  format: 'yyyy-mm-dd',
  autoclose: true,
  startDate: today
})

我现在的问题是我想将start_date的选定日期设置为end_date的最短日期,但是我不能使用changeDate事件,因为我的两个输入字段都是使用相同的类date-picker。如何使用相似的类定义这两个输入字段,然后可以使用它们在javascript中初始化两个日期选择器并为end_date

执行预期的逻辑

感谢您的帮助

0 个答案:

没有答案