单击时打开eternicode datepicker,而不是焦点

时间:2013-12-17 21:54:14

标签: twitter-bootstrap datepicker bootstrap-datepicker

eternicode twitter bootstrap datepicker一旦附加的<input>字段获得焦点,就会弹出official demo page,正如您可以通过标记{{3}上的datepicker字段所看到的那样}}

相反,我希望它只在点击上打开。理想情况下,只需点击日历图标即可弹出日期选择器。

如何防止它弹出焦点?

2 个答案:

答案 0 :(得分:9)

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

  

将输入(点击或标签)聚焦将显示选择器。

没有标记你可以实例化一个日期选择器,这将很容易地给你你想要的东西。也没有任何configuration options允许您选择将触发日期选择器出现的事件。

因此,要做你想做的事,需要对库进行一些逆向工程。幸运的是,这很容易。

最简单的方法是像往常一样在<input>上实例化datepicker,然后自己摆脱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');
});

答案 1 :(得分:0)

我有与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>

然后在输入点击添加事件:

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