twitter-bootstrap – 始终显示bootstrap-datepicker,而不仅仅是焦点

我正在使用bootstrap-datepicker库创建一个日期选择器,让用户选择日期.我想始终显示选择器,而不仅仅是当用户点击输入字段或按钮时.

我怎样才能做到这一点？

解决方法

首先,确保您使用的是库的 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页面上记录的便捷方法,当在此处调用时,将返回一个字符串,表示根据datepicker的format string格式化的所选日期.

如果采用这种方法,您需要使用自己的CSS来正确定位日期选择器.

这是一个JSfiddle,演示了这个：http://jsfiddle.net/4wFJc/3/
>使用普通的input datepicker,在创建时显式显示它,然后用no-op替换datepicker的hide()方法,以便永远不会隐藏它.

毋庸置疑,这是一个丑陋的黑客,可能会在未来版本的库中停止工作.我不建议使用它.它确实比内联块方法具有(可疑)优势,它为您定位了datepicker,并包含一个箭头,将其连接到您的< 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/