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

Always display bootstrap-datepicker, not just on focus

提问by user3003810

I'm using the bootstrap-datepicker library to create a datepicker to let the user choose the date. I would like to alwaysdisplay the picker, not just when the user clicks on an input field or a button.

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

How can I do this?

我怎样才能做到这一点？

回答by Mark Amery

First, make sure you're using the latest versionof the library, which is currently 1.2.0. The original versionby eyecon is pretty poorly documented and I don't know if it can do what you want.

首先，确保您使用的是最新版本的库，目前是 1.2.0。eyecon的原始版本记录很差，我不知道它是否可以满足您的需求。

There are a couple of ways to solve your problem. Use whichever of these you prefer:

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

1. Create an embedded/inline datepickerand then add a changeDatehandler to it. You'll want HTML that's something like

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

   and the following JavaScript:

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

   Note that e.formatis a convenience method documented on the eventspage of the documentation, and when invoked as it is here, will return a string representing the selected date formatted according to the datepicker's format string.

   You'll need to use your own CSS to appropriately position the datepicker if you take this approach.

   Here's a JSFiddle demonstrating this in action: http://jsfiddle.net/4wFJc/3/

2. Use an ordinary input datepicker, explicitly show it on creation, and then replace the datepicker's hide()method with a no-op so that it can never be hidden.

   Needless to say, this is an ugly hack that may well cease to work in a future version of the library. I wouldn't suggest using it. It does have the (doubtful) advantage over the inline-block approach that it positions the datepicker for you and includes an arrow connecting it to your <input>, though, so I include it for completeness.

   You'll need HTML something like:

   <input id="my-input">
   

   and the following JavaScript:

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

   Here's a JSFiddle demonstrating this approach in action: http://jsfiddle.net/4wFJc/4/

1. 创建一个嵌入式/内联日期选择器，然后向其中添加一个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是一个记录在文档事件页面上的便捷方法，当在此处调用时，将返回一个字符串，表示根据日期选择器的格式字符串格式化的所选日期。

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

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

2. 使用普通的输入 datepicker，在创建时显式显示它，然后用hide()无操作替换 datepicker 的方法，以便它永远不会被隐藏。

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

回答by Fex del Sollo

I don't use this datepicker so I am not familiar how it is used. The quick and dirty way would be giving the datepicker dropdown-menu class a .datepicker.CLASSNAME {display: block !important;}. This way the dropdown will always be visible.

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

回答by Gokhan

If you are using this datepicker : http://www.eyecon.ro/bootstrap-datepicker/

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

You can see there is a method : .datepicker('show')

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

Call this on datepicker object when your $(document).ready()

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