始终显示 bootstrap-datepicker，而不仅仅是焦点 [英] Always display bootstrap-datepicker, not just on focus

问题描述

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

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

我该怎么做?

推荐答案

首先，确保您使用的是 库的最新版本，目前是 1.2.0.eyecon 的 原始版本 记录很差，我不知道它是否可以做什么你想要.

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

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

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

1. 创建一个嵌入式/内联日期选择器 然后添加一个 changeDate 处理程序.你会想要像

1. Create an embedded/inline datepicker and then add a changeDate handler to it. You'll want HTML that's something like

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

以及以下 JavaScript:

and the following JavaScript:

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

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

Note that e.format is a convenience method documented on the events page 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.

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

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

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

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

明确地使用普通的输入日期选择器在创建时显示它，然后用无操作替换日期选择器的 hide() 方法，以便它永远不会被隐藏.

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.

不用说，这是一个丑陋的 hack，很可能在库的未来版本中停止工作.我不建议使用它.与内联块方法相比，它确实具有(令人怀疑的)优势，即它为您定位日期选择器并包含一个将其连接到您的 的箭头，因此我将其包含在内是为了完整性.

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.

您需要 HTML 如下:

You'll need HTML something like:

<input id="my-input">

以及以下 JavaScript:

and the following JavaScript:

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

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

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

这篇关于始终显示 bootstrap-datepicker，而不仅仅是焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！