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

Posted 2023-05-07

【中文标题】使 eternicode 日期选择器在点击时打开，而不是焦点

【英文标题】：Make eternicode datepicker open on click, not focus

【发布时间】：2014-01-05 21:13:27

【问题描述】：

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

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

如何防止它在焦点上弹出？

【参考方案1】：

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

聚焦输入（点击或切换）将显示选择器。

没有可以实例化日期选择器的标记，它可以轻松地为您提供所需的内容。也没有任何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');
);

【参考方案2】：

我的符号与演示中的相同：

<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();
    )