The eternicode twitter bootstrap datepicker pops up as soon as the <input>
field it is attached to gets focus, as you can see by tabbing onto the datepicker field on the official demo page.
Instead, I want it to only open on click. Ideally the datepicker would just pop up on click of the calendar icon.
How can I prevent it from popping up on focus?
I have the same notation as in demo:
And then add add the event on input click:
In the current version of the library, there's no official support for what you want to do. The docs list all the kinds of markup you can instantiate a datepicker on and what the resulting behaviours are. It's very clear that when instantiating a datepicker on an
<input>
element,There is no markup you can instantiate a datepicker on that will trivially give you what you want. Nor are there any configuration options that let you choose what events will trigger the datepicker to appear.
As a result, to do what you want will require some reverse engineering of the library. Luckily, this is quite easy.
The simplest approach is to instantiate the datepicker on the
<input>
like you normally would, but then get rid of thefocus
handler ourselves and replace it with aclick
handler:This works perfectly for the latest version of the library, as demonstrated by this http://jsfiddle.net/E4K56/1/
If you want to have extra elements (like a calendar button) that trigger the appearance of the datepicker, you can just attach handlers to them similarly: