Как мне подключить jQuery Datepicker к моей форме Ruby on Rails?
Я пытаюсь использовать jQuery Datepicker для установки поля даты в моей форме Ruby on Rails, но я не могу понять, как это сделать. Может ли кто-нибудь указать мне правильное направление?
7 ответов
У Райана Бейтса есть отличное объяснение всего этого:
http://railscasts.com/episodes/213-calendars (более старую версию можно посмотреть бесплатно) http://railscasts.com/episodes/213-calendars-revised (исправленная версия, для просмотра которой требуется подписка)
Я построил драгоценный камень, чтобы справиться с этим:
https://github.com/albertopq/jquery_datepicker
Надеюсь, это поможет кому-то еще.
На данный момент я бы рекомендовал гем jquery-ui-rails поверх других ответов по той простой причине, что вы можете включать только ресурсы DatePicker без всей библиотеки jquery ui!
Я использовал 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... лучше для меня, чем жесткое его кодирование).
Обновление для 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. Предполагая, что у вас есть ресурс с именем Event с полем даты или даты и времени: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 не будет загружаться при переходе на страницу из внутренней ссылки.,
Строка 2) Вы нацеливаетесь на идентификатор элемента в вашей форме. 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", ->
Если вы используете 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>
Это может быть немного поздно, но я использую простой драгоценный камень:
Gemfile:gem 'jquery-ui-rails'
application.js://= require jquery-ui
Application.css*= require jquery-ui
А потом:Bundle install