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

问题描述

我正在使用bootstrap-datepicker库来创建一个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. 创建一个 embedded / inline datepicker ，然后添加一个 changeDate 处理程序。你会希望HTML像

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 是一个方便在文档的事件页面上记录的方法，以及当被调用为在这里，将返回一个字符串，表示根据datepicker的格式字符串。

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来适当地定位datepicker。

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/

使用普通的输入datepicker ，在创建时明确显示，然后代表使用no-op花边datepicker的 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.

不用说，这是一个丑陋的黑客，可能会在未来版本的图书馆中停止工作。我不会建议使用它。它确实比内嵌方法具有（怀疑）的优势，它为您定位日期标记，并包括将其连接到< input> 的箭头，因此我将其包含完整性。

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屋！