Pertanyaan Bagaimana cara menghubungkan jQuery Datepicker ke bentuk Ruby on Rails saya?


Saya mencoba menggunakan jQuery Datepicker untuk mengatur bidang tanggal dalam bentuk Ruby on Rails saya, tetapi saya tidak dapat mengetahui cara melakukannya. Bisakah seseorang mengarahkan saya ke arah yang benar?


32
2017-07-25 13:40


asal


Jawaban:


Ryan Bates memiliki penjelasan yang sangat bagus tentang semua ini:

http://railscasts.com/episodes/213-calendars (versi lama yang dapat Anda tonton secara gratis) http://railscasts.com/episodes/213-calendars-revised (versi revisi Anda perlu berlangganan untuk menonton)


16
2017-07-26 00:54



Saya telah membangun permata untuk menangani ini:

https://github.com/albertopq/jquery_datepicker

Semoga itu membantu orang lain.


17
2017-10-16 19:40



Sampai sekarang, saya akan merekomendasikan permata jquery-ui-rel di atas jawaban lain untuk alasan sederhana Anda dapat menyertakan hanya aset datepicker tanpa seluruh jquery ui library!

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


5
2017-11-09 06:36



Saya menggunakan jquery_datepicker albertopq yang disebutkan oleh albertopq dan ia bekerja dengan bentuk-bentuk biasa, atribut yang disarangkan, dll. Hal itu membuat semuanya menjadi sangat mudah bagi saya. jquery_datepicker juga melewatkan opsi dengan tepat untuk panggilan javascript yang diperlukan datepicker.

Berikut ini contoh dari salah satu bentuk bersarang saya:

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

minDate dan maxDate dilewatkan ke datepicker dan tab_index dimasukkan ke dalam bidang teks html. (autotab hanya pembantu formulir saya untuk memajukan tab + 1 ... lebih baik bagi saya daripada hardcoding itu).


4
2017-11-06 21:48



Pembaruan untuk Rails 5.x

Langkah 1. Instal permata 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

Langkah 2. Dengan asumsi Anda memiliki sumber daya yang disebut Peristiwa dengan bidang tanggal atau datetime yang disebut: mulai, lalu dalam formulir buat: mulailah kolom bidang teks.

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

Langkah 3. Tambahkan Javascript (dalam sintaks CoffeeScript di sini). Baris 1) Jika Anda mengaktifkan Turbolinks (Turbolink mempercepat beban halaman Rails ketika Anda mengklik tautan dengan memuatnya dengan AJAX) Anda perlu menambahkan pembungkus atau fungsi JavaScript tidak akan memuat ketika Anda menavigasi ke halaman dari tautan internal .

Baris 2) Anda menargetkan id elemen dalam formulir Anda. Rails secara otomatis memberikan id ke input form dengan menggabungkan nama Model dan nama field.

Line3) Anda perlu mengatur tanggalFormat karena jQuery-UI dan Rails menggunakan format tanggal default yang berbeda.

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

Untuk Rails 4 semuanya sama kecuali baris pertama dalam file JavaScript (atau CoffeeScript). Pembungkus untuk memuat JavaScript ketika Turbolinks diaktifkan di Rails 4 adalah:

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

2
2018-04-08 02:45



Jika menggunakan Rails 3.0+, Anda tidak perlu melakukan apa pun selain menyertakan jQuery dan jQuery UI karena jQuery adalah framework JavaScript default.

Jika menggunakan Rails lebih awal dari 3.0 atau menggunakan Prototype (atau sesuatu yang lain), Anda harus menggunakan jQuery di noConflict mode. Pastikan Anda menyertakan jQuery setelah Prototype (kerangka kerja lainnya) telah dimuat menggunakan sesuatu yang mirip dengan:

<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



Mungkin sedikit terlambat tetapi saya menggunakan permata sederhana:

Gemfile: gem 'jquery-ui-rails'

Application.js: //= require jquery-ui

Application.css *= require jquery-ui

Lalu: Bundle install

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


1
2017-09-19 09:00