How to make bootstrap-datepicker work with bootstrap 3?

Question

I am using the bootstrap-datepicker version supported by eternicode (Andrew Rowls).

In Bootstrap 2, it worked, but now it does not work with the Bootstrap 3 library.

How can I get bootstrap-datepicker to work with Bootstrap 3 ?

Answer 1

I also use Stefan Petres http://www.eyecon.ro/bootstrap-datepicker and it does not work with Bootstrap 3 without modification. Please note that http://eternicode.imtqy.com/bootstrap-datepicker/ is the code fork of Stefan Petre.

You must change your markup (sample markup will not work) to use the new CSS and the grid shape in Bootstrap 3. You also need to change some CSS and JavaScript in the actual bootstrap-datepicker implementation.

Here is my solution:

 <div class="form-group row"> <div class="col-xs-8"> <label class="control-label">My Label</label> <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy"> <input class="form-control" type="text" readonly="" value="12-02-2012"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> </div> 

CSS changes in datepicker.css on lines 176-177:

 .input-group.date .input-group-addon i, .input-group.date .input-group-addon i { 

Changing javascript to datepicker-bootstrap.js on line 34:

 this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false; 

UPDATE

Using the new code http://eternicode.imtqy.com/bootstrap-datepicker/ , the following changes:

CSS changes in datepicker.css on lines 446-447:

 .input-group.date .input-group-addon i, .input-group.date .input-group-addon i { 

Javascript change to datepicker-bootstrap.js on line 46:

  this.component = this.element.is('.date') ? this.element.find('.input-group-addon, .btn') : false; 

Finally, JavaScript to enable datepicker (with some options):

  $(".input-group.date").datepicker({ autoclose: true, todayHighlight: true }); 

Tested with Bootstrap 3.0 and JQuery 1.9.1. Please note that this fork is better to use than the other, as it is more functional, has localization support and automatically positions the datepicker based on the control position and window size, avoiding selecting the picker, which was a problem with the older version.

Answer 2

For everyone who comes across this ...

Version 1.2.0 of this plugin (current as of this post) does not quite work in all cases, as described in Bootstrap 3.0, but this happens with a small workaround.

In particular, if you use input with an icon, the HTML markup is, of course, slightly different, as the class names have changed:

 <div class="input-group" data-datepicker="true"> <input name="date" type="text" class="form-control" /> <span class="input-group-addon"><i class="icon-calendar"></i></span> </div> 

It seems that because of this, you need to use a selector that points directly to the input element itself NOT the parent container (this is what the automatically generated HTML offers on the demo page).

 $('*[data-datepicker="true"] input[type="text"]').datepicker({ todayBtn: true, orientation: "top left", autoclose: true, todayHighlight: true }); 

Having done this, you probably also want to add a listener for clicking / clicking on the icon so that it focuses on the text input when clicking (which is the behavior when using this plugin with TB 2.x by default).

 $(document).on('touch click', '*[data-datepicker="true"] .input-group-addon', function(e){ $('input[type="text"]', $(this).parent()).focus(); }); 

NB: I just use the boolean data-datepicker attribute because the class name 'datepicker' is reserved by the plugin, and I already use 'date' to style the elements.