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


Intento utilizar 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?


32
2017-07-25 13:40


origen


Respuestas:


Ryan Bates tiene una gran explicación de todo esto:

http://railscasts.com/episodes/213-calendars (versión más antigua que puedes ver gratis) http://railscasts.com/episodes/213-calendars-revised (versión revisada necesita una suscripción para mirar)


16
2017-07-26 00:54



Construí una gema para manejar esto:

https://github.com/albertopq/jquery_datepicker

Espero que ayude a alguien más.


17
2017-10-16 19:40



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


5
2017-11-09 06:36



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.

Aquí hay un ejemplo de uno de mis formularios anidados:

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

minDate y maxDate se pasan a datepicker y tab_index se coloca 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).


4
2017-11-06 21:48



Actualización para Rails 5.x

Paso 1. Instala la gema jquery-ui-rails

# 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. Suponiendo que tiene un recurso llamado Evento con un campo de fecha o de fecha y hora llamado: inicio, en el formulario, haga que el campo: inicio sea 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 de 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 forma. 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'

Para 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", ->

2
2018-04-08 02:45



Si utiliza 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 usa Rails anterior a 3.0 o usa Prototype (u otra cosa), necesitará usar jQuery en no conflicto modo. Asegúrese de incluir jQuery después de que se haya cargado Prototype (su otro framework) usando 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>

1
2017-07-25 14:17



Puede ser un poco tarde pero utilizo una gema simple:

Gemfile: gem 'jquery-ui-rails'

Application.js: //= require jquery-ui

Application.css *= require jquery-ui

Y entonces: Bundle install

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


1
2017-09-19 09:00