使eternicode datepicker在点击打开，而不是焦点 [英] Make eternicode datepicker open on click, not focus

问题描述

eternicode twitter bootstrap datepicker 会在< ;输入> 字段附加到获取焦点，您可以通过标签到官方演示页面。

相反，我希望仅在点击。理想情况下，datepicker会弹出点击日历图标。

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

解决方案

在当前版本的图书馆中，没有官方支持您想做的事情。文档列表所有类型的标记可以实例化日期戳，以及由此产生的行为。很清楚，当在< input> 元素上实例化日期戳记时，

对焦输入（点击或标签）将显示选择器。

没有标记可以实例化一个datepicker会给你想要的东西。还有没有任何配置选项，您可以选择什么事件触发日期戳显示。 / p>

因此，要做的事情需要一些逆向工程的库。幸运的是，这很简单。

最简单的方法是在< input> 上实例化日期戳你通常会，但是然后摆脱焦点处理程序，并用点击处理程序：

  $（'＃my-input'）。datepicker（）
 .off（'focus'）
。点击（function（）{
 $（this）.datepicker（'show'）; 
}）; 
  

这对于最新版本的库来说非常适用，正如这个 http://jsfiddle.net/E4K56/1/

如果你想要额外的触发日期戳的外观的元素（如日历按钮），您可以直接在其中附加处理程序：

  $（ '＃some-button'）。click（function（）{
 $（'＃my-input'）。datepicker（'show'）; 
}）; 
  

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?

解决方案

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');
});

这篇关于使eternicode datepicker在点击打开，而不是焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！