ruby on rails - rails - ¿Cómo escribo una entrada de selector de fecha más limpia para SimpleForm

rails forms select

Question

Me encanta la gema simple_form para rieles pero no me gusta esta línea de código:

<%= f.input :deadline, :as => :string, :input_html => { :class => ''date_picker'' } %>

Me gustaría escribir:

<%= f.input :deadline, :as => :date_picker %>

o incluso sobre escribir las :date / :datetime matchers por completo.

Pero realmente no quiero escribir una custom_simple_form completa

Creo que debe ser posible ...

Por favor ayuda gracias

Answer 1

Basado en la respuesta de @kikito, hice esto para obtener un datepicker nativo (es decir, sin clases especiales de JS).

config / initializers / simple_form_datepicker.rb

class SimpleForm::Inputs::DatepickerInput < SimpleForm::Inputs::StringInput 
  def input                    
    input_html_options[:type] = "date"
    super
  end
end

Luego lo usé como:

f.input :paid_on, as: :datepicker

Tenga en cuenta que si también tiene un inicializador simple_form_bootstrap3.rb o similar, como nosotros, debería:

1. agregar DatepickerInput a su lista de entradas
2. asegúrese de que el simple_form_bootstrap3.rb (o similar) se carga después de simple_form_datepicker.rb , de modo que la clase DatepickerInput esté disponible. Hazlo, por ejemplo, cambiando el nombre del inicializador datepicker a simple_form_0_datepicker.rb .

Answer 2

En las nuevas respuestas formtastic previas, las respuestas no funcionan. Ver http://justinfrench.com/notebook/formtastic-2-preview-custom-inputs Aquí hay un ejemplo de trabajo simple (guardar en app / inputs / date_picker_input.rb):

class DatePickerInput < Formtastic::Inputs::StringInput
  def input_html_options
    {
      :class => ''date_picker'',
    }.merge(super).merge({
      :size => ''11''
    })
  end
end

Crea una aplicación de archivo / assets / javascripts / date_picker.js con contenido:

$(function() {
  $("input#.date_picker").datepicker();
});

También necesitas cargar jquery-ui. Para hacerlo, inserte en la línea app / assets / javascripts / application.js:

//= require jquery-ui

o simplemente use CDN, por ejemplo:

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" %>

Las hojas de estilo para jquery-ui pueden incluirse en http://babinho.net/2011/10/rails-3-1-jquery-ui/ o en CDN:

<%= stylesheet_link_tag    "application", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-lightness/jquery-ui.css" %>

Answer 3

Las respuestas aquí parecen un poco desactualizadas si está utilizando simple_form 2.0.

He estado luchando con esto por un tiempo y pude inventar esto; usa herencia (observe que es una subclase de StringInput , no Base ), admite i18n y agrega la clase datepicker css de una manera más limpia, en mi humilde opinión.

# app/inputs/date_picker_input.rb

class DatePickerInput < SimpleForm::Inputs::StringInput 
  def input                    
    value = input_html_options[:value]
    value ||= object.send(attribute_name) if object.respond_to? attribute_name
    input_html_options[:value] ||= I18n.localize(value) if value.present?
    input_html_classes << "datepicker"

    super # leave StringInput do the real rendering
  end
end

El uso es como arriba:

<%= f.input :deadline, :as => :date_picker %>

Y el javascript sigue siendo el mismo:

$("input.date_picker").datepicker();

Answer 4

Otra opción también podría ser sobrescribir el ayudante DateTimeInput predeterminado, aquí hay un ejemplo para colocar en app/inputs/date_time_input.rb

class DateTimeInput < SimpleForm::Inputs::DateTimeInput
  def input
    add_autocomplete!
    @builder.text_field(attribute_name, input_html_options.merge(datetime_options(object.send(attribute_name))))
  end

  def label_target
    attribute_name
  end

  private

    def datetime_options(value = nil)
      return {} if value.nil?

      current_locale = I18n.locale
      I18n.locale = :en

      result = []
      result.push(I18n.localize(value, { :format => "%a %d %b %Y" })) if input_type =~ /date/
      if input_type =~ /time/
        hours_format = options[:"24hours"] ? "%H:%M" : "%I:%M %p"
        result.push(I18n.localize(value, { :format => hours_format }))
      end

      I18n.locale = current_locale

      { :value => result.join('', '').html_safe }
    end

    def has_required?
      options[:required]
    end

    def add_autocomplete!
      input_html_options[:autocomplete] ||= ''off''
    end
end

Tenga en cuenta que al utilizar este método lo convierte en una función de inserción para sus formularios, también puede romperse con las versiones futuras de simple_form.

Aviso sobre fechas localizadas : por lo que sé, Ruby interpreta las fechas siguiendo solo algunos formatos, es posible que desee tener cuidado antes de localizarlos y asegurarse de que Ruby pueda manejarlos. Un intento de mejorar el soporte de localización en el análisis Ruby Date como se inició en https://github.com/ZenCocoon/I18n-date-parser , sin embargo, esto no está funcionando.

Answer 5

DatePickerInput definir una nueva clase DatePickerInput .

module SimpleForm
  module Inputs
    class DatePickerInput < Base
      def input
        @builder.text_field(attribute_name,input_html_options)
      end    
    end
  end
end

Y ahora puedes escribir

<%= f.input :deadline, :as => :date_picker %>

Por supuesto, también necesitas

 $("input.date_picker").datepicker();

en application.js

Esto es muy útil para localizar fechas. Mira este:

module SimpleForm
  module Inputs
    class DatePickerInput < Base
      def input
        @builder.text_field(attribute_name, input_html_options.merge(datepicker_options(object.send(attribute_name))))
      end

      def datepicker_options(value = nil)
        datepicker_options = {:value => value.nil?? nil : I18n.localize(value)}
      end

    end
  end
end

¡Ahora tiene una fecha localizada en el campo de texto!

Actualización: una manera más limpia de hacer lo mismo

module SimpleForm
  module Inputs
    class DatePickerInput < SimpleForm::Inputs::StringInput
      def input_html_options
        value = object.send(attribute_name)
        options = {
          value: value.nil?? nil : I18n.localize(value),
          data: { behaviour: ''datepicker'' }  # for example
        }
        # add all html option you need...
        super.merge options
      end
    end
  end
end

Heredar de SimpleForm::Inputs::StringInput (como dijo @kikito) y agregar algunas opciones html. Si también necesita una clase específica, puede agregar algo como

def input_html_classes
  super.push(''date_picker'')
end