Always display bootstrap-datepicker, not just on focus

bootstrap-datepicker, datepicker, frontend, twitter-bootstrap, twitter-bootstrap-3

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:

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/

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/

Problem

Original source