Is there a simple_form helper for this

[cdesch]

Is there a simple_form helper for this plugin?

[cdesch]

I created my own custom simple_form helper

file: app/inputs/tempus_dominus_input.rb

class TempusDominusInput < SimpleForm::Inputs::Base
  def input(wrapper_options)
    template.content_tag(:div, class: 'input-group date', data: { target_input: 'nearest' }, id: "#{object_name}_#{attribute_name}") do
      template.concat @builder.text_field(attribute_name, input_html_options)
      template.concat div_button
    end
  end

  def input_html_options
    super.merge({class: 'form-control datetimepicker-input'})
  end

  def div_button
    template.content_tag(:div, class: 'input-group-append', data: {target: "##{object_name}_#{attribute_name}", toggle: 'datetimepicker'} ) do
      template.concat span_table
    end
  end

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

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

  def icon_table
    "<i class='fa fa-calendar'></i>".html_safe
  end
end

<script>

  $(function () {
    $('#my_object_end_date').datetimepicker({
      defaultDate: '<%= @my_object.end_date %>',
      format: "YYYY-MM-DD HH:mm Z"
    });
  });
</script>

Here is a different stylized version:

file: app/inputs/tempus_dominus_input.rb

class TempusDominusInput < SimpleForm::Inputs::Base
  def input(wrapper_options)
    template.content_tag(:div, class: 'input-group date', data: { target_input: 'nearest' }, id: "#{object_name}_#{attribute_name}") do
      template.concat @builder.text_field(attribute_name, input_html_options)
      template.concat div_button
    end
  end

  def input_html_options
    super.merge({class: 'form-control datetimepicker-input'})
  end

  def div_button
    template.content_tag(:div, class: 'input-group-append', data: {target: "##{object_name}_#{attribute_name}", toggle: 'datetimepicker'} ) do
      template.concat span_button
    end
  end

  def span_button
    template.content_tag(:span, class: 'input-group-btn') do
      template.concat calendar_button
    end
  end

  def calendar_button
    template.button_tag(class: 'btn btn-primary', :type => 'button') do
      template.concat icon_table
    end
  end

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

  def icon_table
    "<i class='fa fa-calendar'></i>".html_safe
  end
end

Any feedback on making this a bit more concise or better would be appreciated.

Edit: Adding file paths for code examples

[Bialogs]

To answer your original question: No I do not have one. I'll give what you posted a look. Thanks.

[cdesch]

Thanks. I just wanted something out of the box that could be easily added using simple_form like this:

<%= f.input :start_date, as: :tempus_dominus %>

Creating a simple_form CustomInput works well too... Others might want it as well. What I'm not sure of is how to make this CustomInput easily adaptable to different bootstrap templates via the variety of html class attributes and wrappers. I think I might have 'brute-forced' this CustomInput for my purposes.

[Bialogs]

In terms of making it more concise I'm OK with the the way you have the class organized. However, I am having the same trouble you are when searching for a general solution to stylization. Everyone is going to be different in terms of how they want it to look for their app.

One thought is to include a generator that will place a TempusDominusInput in the app/inputs directory for use with SimpleForm. This can initially be stylized similar to the default configuration on the TD website? Customization can take place from that file instead of in the view and javascripts.

[epasquali]

Hi can someone help this noob? I'm trying to use this gem to put a datepicker on a haml form, I just can't figure out how to do it. Can someone provide instructions? Like, where does the javascript go, what call does one make, etc? Basic, simple noob instructions/example would be very very welcome. Thx!

[cdesch]

@epasquali I'm not sure how this relates to the thread. You would need to provide code for anyone to help and the code above does not go into any ERB or HAML form.

I'll make it clear where they go.

[kmajor]

@cdesch, I appreciate your effort to bring your datepicker to the Rails community.

As @epasquali was trying to get at, I'm curious how to utilize this in my form?

I attempted <%= f.input :start_date, as: :tempus_dominus %>

I'm getting No input found for tempus_dominus

I'm just looking for an example of how to use this gem in a simple_form? Adding a datepicker has been more difficult than I expected.

[Bialogs]

@kmajor the first comment from @cdesch would be how you get started. This issue is open to track anyone that wants to include the simple form integration in the gem.

[Jaco-Pretorius]

I've been using this picker but I noticed that it didn't have the behavior of closing when you clicked elsewhere on the page (which is the default if you look at all the example code). You also need the data-target attribute on the input, otherwise that behavior won't work.

Also, this input example wasn't surfacing the default rails error styling, so I had to modify it a bit to get that part to work.

  def input(wrapper_options)
    wrapper_css_classes = %w[input-group date datetimepicker-group]
    wrapper_css_classes << wrapper_options[:error_class] if has_errors?

    template.content_tag(:div, class: wrapper_css_classes.join(' '), data: { target_input: 'nearest' }, id: "#{object_name}_#{attribute_name}_datetimepicker") do
      template.concat @builder.text_field(attribute_name, input_html_options)
      template.concat div_button
    end
  end

  def input_html_options
    super.tap do |options|
      custom_css_classes = %w[form-control datetimepicker-input]
      custom_css_classes << 'is-invalid' if has_errors?
      options[:class] = (options[:class] + custom_css_classes).uniq

      options[:data] ||= {}
      options[:data][:target] = "##{object_name}_#{attribute_name}_datetimepicker"
    end
  end

[gdomingu]

I had the same problem as @Jaco-Pretorius where the dropdown wasn't closing when you clicked elsewhere. I needed to change the data-target on the div-button as well to match the id "#{object_name}_#{attribute_name}_datetimepicker" . So here is the entire thing that works for me.

class TempusDominusInput < SimpleForm::Inputs::Base
  def input(wrapper_options)
    wrapper_css_classes = %w[input-group date datetimepicker-group]
    wrapper_css_classes << wrapper_options[:error_class] if has_errors?

    template.content_tag(:div, class: wrapper_css_classes.join(' '), data: { target_input: 'nearest' }, id: "#{object_name}_#{attribute_name}_datetimepicker") do
      template.concat @builder.text_field(attribute_name, input_html_options)
      template.concat div_button
    end
  end

  def input_html_options
    super.tap do |options|
      custom_css_classes = %w[form-control datetimepicker-input]
      custom_css_classes << 'is-invalid' if has_errors?
      options[:class] = (options[:class] + custom_css_classes).uniq

      options[:data] ||= {}
      options[:data][:target] = "##{object_name}_#{attribute_name}_datetimepicker"
    end
  end

  private

  def div_button
    template.content_tag(:div, class: 'input-group-append', data: {target: "##{object_name}_#{attribute_name}_datetimepicker", toggle: 'datetimepicker'} ) do
      template.concat span_table
    end
  end

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

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

  def icon_table
    "<i class='fa fa-calendar'></i>".html_safe
  end

end