Bootstrap-Datepicker не отображается с помощью Bootstrap-SASS

Я пытаюсь использовать Bootstrap Datepicker в форме, которую я создаю. Я прочитал документацию здесь: https://github.com/Nerian/bootstrap-datepicker-rails/issues/11 и следовал за ней (или я так думал), но я застрял.

Gemfile:
gem 'bootstrap-sass', '2.0.4'
gem 'bootstrap-datepicker-rails'

приложение / активы / JavaScripts / application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-datepicker
//= require_tree .

app / assets / javascripts / orders.js.coffee (я преобразовал JavaScript в CoffeeScript)

$("[data-behaviour~='datepicker']").datepicker(
  format: "yyyy-mm-dd"
  weekStart: 1
  autoclose: true
).on "changeDate", (e) ->

приложение / стилей / application.css.scss

 *= require_self
 *= require bootstrap-datepicker
 *= require_tree .
 */

Форма (соответствующая часть, во всяком случае):

<%= form_for [@user, @order] do |order_form| %>

  <%= order_form.label "When would you like us to pick up your stuff?" %>
  <%= order_form.text_field :order_date, placeholder: "yyyy-mm-dd", 'data-behaviour' => 'datepicker' %> 

<% end %>   

Когда я захожу в консоль, я могу вызвать метод datepicker() для элемента и управлять его свойствами оттуда. Но по какой-то причине он не работает, когда страница загружается. И в консоли нет ошибок.

(основываясь на том, что я прочитал здесь: Твиттер-загрузчик Twitter не работает в rails, я попробовал функцию require_self и поместил javascript в файл application.js. Это не сработало, и мне не понравилась идея иметь в любом случае javascript в файле application.js...)

1 ответ

Решение

Мне не удалось интегрировать Twitter Bootstrap Datepicker с моим приложением. Вместо этого я использовал стандартный инструмент выбора даты jQuery и выбирал тему, соответствующую моему приложению. Мой код в итоге выглядел так:

В виде:

<%= order_form.label "When would you like us to pick up your stuff?" %>
<%= order_form.text_field :order_date, id:"datepicker" %>

Кофейня:

$ ->
  $("#datepicker").datepicker({
    minDate: +1,
    dateFormat:"yy-mm-dd"
  })

Я добавил эту строку в начало моего файла custom.css (до @import bootstrap линия)

@import url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css);

в application.css.scss (обратите внимание, что я удалил require_bootstrap-datepicker)

 *= require_self
 *= require_tree .
 */

И я удалил драгоценный камень из своего файла драгоценного камня.

Я не знаю, как иначе выглядел бы плагин Twitter Bootstrap, но эта тема отлично работала для моего приложения.

Другие вопросы по тегам