Question

I’m trying to use the Bootstrap Datepicker on a form I’m creating. I’ve read through the documentation here: https://github.com/Nerian/bootstrap-datepicker-rails/issues/11 and followed it (or so I thought), but I’m stuck.

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

app/assets/javascripts/application.js

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

app/assets/javascripts/orders.js.coffee (I converted the javascript to CoffeeScript)

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

app/stylesheets/application.css.scss

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

The form (the relevant part, anyway):

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

When I go into the console, I can call the datepicker() method on an element and manipulate its properties from there. But, for whatever reason, it’s not working when the page loads. And there aren’t any errors in the console.

(based on what I read here: Twitter bootstrap datepicker is not working in rails, I tried the require_self thing and putting the javascript in the application.js file, too. It didn’t work and I didn’t like the idea of having javascript in the application.js file anyway…)

Answer 1

I was unsuccessful in integrating Twitter Bootstrap Datepicker with my application. Instead, I used a standard jQuery datepicker and picking a theme that matched my application. My code ended up looking like this:

In the form:

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

The coffeescript:

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

I added this line to the top of my custom.css file (before the @import bootstrap line)

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

in application.css.scss (notice I removed require_bootstrap-datepicker)

 *= require_self
 *= require_tree .
 */

And I removed the gem from my gem file.

I don’t know how different the Twitter Bootstrap datepicker would have looked, but this theme worked perfectly for my application.