Как мне подключить jQuery Datepicker к моей форме Ruby on Rails?

Question

Я пытаюсь использовать jQuery Datepicker для установки поля даты в моей форме Ruby on Rails, но я не могу понять, как это сделать.Может ли кто-нибудь указать мне правильное направление?

Answer 1

Я создал драгоценный камень, чтобы справиться с этим:

https://github.com/albertopq/jquery_datepicker

Надеюсь, это поможет кому-то еще.

Answer 2

У Райана Бейтса есть отличное объяснение всего этого:

http://railscasts.com/episodes/213-calendars (более старую версию можно посмотреть бесплатно) http://railscasts.com/episodes/213-calendars-revised (исправленная версия, для просмотра которой необходима подписка)

Answer 3

На данный момент я бы рекомендовал гем jquery-ui-rails поверх других ответов по той простой причине, что вы можете включать только ресурсы datepicker без всей библиотеки jquery ui!

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

Answer 4

Я использовал jquery_datepicker из albertopq, о котором упоминает albertopq, и он работает с регулярными формами, вложенными атрибутами и т. Д. Это упростило мне задачу. jquery_datepicker также правильно передает параметры для необходимых вызовов javascript DatePicker.

Вот пример из одной из моих вложенных форм:

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

minDate и maxDate передаются в datepicker, а tab_index помещается в текстовое поле html. (autotab - это всего лишь мой помощник по формам для продвижения табуляции + 1 ... лучше для меня, чем жесткое его кодирование).

Answer 5

Обновление для Rails 5.x

Шаг 1. Установите гем 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

Шаг 2. Предположим, у вас есть ресурс с именемСобытие с полем даты или даты и времени: start, затем в форме сделайте поле: start текстовым полем.

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

Шаг 3. Добавьте Javascript (в синтаксисе CoffeeScript здесь).Line1) Если у вас включены Turbolinks (Turbolinks ускоряет загрузку страницы Rails, когда вы нажимаете на ссылку, загружая ее с AJAX), вам нужно добавить оболочку, иначе функция JavaScript не будет загружаться при переходе на страницу из внутренней ссылки,

Line2) Вы нацеливаетесь на идентификатор элемента в своей форме.Rails автоматически назначает идентификатор для ввода формы, комбинируя имя модели и имя поля.

Line3) Вам нужно установить dateFormat, потому что jQuery-UI и Rails используют разные форматы даты по умолчанию.

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

Для Rails 4 все то же самое, за исключением первой строки в файле JavaScript (или CoffeeScript).Оболочка для загрузки JavaScript, когда Turbolinks включен в Rails 4:

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

Answer 6

Может быть немного поздно, но я использую простой гем:

Gemfile: gem 'jquery-ui-rails'

Application.js: //= require jquery-ui

Application.css *= require jquery-ui

А затем: Bundle install

Источник: https://github.com/joliss/jquery-ui-rails

Answer 7

Если вы используете Rails 3.0+, вам не нужно ничего делать, кроме как включить jQuery и jQuery UI, потому что jQuery - это стандартная среда JavaScript по умолчанию.

Если вы используете Rails ранее 3.0 или Prototype (или что-то еще), вам нужно будет использовать jQuery в режиме noConflict . Убедитесь, что вы включили jQuery после загрузки Prototype (вашего другого фреймворка), используя что-то похожее на:

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