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

Question

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

我怎样才能做到这一点？

Answer 1

首先,请确保您使用的是最新版本的库,目前为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是在文档的事件页面上记录的便捷方法,并且在此处调用时,将返回表示根据datepicker的格式字符串格式化的所选日期的字符串.

   如果采用这种方法,您需要使用自己的CSS来正确定位日期选择器.

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

2. 使用普通的输入日期选择器,在创建时显式显示它,然后用hide()no-op 替换datepicker的方法,以便永远不会隐藏它.

   毋庸置疑,这是一个丑陋的黑客,可能会在未来版本的库中停止工作.我不建议使用它.它确实比内联块方法具有(可疑)优势,它为你定位了datepicker,并且包含了一个将它连接到你的箭头<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/