twitter-bootstrap 单击时打开 eternicode datepicker，而不是焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20645490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make eternicode datepicker open on click, not focus
提问by giorgio
The eternicode twitter bootstrap datepickerpops 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.
该eternicode Twitter的引导日期选择器弹出，只要<input>它是连接到外地获得焦点，你可以通过按Tab键到日期选择器领域上看到官方演示页面。
Instead, I want it to only open on click. Ideally the datepicker would just pop up on click of the calendar icon.
相反，我希望它只在click 时打开。理想情况下，日期选择器会在点击日历图标时弹出。
How can I prevent it from popping up on focus?
如何防止它在焦点上弹出？
回答by Mark Amery
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 onand what the resulting behaviours are. It's very clear that when instantiating a datepicker on an <input>element,
在当前版本的库中，没有官方支持您想要做什么。文档列出了您可以在其上实例化日期选择器的所有类型的标记以及结果行为是什么。很明显，在<input>元素上实例化日期选择器时，
focusing the input (clicking or tabbing into it) will show the picker.
聚焦输入（单击或按 Tab 键）将显示选择器。
There is no markup you can instantiate a datepicker on that will trivially give you what you want. Nor are there any configuration optionsthat 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 focushandler ourselves and replace it with a clickhandler:
最简单的方法是<input>像往常一样实例化日期选择器，然后自己摆脱focus处理程序并将其替换为click处理程序：
$('#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/
这非常适用于最新版本的库，如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');
});
回答by prespic
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();
})
