如何使引导日期选择器只读？答案

【问题标题】：How to make bootstrap datepicker readonly?如何使引导日期选择器只读？
【发布时间】：2014-02-21 11:51:59
【问题描述】：

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

我正在做的是用模型中选定的日期填充日历，然后我尝试让它不可点击，这样用户就不会觉得他可以编辑任何东西。

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

到目前为止，我得到了这个：

<link rel="stylesheet" href="<c:url value="/resources/js/lib/eternicode-bootstrap-datepicker/css/datepicker3.css" />" />

<script src="<c:url value="/resources/js/lib/eternicode-bootstrap-datepicker/js/bootstrap-datepicker.js"/>"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#datepicker-inline").datepicker({
        multidate : true,
        todayHighlight : true,
    });
    var dates = [];
    var i = 0;
    <c:forEach items="${course.selectedDates}" var="selectedDate">
    console.log("${selectedDate}");
    dates[i++] = new Date("${selectedDate}");
    </c:forEach>
    $("#datepicker-inline").datepicker('setDates', dates);

    // something to make it readonly
    $(".day").click(function(event) {
        console.log("preventing");
        event.preventDefault();
    });
});
</script>


<div class="col-xs-8">
    <h4>Dates</h4>
    <div id="datepicker-inline"></div>
</div>

[抱歉，如果格式错误]

如您所见，我试图阻止日历中 .day 的默认点击操作。控制台显示“预防”，但仍会检查所选日期。

您知道如何使其禁用/不活动/只读吗？

所有关于使<input>只读的只读主题，但仍然能够从日期选择器中选择日期。

【问题讨论】：

在您的$('.day').click 活动中，您是否尝试在event.preventDefault(); 之后添加event.stopPropagation();？不确定它是否与跨浏览器兼容或与div 一起使用，但值得一试。我刚刚在 Chrome 中尝试过（虽然使用了input），但它阻止了日期被点击。
那个成功了！谢谢！ :) 如果您将此添加为答案，我会将其标记为解决方案。

标签： jquery twitter-bootstrap datepicker readonly

【解决方案1】：

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

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

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

这会使日历对话框保持不变，但所有日期都显示为灰色。

【讨论】：

【解决方案2】：

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

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

【讨论】：

嗨，如果您在日期选择器的第二页上，这不起作用，例如，如果您当前的月份是三月，那么上述功能将正常工作。但是，如果您转到下个月然后单击日期，则它将不起作用。

【解决方案3】：

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

bs datepicker 有几种不同的实现。我使用带有 metronic 管理主题的一个。我的 bootstrap-datepicker.js 文件开头为：

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

为了使其只读 'disabled' 属性需要添加到相应的 input 元素。

附：我认为对于任何其他 js 小部件/组件而言，这是一种节省时间的策略：在尝试挂钩事件或尝试弄清楚特定组件如何工作之前，只需检查它对“禁用”和“只读”属性的反应 - 有很好的它可能会根据需要完全禁用自己。实际上它可能比阅读组件的文档还要快。 :)

【讨论】：

readonly 属性对我有用，只需将其添加到输入字段即可。

【解决方案4】：

添加到日期选择器事件

$('.datepicker').datepicker({

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

【讨论】：

【解决方案5】：

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

【讨论】：

我认为这个答案是针对输入文本字段的？如果是这样，那么问题是关于“日历”视图并使日期不可点击。