mconf / mconf-web

GNU Affero General Public License v3.0
123 stars 86 forks source link

Simple form field for date and time #608

Open mconf-daileon opened 8 years ago

mconf-daileon commented 8 years ago

Author Name: Leonardo Daronco (Leonardo Daronco) Original Redmine Issue: 1262, http://dev.mconf.org/redmine/issues/1262


Create a simple form field to simplify how we add datetime pickers to forms. Right now we manually add the HTML tags and use a js library to render a calendar to pick the date/time. It could be a simple line in the view, such as @= f.input :date, :as => :datetime@, that would render all tags needed.

mconf-daileon commented 8 years ago

Original Redmine Comment Author Name: Leonardo Daronco (Leonardo Daronco) Original Date: 2015-10-01T17:50:28Z


This might be a solution: https://github.com/plataformatec/simple_form/wiki/Custom-inputs-examples#date-time-picker-for-twitter-bootstrap-3-using-the-datetimepicker-js-library

Just in case it's removed, the contents are:

## app/inputs/date_time_picker_input.rb
class DateTimePickerInput < SimpleForm::Inputs::Base
  def input
    template.content_tag(:div, class: 'input-group date form_datetime') do
      template.concat @builder.text_field(attribute_name, input_html_options)
      template.concat span_remove
      template.concat span_table
    end
  end

  def input_html_options
    {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

1. To use add this to an appropriate coffee script file
$(document).ready ->
  $('.form_datetime').datetimepicker({
    autoclose: true,
    todayBtn: true,
    pickerPosition: "bottom-left",
    format: 'mm-dd-yyyy hh:ii'
  });

1. call on simple form input with
f.input :my_date, as: :date_time_picker