nerian / bootstrap-datepicker-rails Goto Github PK

Is it possible to display the current month by default ? If I set startDate value, il will always use that maonth as a start-up month in the view:

<script>
    $(function () {
        $('#operation_value_date').datepicker({autoclose: true, "weekStart": 1, language: "fr", format: "dd/mm/yyyy", todayHighlight: true});
        $('#operation_close_date').datepicker({autoclose: true, "weekStart": 1, language: "fr", startDate: "01/01/2012", format: "dd/mm/yyyy", todayHighlight: true});
    });
</script>

If I set nothing it will display year 1912, or 1936 or 1907 as a start view. More of that id does not highlight the date that was previousely set (fir example in case of editing the date and clicking on the textfield).
I'm on Rails 3.2.8, bootstrap-datepicker-rails v.0.6.24.
Thank you.

Hi @Nerian,

I am facing an issue with your gem and I can't figuring out what it's really happening.
The issue is present in the version 1.0.0.5, but not in the previous one the 1.0.0.3.

The issue is related with the ability to attach the datepicker to an non input field (a div in my case,and this is possible looking at the eternicode bootstrap datepicker).

My code is the following:

    $(selector).datepicker().on('changeDate', function() {
         var picker = $(selector).data('date');
         console.log(picker);      
    });

Stupid and easy code, but good enough to illustrate the issue.

$(selector) is a DIV

Until version 1.0.0.3 the $(selector).data('date') return the value of the date (in a sql format - yyyy-mm-dd), with the new version 1.0.0.5 instead, $(selector).data('date') return undefined.

What excatly changed between the 2 version? I saw that there are few changes, and one use tooltip on the date, but I am not really sure what can create this issue (kind of annoying btw, because the other only way to access the value should be using an ev in the function of changedate, and returning ev.date, that unfortunately sucks because will always return the date but with a day less than the date selected).

Could you advise me in regard?
For now I just regress my updating of your gem at the 1.0.0.3, but I really look into a solution.

Best
Dinuz

When I include the bootstrap-datepicker-rails in my program (using Rails 3.1) I'm not able to compile my assets when I push to Heroku based on a trailing commas error. This is triggered by Closure compiler, which fires a parse error saying there are trailing commas (around some part of the code that begins with: days: ["

I believe this is one of the locale files but have not been able to locate it.

Hi.
The top position has some problems.Like this:

= f.input :publication_date, as: :string, label: content_for(:date_label), :input_html => {class: 'date input-xlarge', "data-behaviour" => 'datepicker' }
The input "publication_date" used 'datepicker' but the position top fix -30px.

HI,
I just installed your gem and I have gotten the datepicker to show up and display in the view the way I want it, but when I create my tournament it doesn't save the date in the text field to the database.

My view:

<h1>New tournament</h1>

<fieldset>
    <%= form_for @tournament do |f| %>
    <td>
      <tr>

      </tr>
    <td>
      <div class="field">
        <%= f.label :name %>
        <%= f.text_field :name, :autofocus => true %>
      </div>
    </td>
    <td>
      <div class="field" >
        <%= f.label :date %>
        <%= f.text_field :date, class: 'datepicker' %>
      </div>
    </td>
    <td>
      <div class="field">
        <%= f.label :reg_fee %>
        <%= f.text_field :reg_fee %>
      </div>
    </td>
    <div class="form-actions">
      <%= f.submit "Create", :class => 'btn btn-primary' %>
      <%= f.submit "Cancel", :class => 'btn btn-primary' %>
    </div>
  <% end %>
</fieldset>

And my coffeeScript

$ ->
  $('.datepicker').datepicker()

I've also tried doing

$(document).on "focus", "[data_behavior~='datepicker']", (e) ->
  $(this).datepicker
    format: "mm/dd/yyyy"
    weekstart: 1
    autoclose: true

with:

  <div class="field" >
    <%= f.label :date %>
    <%= f.text_field :date, :data_behavior => 'datepicker' '%>
  </div>

When I input the date manually it works fine.

Any help would be much appreciated. Thanks!

Could it be, that:

data-date-viewmode="years"

does not work correctly?

It stays on the day viewmode and not on the viewmode years

<label for="user_birthday">Birthday</label>
<div class="input-append date" id="user_birthday" data-date-viewmode="years" data-date-format="dd-mm-yyyy">
    <%= f.input_field :birthday, id: "user-birthday", class: "span2", :placeholder => 'dd-mm-yyyy' %>
    <span class="add-on" >
        <i style="color: grey;" class="icon-calendar"></i>
    </span>
</div>
<p class="help-block">Format must be dd-mm-yyyy</p>

html rendered

<div class="input-append date" id="user_birthday" data-date-viewmode="years" data-date-format="dd-mm-yyyy
    <input class="string required span2" id="user-birthday" name="user[birthday]" placeholder="dd-mm-yyyy" size="50" type="text" />
    <span class="add-on">
        <i style="color: grey;" class="icon-calendar"></i>
    </span>
</div>


<label for="user_birthday">Birthday</label>
<div class="input-append date" id="user_birthday" data-date-viewmode="years" data-date-format="dd-mm-yyyy">
    <%= f.input_field :birthday, id: "user-birthday", class: "span2", :placeholder => 'dd-mm-yyyy' %>
    <span class="add-on" >
        <i style="color: grey;" class="icon-calendar"></i>
    </span>
</div>
<p class="help-block">Format must be dd-mm-yyyy</p>

The guys from simple_form-bootstrap said, that this problem should be on bootstrap-datepicker-rails

heartcombo/simple_form-bootstrap#21 (comment)

I am using Rails 4.0 & Ruby 2.0 with Twitter-Bootstrap-Rails. Datepicker works great, except if I edit a record and click on the date ( or create a new record) I can't click away from the date without it putting in a date. If I click into the field and delete the date, when I click away it still fills it back in with today's date. I'm new enough to not be able to tell if this is something I am doing wrong or a bug.
My JS code is:

$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
    $(this).datepicker({"format": "mm-dd-yyyy", "weekStart": 1, "autoclose": true})
});

If I clear out the date and click away from the text input field it automatically inserts today's day.

The gem works fine - as advertised. Kudos! However, days not in current month have the same weight as the days those are. This is a bit irritating.

When I did a view source, I couldn't find any CSS being loaded. Also the instructions don't mention it at all. Let me know if you'd want me to send you a patch (if I get around to solving this and other things).

Thanks.

my application.js included both '= require bootstrap-datepicker/core' and '= require daterangepicker'
but when i click on textfield for daterangepicker, then textfields not take the input value from daterangepicker. So, my question is can we use daterangepicker along with bootstrap-datepicker-rails?

Hello,

Great gem, but I had problems using it with UserMailer + premailer-rails. I got this error when sending emails with HTML template:

undefined method `[]' for nil:NilClass

To fix it a just change the way bootstrap-datepicker.css is inserted:

Old way: *= require bootstrap-datepicker (into application.css.scss)
New way: @import "bootstrap-datepicker" (into custom.css.scss)

You could try to reproduce this error and change README.md instructions (https://github.com/Nerian/bootstrap-datepicker-rails#configuration)

Thanks!

when applied to a field, user input should be limited with only acceptable characters

date-picker-rails is running fine with my simple_form, however upon changing locale ( fr or en) , the calendar is still in english ..

I inserted into my application.js
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.fr
//= require bootstrap-datepicker/locales/bootstrap-datepicker.es

I have a simple_form input
class DatePickerInput < SimpleForm::Inputs::StringInput
def input
value = object.send(attribute_name) if object.respond_to? attribute_name
input_html_options[:value] ||= I18n.localize(value) if value.present?
input_html_classes << "datepicker"
super # leave StringInput do the real rendering
end
end

how the I18n.locale relate to the datepicker locale ?

[SOLVED]
I inserted into my layout application.html.haml
=javascript_tag "window.locale = #{I18n.locale.to_s.inspect};"

Then in my js file :
$(".datepicker").datepicker format: "dd-mm-yyyy", language: locale

Hi,

I have an feature request. Currently if I click on a date it will be selecting by changing the background color to blue. But I have to do two clicks to get the date into the textfield.

If the user clicks on a date it should select this date and close the dialog.

Regards,
Martin

Hello,
when i add a new record, i the dates are not saved at all...

Also, if i insert the dates manually and try to edit, browser stops working and i get the following error :

An action script on this page may be busy, or has stopped responding. You can stop the script now, or continue to see if the script will complete.
Script: http://127.0.0.1:3000/assets/bootstrap-datepicker/core.js?body=1:666

How can i fix this? I have included the gem in my gem file and i also followed all the instructions.

Thank you

I managed to get the datepicker to display for a field inside a popover by calling it in a callback, but when displayed it is at the top of the window, even though the field is much further down.

I'm getting the error:

Uncaught TypeError: Object [object Object] has no method 'datepicker'

I have this in my application.js file:

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

$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
$(this).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});
});

$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
$(this).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});
});

And here is my date field:
https://gist.github.com/2989158

Do you have any idea what might be causing the error?

Thanks!

If you create an input with class datepicker, the carrot that normally only shows at the top of the date picker shows all the time at top: 0, left: 0. To circumvent this, a class other than datepicker has to be used.

This isn't happening in Chrome, but is happening in Safari.

Hello, I'm stuck trying to make datepicker work correctly with bootstrap.

If i associate both for 'datepicker' class and 'data-behaviour' =>'datepicker' attributes to my input fields it works correctly and format data with this pattern "dd/mm/yyyy".

What i would like to do instead is associate the picker with the span and set the value to my input field.

I'm actually displaying it in control-group with input-append, here is my html code

<div class="control-group">
<label class="date optional control-label" for="renewal_sales_invoice_date">Data fattura vendita</label>
<div class="controls">
  <div class="input-append">
    <input class="input-small" data-behaviour="datepicker" id="renewal_sales_invoice_date" name="renewal[sales_invoice_date]" size="30" type="text" value="05/01/2012">
    <span class="add-on datepicker">
      <i class="icon-calendar"></i>
    </span>
  </div>
</div>

And this is my js script call

$('.datepicker').datepicker({
    "format": "dd/mm/yyyy", 
    "weekStart": 1, 
    "language": '#{locale}',
    "autoclose": true
  });

This way it doesn't update my input field value so i tried to use the 'changeDate' callback to set it manually like this

$('.datepicker').on('changeDate', function(ev){

    var dt = new Date(ev.date.valueOf());
    $(this).parent().children('input').attr("value", ev.date.toString("dd/mmyyyy"));

    console.log($(this).parent().children('input').attr("value"));

  });

This solution works partially because it updates the value but does not format it. :(

Hope someone could help me :)
have a nice day

Fetching gem metadata from https://rubygems.org/......
Fetching gem metadata from https://rubygems.org/..
Could not find gem 'bootstrap-daterangepicker-rails (>= 0) ruby' in the gems available on this machine.

Whenever we load the datetimepicker into our application, we get the following console log error:

Uncaught TypeError: Cannot call method 'removeClass' of undefined

It references line 69 in bootstrap-datetimepicker.js:

Our HTML code looks like this:

Any help on that?

Hey there,

I am wondering if there's a way to unobtrusively replace the normal date fields with this.

Sometimes you rely on the default behavior with multi parameter attributes like date(3i) and such. I for example had to replicate the default behavior by parsing those triplets for some date fields in an non-activerecord model. Due to the fact that I have implemented those things in many places all over my app, and because it's just better to have a non-js way to pick dates, too, I'd love the gem to just replace the existing behavior without me needing to adjust parsing the dates.

Is this possible in any way? Is there a default way to replace those date triplets automagically, or do I have to implement some onLoad filters on the jQuery side?

Thanks for your help

Arne

I follow the guide as below:

In "application.css":
*= require_self
*= require tree
*= require bootstrap-datepicker

In "application.js":
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
//= require bootstrap-datepicker
//= require_tree .

In the "date.js" file:
$('[data-behaviour~=datepicker]').datepicker({
"format": "yyyy-mm-dd",
"weekStart": 1,
"autoclose": true
});

In the "view":
= simple_form_for @Vendor, html: { class: 'form-horizontal' } do |f|
= f.input :start_date, :as => :string, :input_html => { data: {behaviour: "datepicker"}}

But no date_picker pop up. Any suggestion that I miss any steps.

It works when I use the simple datepicker: http://www.chadcf.com/blog/jqueryui-datepicker-rails-and-simpleform-easy-way

When I use jquery 1.8.3 the datepicker calender appears at the top of the screen. If I switch back to 1.7.2 it works fine.

I have updated my datepicker gem and it still exhibits the above behavior.

Any help appreciated.

Hi!

It might be an overkill (in some situations) to include all locales. Perhaps it might be nice to include in the README, how once can only include the core or only specific locales as the user wants.

Cheers,
Aditya

See:
Bttstrp/bootstrap-switch#27

For those who want to solve that quick:

.datepicker .switch {
  display: table-cell;
}

$('[data-behaviour~=datepicker]').datepicker( { format: 'd.m.Y', language: 'de', todayBtn: true, calendarWeeks: true } );

produces in my case with rails 4 and bootstrap 3 in the input field after select a date

12.12.Y

Ok, this error is probably a FAQ at this stage but I still can't figure it out!

My application.js:

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

(dresssed is a bootstrap-based rails theme)

From my erb.html:

        <%= f.text_field :due, 'data-behaviour' => 'datepicker', class: 'datepicker' %>

And (ignoring any of the javascript/coffeescript to initialise it), if try to manually call datepicker from the Chrome console

$("[data-behaviour~='datepicker']").datepicker();
TypeError: Object [object Object] has no method 'datepicker'
$("[data-behaviour~='datepicker']")[0].datepicker();
TypeError: Object #<HTMLInputElement> has no method 'datepicker'
$("[data-behaviour~='datepicker']");
[
<input class=​"datepicker" data-behaviour=​"datepicker" id=​"plan_due" name=​"plan[due]​" size=​"30" type=​"text" value=​"2012-08-26">​
]
$(".datepicker");
[
<input class=​"datepicker" data-behaviour=​"datepicker" id=​"plan_due" name=​"plan[due]​" size=​"30" type=​"text" value=​"2012-08-26">​
]
$(".datepicker").datepicker();
TypeError: Object [object Object] has no method 'datepicker'
$(".datepicker")[0].datepicker();
TypeError: Object #<HTMLInputElement> has no method 'datepicker'

But all the bootstrap-datepicker js files have been loaded.

Any ideas? Please point out my stupidity ;-)

More infos here:

http://stackoverflow.com/questions/12121571/bootstrap-datepicker-rails-javascript-assets-properly-loaded-but-css-not

Update:

It seems the problem isn't that the CSS is not loaded, but that the datepicker's generated HTML does not have some needed classes, like ".datepicker".

Here's the generated code:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 282.5px; left: 575.5px; z-index: 1; "><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1345895877573.datepicker._adjustDate('#dp1345895877575', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1345895877573.datepicker._adjustDate('#dp1345895877575', +1, 'M');" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">August</span>&nbsp;<span class="ui-datepicker-year">2012</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th><span title="Monday">Mo</span></th><th><span title="Tuesday">Tu</span></th><th><span title="Wednesday">We</span></th><th><span title="Thursday">Th</span></th><th><span title="Friday">Fr</span></th><th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">1</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">2</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">3</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">4</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">5</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">6</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">7</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">8</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">9</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">10</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">11</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">12</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">13</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">14</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">15</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">16</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">17</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">18</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">19</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">20</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">21</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">22</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">23</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">24</a></td><td class=" ui-datepicker-week-end ui-datepicker-days-cell-over  ui-datepicker-today" onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default ui-state-highlight ui-state-hover" href="#">25</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">26</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">27</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">28</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">29</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">30</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">31</a></td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td></tr></tbody></table></div>

hi,
you have mentioned that eternicode's code has been included. if so, the options should be working. but they don't seem to be.

i have a simple code which fails:
$(function() {
$( "#start-date" ).datepicker({
onSelect: function( selectedDate ) {
$("#end-date").datepicker( "setStartDate", selectedDate );
}
});
$( "#end-date" ).datepicker({
onSelect: function( selectedDate ) {
$("#start-date").datepicker( "setEndDate", selectedDate );
}
});
});

disabling of the date fails. sorry bro! i'm headed back to eternicode now..

Form div looks like:

And the coffee looks like
jQuery ->
$('[data-behavior~=datepicker]').datepicker()

Any idea what I'm missing here? Thanks.

Hello, thanks for the great datepicker for rails.

I've been watching my users interact with the datepicker. I have it attached to an input field with autoclose turned on. When the field is near the bottom of the browser window and the user clicks on the date field this causes the datepicker to appear partially off the bottom of the browser window. They then use the vertical scrollbar to bring it into view but it disappears upon clicking the scrollbar (at least it does in IE). When it disappears the field retains focus so that clicking on the date field again does not cause the datepicker to reappear. This leaves them confused.

I suggest that clicking on the vertical scrollbar should not cause the datepicker to hide itself.

I'm using bootstrap-datepicker-rails (0.6.41). The following change results in behavior that works for me. This is in core.js at line 78 and adds a test for the X location of the click against the browser viewport width.

        $(document).on('mousedown', function (e) {
            // Clicked outside the datepicker, hide it
            if ($(e.target).closest('.datepicker.datepicker-inline, .datepicker.datepicker-dropdown').length === 0 &&
            e.clientX < this.body.clientWidth) {
                that.hide();
            }
        });

Thanks, -- Jim

Is there a way to do a date range with this gem? I looked in all the documentation and i'm not really sure how to set that up if there is indeed a way.

instead of a small popup, date picker appers on the bottom of the page.
screenshot: http://image.yogile.com/adigs3nc/gzrnihufybeyyxm5unlwf7-large.png

Hi, the datepicker menu doesn't look quite right on my end. Any clue on what I may have missed here?

Rails 3.2.7 with latest bootstrap and jquery. I have an input field whose html is <input data-behavior="datepicker" id="race_begins_on" name="race[begins_on]" size="30" type="text" value="2012-07-29"> and a coffeescript file which executes on document.ready(); --

->
  $(document).on("focus", "[data-behaviour~='datepicker']", (event) =>
    $(@).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true}))

I also tried straight JS from your example using the coffeescript backtick escape.

I can see (through Chrome inspect element) the JS is getting included, the datepicker code is present, but nothing happens when my field gets focus. Any thoughts?

http://stackoverflow.com/questions/12072689/trying-to-put-the-bootstrap-datepicker-in-my-rails-project#comment16139024_12072689
I included gem 'bootstrap-datepicker-rails' in my gemfile.
I included it in my application.js and in css also.
But it is now working in my view.htm.erb.

Hi
When using dd-mm-yyyy date formats (spanish), the calendar shows an "undefined NaN" message
This issue seems to be fixed on Andrew Rowls plugin but not here in your great gem

Has that been merged already?

Complete noob so I'm sure it's something I'm doing, but after 3 hours of trying I can't figure out how to get this to work. The calendar is just not showing up at all when I click in the text field.

Gist here:

https://gist.github.com/3337145

Some companies will only use gems with a certain license.
The canonical and easy way to check is via the gemspec,

via e.g.

spec.license = 'MIT'
# or
spec.licenses = ['MIT', 'GPL-2']

Even for projects that already specify a license, including a license in your gemspec is a good practice, since it is easily
discoverable there without having to check the readme or for a license file.

For example, there is a License Finder gem to help companies ensure all gems they use
meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough
issue that even Bundler now generates gems with a default 'MIT' license.

If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file),
github has created a license picker tool.

In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally
looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :).

I hope you'll consider specifying a license in your gemspec. If not, please just close the issue and let me know. In either case, I'll follow up. Thanks!

p.s. I've written a blog post about this project

The date picker initially starts with Feb 1, 1970. How do I get it to default to Today or the currently selected date for a field that's already populated?

All of the locale scripts begin with a semi-colon which is breaking IE9.

/**

• Arabic translation for bootstrap-datepicker
• Mohammed Alshehri [email protected]
  */

;
(function($){
$.fn.datepicker.dates['ar'] = {

I have setup using plain ERB tempting the following in a view that contains an individuals date of birth (dob).

I'm new at this Rails/HTML5/CSS3/jQuery/bootstrap gig as you can probably tell from this 'how to use' question.

Your example has how the input should look. Can you confirm if the data-behaviour='date picker' should go in my bootstrap div class statement or in my f.text_field (for the input). I have tried both but don't seem to be getting this to fire.

<div class="field span2 data-behaviour='datepicker'">
  <%= f.text_field :dob %>
  <%= f.label :dob, "Birth Date" %>
</div>

or

<div class="field span2">
  <%= f.text_field :dob, :class => "data-behaviour='datepicker'" %>
  <%= f.label :dob, "Birth Date" %>
</div>

Does the 'autoclose' fire as soon as one clicks the date entry. Other date pickers I have played with (jQuery) automatically update the field on selection. Do we have to pick this up with the change event?

Hi, I've installed gem, added includes for javascript and css, but icons (arrows) does not appear on callendar.
Do I have to include something else?

I'm using bootstrap-sass gem.

I checked all the isues and found one that looks like my problem but reordering the requires dont fix it, i have this files:

application.js

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

Gemfile.rb

gem 'twitter-bootstrap-rails'
gem 'taps'
gem 'rails', '3.2.6'
gem 'heroku'
gem 'therubyracer'
gem 'haml-rails'
gem 'jquery-rails'
gem 'sass'
gem 'sass-rails'
gem 'meta_search'
gem 'coffee-rails'
gem 'mercury-rails'
gem 'less-rails'
gem 'bootstrap-datepicker-rails'
gem 'simple_form'
gem 'activeadmin'

the problem just popped out suddenly, everything just messed up, i force reinstalled bootstrap and tried out many other things but the classes change from:

div class="datepicker dropdown-menu" style="top: 91px; left: 747.5px; display: block;"

to:

div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div"

when i click the field, is making me crazy. please help.

i even reseted to before activeadmin installation wich was the last commit the selector worked and still persist the problem and reseted server each time i made a change. i had it in dd-mm-yyyy configuration and changed to dd/mm/yyyy in the selector, is just weird.

I cannot get the datepicker to work in IE7/8 with a single click under XP/Vista.

I have logged a ticket with Andrew Rowls as Issue #174.

I have tried to put in place what looked like a fix from another repo but was unsuccessful. Unfortunately the project I am doing for a friend needs to run under IE7 minimum, and I've been developing under Firefox so all looks good until I run it in IE under a VM

Put the picker in front when you use a modal box, for example lazybox.

This is my installation details but still I could not resolve the problem.

gem file:

gem 'bootstrap-datepicker-rails'
gem 'bootstrap-sass'

my application.css.erb

*= require bootstrap-datepicker
*/

@import 'bootsrap';

my application.js

//= require bootstrap-datepicker
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.es
//= require bootstrap-datepicker/locales/bootstrap-datepicker.fr

my page HTML

<%= f.text_field(:warranty, :size => 10, :class => "datepicker") %>

and the js at the bottom of the page:

$('.datepicker').datepicker();

The problem is that the date picker appears at the bottom of the page instead of a normal popup.

.datepicker td.active.disabled:hover.active {
background-color: #003399 \9;
}

in bootstrap-datepicker.css

should be obviously 👍
background-color: #003399;

When I tried to deploy on Heroku with the latest gem, I got a precompile error resulting from an unexpected token "{" somewhere in the JS. Not sure how to recreate or how to pinpoint where it is, but I switched to gem 'bootstrap-datepicker-rails', '0.6.21' and it worked fine.

hey,
great plugin, thanks for your work!

just a small notice to the usablity:

• select a date: it would be better if there is a "OK" button. otherwise the user has to click somewhere else to hide the picker.
  inspiration: http://jdewit.github.com/bootstrap-timepicker/
• switching month by clicking on "old" dates. nice feature, but confusing for unexpirenced users :)

again, nice work!