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

Question

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

我该怎么做？

Answer 1

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

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

1. 创建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的{{格式化]格式化的所选日期3}}

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

   这是一个JSFiddle，演示了这个：format string

2. 使用普通的http://jsfiddle.net/4wFJc/3/，在创建时明确显示它，然后用no-op替换datepicker的hide()方法，以便永远不会隐藏它。

   毋庸置疑，这是一个丑陋的黑客，可能会在未来版本的库中停止工作。我不建议使用它。它确实比内联块方法具有（可疑）优势，它可以为您定位日期选择器，并且包含一个将其连接到<input>的箭头，因此我将其包含在内以便完整。

   您需要HTML，例如：

   <input id="my-input">
   

   以及以下JavaScript：

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

   这是一个JSFiddle，演示了这种方法：input datepicker

Answer 2

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

Answer 3

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

您可以看到有一种方法：.datepicker（'show'）

当你的$（文件）.ready（）

时，在datepicker对象上调用它