始终显示 bootstrap-datepicker，而不仅仅是焦点

Posted 2023-05-07

【中文标题】始终显示 bootstrap-datepicker，而不仅仅是焦点

【英文标题】：Always display bootstrap-datepicker, not just on focus

【发布时间】：2013-12-25 09:54:48

【问题描述】：

我正在使用 bootstrap-datepicker 库来创建一个日期选择器，让用户选择日期。我希望始终显示选择器，而不仅仅是在用户单击输入字段或按钮时。

我该怎么做？

【参考方案1】：

首先，确保您使用的是库的the latest version，目前为 1.2.0。 eyecon 的 original version 的文档记录很差，我不知道它是否可以满足您的要求。

有几种方法可以解决您的问题。使用您喜欢的任何一个：

创建一个embedded/inline datepicker，然后向它添加一个changeDate 处理程序。你会想要类似于

的html

<input id="my-input">
<div id="my-datepicker"></div>

以及以下 javascript：

$("#my-datepicker").datepicker().on('changeDate', function (e) 
    $("#my-input").text(e.format());
);

请注意，e.format 是文档的events 页面上记录的一种便捷方法，当在此处调用时，将返回一个字符串，该字符串表示根据日期选择器的format string 格式化的所选日期。

如果您采用这种方法，您将需要使用自己的 CSS 来适当地定位日期选择器。

这里有一个 JSFiddle 演示了这一点：http://jsfiddle.net/4wFJc/3/

使用普通的input datepicker，在创建时显式显示，然后用无操作替换日期选择器的hide() 方法，使其永远不会被隐藏。

不用说，这是一个丑陋的 hack，很可能在库的未来版本中停止工作。我不建议使用它。与 inline-block 方法相比，它确实具有（令人怀疑的）优势，它为您定位日期选择器并包含一个将其连接到您的 <input> 的箭头，但为了完整性，我将其包括在内。

你需要 HTML 类似的东西：

<input id="my-input">

以及以下 JavaScript：

$input = $("#my-input");
$input.datepicker();
$input.data('datepicker').hide = function () ;
$input.datepicker('show');

这里有一个 JSFiddle 演示了这种方法：http://jsfiddle.net/4wFJc/4/

【参考方案2】：

我不使用这个日期选择器，所以我不熟悉它是如何使用的。快速而肮脏的方法是给 datepicker 下拉菜单类一个.datepicker.CLASSNAME display: block !important;。 这样下拉菜单将始终可见。

【讨论】：

至少对于 OP 正在使用的日期选择器的 the latest version，这会失败，因为默认情况下单击 <input> 会从 DOM 中删除日期选择器。

就像我说的......又快又脏。

脏，因为它不起作用。没那么快，因为它不起作用。

【参考方案3】：

如果您使用此日期选择器：http://www.eyecon.ro/bootstrap-datepicker/

可以看到有一个方法：.datepicker('show')

当你的 $(document).ready() 时在 datepicker 对象上调用它

【讨论】：

如果我错了，请原谅我，但我很确定这会立即显示日期选择器，但仍会导致它在相关 <input> 字段模糊时被解散，而不是导致它永久显示（这是 OP 的目标）。当然，您发布的内容不适用于 bootstrap-datepicker 的 the latest version。