Come collego jQuery Datepicker al mio modulo Ruby on Rails?

Question

Sto provando ad usare il jQuery Datepicker per impostare un campo data nel mio modulo Ruby on Rails, ma non riesco a capire come farlo. Qualcuno può indicarmi la giusta direzione?

Answer 1

Ryan Bates ha davvero un grande spiegazione di tutto questo:

http://railscasts.com/episodes/213-calendars (versione precedente è possibile guardare gratis) http://railscasts.com/episodes/213-calendars-revised (versione rivista è necessario un abbonamento per guardare)

Answer 2

Se si utilizza Rails 3.0+, non è necessario fare altro che includere jQuery e jQuery UI perché jQuery è il framework JavaScript predefinito.

Se si utilizzano Rails precedenti alla 3.0 o si utilizza Prototype (o altro), è necessario utilizzare jQuery nella modalità noConflict. Assicurati di includere jQuery dopo Prototype (l'altra quadro) è stata eseguita utilizzando qualcosa di simile 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

ho costruito un gioiello per gestire questa situazione:

https://github.com/albertopq/jquery_datepicker

Spero che aiuti qualcun altro.

Answer 4

Ho usato il jquery_datepicker di albertopq che menziona albertopq e funziona con moduli regolari, attributi nidificati, ecc. Ha reso le cose molto facili per me. jquery_datepicker passa anche correttamente le opzioni alle chiamate javascript necessarie di datepicker.

Ecco un esempio di uno dei miei moduli annidati:

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

MinDate e MaxDate vengono passati al datepicker e tab_index viene messo nel campo di testo HTML. (l'autotab è solo il mio aiuto di forma per far avanzare la scheda + 1 ... meglio per me che l'hardcoding).

Answer 5

A partire da ora, consiglierei jquery-ui-rails gem sopra le altre risposte per il semplice motivo che è possibile includere solo le risorse datepicker senza l'intera libreria ui jquery!

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

Answer 6

Può essere un po 'tardi, ma io uso un semplice gioiello:

Gemfile: gem 'jquery-ui-rails'

application.js: //= require jquery-ui

application.css *= require jquery-ui

E poi: Bundle install

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

Answer 7

Aggiornamento per Rails 5.x

Fase 1.Installare il jquery-ui-rails gemma

# gemfile 
gem 'jquery-ui-rails' 

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

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

Fase 2. Supponendo di avere una risorsa chiamata evento con una data o datetime campo chiamato: inizio, poi nella forma rendere il: avviare campo di un campo di testo.

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

Passaggio 3. Aggiungi javascript (nella sintassi di CoffeeScript qui). Line1) Se hai Turbolinks abilitati (Turbolinks accelera la pagina di Rails si carica quando fai clic su un link caricandolo con AJAX) devi aggiungere un wrapper o la funzione JavaScript non verrà caricata quando navighi sulla pagina da un collegamento interno .

Linea2) Hai scelto come target l'id dell'elemento nel modulo. Rails assegna automaticamente un ID all'input del modulo combinando il nome del modello e il nome del campo.

Line3) È necessario impostare dataFormat perché jQuery-UI e Rails utilizzano diversi formati di data predefiniti.

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

Per Rails 4 tutto è uguale tranne la prima riga nel file JavaScript (o CoffeeScript). Il wrapper per caricare JavaScript quando Turbolinks è abilitato in Rails 4 è:

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