web-dev-qa-db-fra.com

Comment connecter jQuery Datepicker à mon Ruby on Rails form?

J'essaie d'utiliser le jQuery Datepicker pour définir un champ de date dans mon Ruby on Rails form, mais je ne peux pas savoir comment le faire) . Quelqu'un peut me diriger dans la bonne direction?

jqueryruby-on-railsjquery-uijquery-ui-datepicker
32
ben

Ryan Bates a une très bonne explication de tout cela:

http://railscasts.com/episodes/213-calendars (ancienne version que vous pouvez regarder gratuitement) http://railscasts.com/episodes/213-calendars-revised = (version révisée dont vous avez besoin d'un abonnement pour regarder)

16
Christian Bankester

J'ai construit un bijou pour gérer cela:

https://github.com/albertopq/jquery_datepicker

J'espère que cela aide quelqu'un d'autre.

17
albertopq

À partir de maintenant, je recommanderais le joyau jquery-ui-Rails au-dessus des autres réponses pour la simple raison que vous ne pouvez inclure que les actifs de datepicker sans la bibliothèque jquery ui entière!

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

5
Damien Roche

J'ai utilisé jquery_datepicker d'albertopq que mentionne albertopq et cela fonctionne avec des formulaires réguliers, des attributs imbriqués, etc. Cela m'a rendu les choses très faciles. jquery_datepicker transmet également correctement les options aux appels javascript nécessaires de datepicker.

Voici un exemple de l'un de mes formulaires imbriqués:

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

minDate et maxDate sont passés à datepicker et tab_index est placé dans le champ de texte html. (Autotab est juste mon aide de formulaire pour faire avancer l'onglet + 1 ... mieux pour moi que de le coder en dur).

4
Kevin from MBioEX

Mise à jour pour Rails 5.x

Étape 1. Installez la gemme 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

Étape 2. En supposant que vous disposez d'une ressource appelée Événement avec un champ date ou datetime appelé: début, puis dans le formulaire, faites du: champ de début un champ de texte.

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

Étape 3. Ajoutez Javascript (dans la syntaxe CoffeeScript ici). Line1) Si Turbolinks est activé (Turbolinks accélère Rails la page se charge lorsque vous cliquez sur un lien en le chargeant avec AJAX), vous devez ajouter un wrapper ou la fonction JavaScript ne se chargera pas lorsque vous accédez à la page à partir d'un lien interne.

Line2) Vous ciblez l'ID d'élément dans votre formulaire. Rails attribue automatiquement un identifiant à l'entrée du formulaire en combinant le nom du modèle et le nom du champ.

Line3) Vous devez définir la dateFormat car jQuery-UI et Rails utilisent différents formats de date par défaut.

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

Pour Rails 4 tout est identique sauf la première ligne du fichier JavaScript (ou CoffeeScript). L'encapsuleur pour charger le JavaScript lorsque Turbolinks est activé dans Rails 4 est:

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

Il peut être un peu tard mais j'utilise un petit bijou:

Gemfile: gem 'jquery-ui-Rails'

Application.js: //= require jquery-ui

Application.css *= require jquery-ui

Puis: Bundle install

Source: https://github.com/joliss/jquery-ui-Rails

1
Francois

Si vous utilisez Rails 3.0+, vous ne devriez pas avoir besoin de faire autre chose que d'inclure jQuery et jQuery UI car jQuery est le framework JavaScript par défaut.

Si vous utilisez Rails plus tôt que 3.0 ou utilisez Prototype (ou autre chose), vous devrez utiliser jQuery en mode noConflict . Assurez-vous d'inclure jQuery après Prototype ( votre autre framework) a été chargé en utilisant quelque chose de similaire à:

<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
tvanfosson