如何使readstrap datepicker readonly？

我正在努力创建无法点击的嵌入式/内联日期选择器 – 它应该只显示日期，表现为只读。

我正在做的是用模型中的选定日期填充日历，然后我尝试使其不可点击，因此用户不会瘦，他可以编辑任何东西。

我正在使用eternicode-bootstrap-datepicker – 使其成为多日期。

到目前为止，我有这个：

<link rel="stylesheet" href="" /> <script src="">  $(document).ready(function() { $("#datepicker-inline").datepicker({ multidate : true, todayHighlight : true, }); var dates = []; var i = 0;  console.log("${selectedDate}"); dates[i++] = new Date("${selectedDate}");  $("#datepicker-inline").datepicker('setDates', dates); // something to make it readonly $(".day").click(function(event) { console.log("preventing"); event.preventDefault(); }); });  
 
Dates
 
  

[对不起，如果格式错误]

正如您所看到的，我正在尝试阻止日历中.day上的默认点击操作。 控制台显示“正在阻止”，但仍会将日期视为已选中。

你知道如何让它成为禁用/不活动/只读吗？

关于使只读，但仍能从datepicker中选择日期的所有只读主题。

Answer 1

添加event.stopPropagation(); 在您的点击事件中。 代码如下：

 $('.day').click(function(event) { console.log('Preventing'); event.preventDefault(); event.stopPropagation(); }); 

Answer 2

接受的答案对我不起作用，但另一种方法是使用提供给与JQuery datepicker相关的类似问题的优雅解决方案（请参阅https://stackoverflow.com/a/8315058/2396046 ）

为Bootstrap Datepicker执行此操作将如下所示：

 $('#datepicker-inline').datepicker({ //Other options... beforeShowDay: function() { return false; } }); 

这使日历对话框保持不变，但所有日子都是灰色的。

Answer 3

添加到datepicker事件

 $('.datepicker').datepicker({ }).on('show', function(e){ $('.day').click(function(event) { event.preventDefault(); event.stopPropagation(); }); }); 

Answer 4

接受的答案对我也不起作用。

bs datepicker有几种不同的实现方式。 我使用的是metronic管理主题。 我的bootstrap-datepicker.js文件以：

 /* ========================================================= * bootstrap-datepicker.js * http://www.eyecon.ro/bootstrap-datepicker * ========================================================= 

为了使其只读“禁用”，需要将属性添加到相应的输入元素中。

PS我觉得这对于任何其他js小部件/组件都是一个节省时间的策略：在尝试挂钩事件或试图弄清楚特定组件是如何工作之前，只需检查它对“禁用”和“只读”属性的反应 – 有很有可能它会根据需要完全禁用它。 实际上它可能比阅读组件的文档更快。 🙂

Answer 5

在输入字段中使用onkeydown =“return false”。 干净简单。