Make eternicode datepicker open on click, not focus

Question

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?

Answer 1

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,

focusing the input (clicking or tabbing into it) will show the picker.

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 the focus handler ourselves and replace it with a click handler:

$('#my-input').datepicker()
              .off('focus')
              .click(function () {
                  $(this).datepicker('show');
              });

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:

$('#some-button').click(function () {
    $('#my-input').datepicker('show');
});

Answer 2

I have the same notation as in demo:

<label for="datepickerFrom" class="control-label input-group">Set the date from:</label>
<div class="form-group">
    <div class='input-group date' id='datepickerFrom'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

And then add add the event on input click:

var options = {
    language: 'cs'
}
$('#datepickerFrom').datetimepicker(options);
$('#datepickerFrom input').off('focus')
    .click(function () {
        $(this).parent().data("DateTimePicker").show();
    })