twitter-bootstrap - 使 eternicode 日期选择器在点击时打开，而不是焦点

Question

eternicode twitter bootstrap datepicker <input> 立即弹出它附加到的字段获得焦点，您可以通过点击 official demo page 上的日期选择器字段来查看.

相反，我希望它只在点击时打开。理想情况下，日期选择器只会在单击日历图标时弹出。

如何防止它突然出现在焦点上？

Answer 1

在当前版本的库中，您想要做的事情没有官方支持。文档列表 all the kinds of markup you can instantiate a datepicker on以及由此产生的行为是什么。很明显，在 <input> 上实例化日期选择器时元素，

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

没有标记可以实例化一个日期选择器，它可以轻松地为您提供您想要的东西。也没有 configuration options让您选择哪些事件将触发日期选择器出现。

因此，要执行您想要的操作，需要对库进行一些逆向工程。幸运的是，这很容易。

最简单的方法是在 <input> 上实例化日期选择器。像往常一样，但然后摆脱 focus自行处理并将其替换为 click处理程序:

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

这非常适用于最新版本的库，如 http://jsfiddle.net/E4K56/1/ 所示。

如果您想要触发日期选择器外观的额外元素(如日历按钮)，您可以类似地将处理程序附加到它们:

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