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

我怎样才能做到这一点?

请您参考如下方法:

首先,确保您使用的是 the latest version图书馆的,目前是1.2.0。 original version by eyecon 的文档记录很差,我不知道它是否可以满足您的要求。

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

  • 创建 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 上的一种便捷方法文档的页面,在此处调用时,将返回一个字符串,该字符串表示根据日期选择器的 format string 格式化的所选日期.

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

    这里有一个 JSFiddle 演示了这一点:http://jsfiddle.net/4wFJc/3/
  • 使用普通的input datepicker ,在创建时明确显示,然后替换日期选择器的 hide()带有无操作的方法,因此它永远不会被隐藏。

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

  • 评论关闭
    IT干货网

    微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!