Twitter Bootstrap date picker

The most popular bootstrap date picker is currently: https://github.com/eternicode/bootstrap-datepicker (thanks to @dentarg for digging it up)

A simple instantiation only requires:

HTML

<input class="datepicker">

Javascript

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

See a simple example here https://jsfiddle.net/k6qsm5no/1/ or the full docs here http://bootstrap-datepicker.readthedocs.org/en/latest/

Much confusion stems from the existence of at least three major libraries named bootstrap-datepicker:

1. A popular fork of eyecon's datepicker by Andrew 'eternicode' Rowls (use this one!):
   • Online demo, plus download link for the latest release version
   • Comprehensive documentation
   • GitHub repo
2. The original version by Stefan 'eyecon' Petre, still available at http://www.eyecon.ro/bootstrap-datepicker/
3. A totally unrelated datepicker widget that 'storborg' sought to have merged into bootstrap. It wasn't merged and no proper release version of the widget was ever created.

If you're starting a new project - or heck, even if you're taking over an old project using the eyecon version - I recommend that you use eternicode's version, not eyecon's. The original eyecon version is outright inferior in terms of both functionality and documentation, and this is unlikely to change - it has not been updated since March 2013.

You can see most of the capabilities of the eternicode datepicker on the demo page which lets you play with the datepicker's configuration and observe the results. For more detail, see the succinct but comprehensive documentation, which you can probably consume in its entirety in under an hour.

In case you're impatient, though, here's a very short step-by-step guide to the simplest and most common use case for the datepicker.

Quick start guide

1. Include the following libraries (minimum versions noted here) on your page:
   • jQuery
   • Bootstrap - both the JS and CSS
   • The latest release version of bootstrap-datepicker - both the JS and CSS

2. Put an input element on your page somewhere, e.g.

   <input id="my-date-input">
   

3. With jQuery, select your input and call the .datepicker() method:

   jQuery('#my-date-input').datepicker();
   

4. Load your page and click on or tab into your input element. A datepicker will appear:

   

Twitter Bootstrap is incompatible with jQuery UI styles at the moment.

https://github.com/twitter/bootstrap/issues/156

This might help you https://github.com/sferik/rails_admin ( http://rails-admin-tb.herokuapp.com/admin/drafts/new )

Check out Jquery Bootstrap:

http://jslegers.github.com/jquery-bootstrap/