Always display bootstrap-datepicker, not just on focus

Question

I'm using the bootstrap-datepicker library to create a datepicker to let the user choose the date. I would like to always display the picker, not just when the user clicks on an input field or a button.

How can I do this?

Solution

First, make sure you're using the latest version of the library, which is currently 1.2.0. The original version by eyecon is pretty poorly documented and I don't know if it can do what you want.

There are a couple of ways to solve your problem. Use whichever of these you prefer:

1. Create an embedded/inline datepicker and then add a changeDate handler to it. You'll want HTML that's something like

   <input id="my-input">
   <div id="my-datepicker"></div>
   

   and the following JavaScript:

   $("#my-datepicker").datepicker().on('changeDate', function (e) {
       $("#my-input").text(e.format());
   });
   

   Note that e.format is a convenience method documented on the events page of the documentation, and when invoked as it is here, will return a string representing the selected date formatted according to the datepicker's format string.

   You'll need to use your own CSS to appropriately position the datepicker if you take this approach.

   Here's a JSFiddle demonstrating this in action: http://jsfiddle.net/4wFJc/3/

2. Use an ordinary input datepicker, explicitly show it on creation, and then replace the datepicker's hide() method with a no-op so that it can never be hidden.

   Needless to say, this is an ugly hack that may well cease to work in a future version of the library. I wouldn't suggest using it. It does have the (doubtful) advantage over the inline-block approach that it positions the datepicker for you and includes an arrow connecting it to your <input>, though, so I include it for completeness.

   You'll need HTML something like:

   <input id="my-input">
   

   and the following JavaScript:

   $input = $("#my-input");
   $input.datepicker();
   $input.data('datepicker').hide = function () {};
   $input.datepicker('show');
   

   Here's a JSFiddle demonstrating this approach in action: http://jsfiddle.net/4wFJc/4/