7

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

我怎样才能做到这一点?

日期选择器的图片

4

3 回答 3

10

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

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

  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()no-op 替换 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/

于 2014-01-06T22:32:06.930 回答
0

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

于 2013-12-08T08:06:32.113 回答
-2

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

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

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

于 2013-12-08T20:32:05.347 回答