¿Cómo conecto jQuery Datepicker a mi formulario de Ruby on Rails?

Question

Estoy tratando de usar jQuery Datepicker para establecer un campo de fecha en mi formulario de Ruby on Rails, pero no puedo encontrar la forma de hacerlo. ¿Alguien me puede apuntar en la dirección correcta?

Answer 1

Ryan Bates tiene una muy buena explicación de todo esto:

http://railscasts.com/episodes/213-calendars (versión anterior se puede ver gratis) http://railscasts.com/episodes/213-calendars-revised (versión revisada que necesita una suscripción para ver)

Answer 2

Si usa Rails 3.0+, no debería necesitar hacer nada más que incluir jQuery y jQuery UI porque jQuery es el marco de JavaScript predeterminado.

Si utiliza Rails anterior a la 3.0 o usa Prototype (u otra cosa), necesitará usar jQuery en el modo noConflict. Asegúrese de incluir jQuery después de Prototipo (su otro marco) se ha cargado el uso de algo similar a:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jqueryui.js"></script> 
<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function($) { 
    // here the $ function is jQuery's because it's an argument 
    // to the ready handler 
    $('#dateField').datepicker(); 
    }); 
    // here the $ function is Prototype's 
</script> 

Answer 3

he construido una joya de manejar esto:

https://github.com/albertopq/jquery_datepicker

Espero que ayude a alguien más.

Answer 4

Utilicé jquery_datepicker de albertopq que albertopq menciona y funciona con formularios regulares, atributos anidados, etc. Me facilitó las cosas. jquery_datepicker también pasa correctamente las opciones a las llamadas javascript necesarias de datepicker.

He aquí un ejemplo de una de mis formas anidadas:

<%= f.datepicker 'availability', :minDate => 0, :maxDate => "+8Y", :tab_index => autotab %> 

MinDate y MaxDate se pasan al selector de fechas y tab_index se pone en el campo de texto HTML. (Autotab es solo mi ayudante de formulario para avanzar la pestaña + 1 ... mejor para mí que la codificación).

Answer 5

Por ahora, recomendaría la gema jquery-ui-rails sobre las otras respuestas por la sencilla razón de que puede incluir solo los activos de datepicker sin toda la biblioteca de jquery ui.

https://github.com/joliss/jquery-ui-rails

Answer 6

Puede ser un poco tarde pero yo uso una joya sencilla:

Gemfile: gem 'jquery-ui-rails'

application.js: //= require jquery-ui

application.css *= require jquery-ui

Y luego: Bundle install

Fuente: https://github.com/joliss/jquery-ui-rails

Answer 7

Actualización para rieles 5.x

Paso 1.Instalar el jquery-ui-carriles joya

# gemfile 
gem 'jquery-ui-rails' 

# app/assets/javascripts/application.js 
//= require jquery-ui/widgets/datepicker 

# app/assets/stylesheets/application.css 
*= require jquery-ui/datepicker 

Paso 2. Asumiendo que tiene un recurso llamado evento con un campo de fecha o de fecha y hora se llama: iniciar, a continuación, en la forma que el: iniciar campo de un campo de texto.

# app/views/events/_form.html.erb 
<%= f.label :start, 'Start Date' %> 
<%= f.text_field :start %> 

Paso 3. Agregue Javascript (en la sintaxis CoffeeScript aquí). Línea1) Si tiene Turbolinks habilitado (Turbolinks acelera la carga de la página Rails al hacer clic en un enlace cargándolo con AJAX), necesita agregar un contenedor o la función de JavaScript no se cargará cuando navegue a la página desde un enlace interno .

Line2) Estás apuntando a la identificación del elemento en tu formulario. Rails asigna automáticamente un id a la entrada del formulario combinando el nombre del modelo y el nombre del campo.

Línea3) Debe configurar el formato de fecha porque jQuery-UI y Rails usan diferentes formatos de fecha predeterminados.

# app/assets/javascripts/event.coffee 
$(document).on 'turbolinks:load', -> 
    $('#event_start').datepicker 
    dateFormat: 'yy-mm-dd' 

For Rails 4 todo es igual excepto la primera línea del archivo JavaScript (o CoffeeScript). El contenedor para cargar el JavaScript cuando Turbolinks está habilitado en Rails 4 es:

$(document).on "page:change", ->