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

Ответ 1

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

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

Ответ 2

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

https://github.com/albertopq/jquery_datepicker

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

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

Шаг 1. Установите jquery-ui-rails gem

# 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. Предполагая, что у вас есть ресурс с названием Event с полем даты или даты, называемым: start, затем в форме введите: start field текстовое поле.

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

Ответ 6

Если вы используете 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 because it an argument
    // to the ready handler
    $('#dateField').datepicker();
  });
  // here the $ function is Prototype's
</script>

Ответ 7

Возможно, немного поздно, но я использую простой камень:

Gemfile: gem 'jquery-ui-rails'

application.js: //= require jquery-ui

Application.css *= require jquery-ui

И затем: Bundle install

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