jquery - 如何使 Bootstrap 日期选择器只读？

Question

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

我正在做的是用模型中选定的日期填充日历，然后我尝试使其不可点击，这样用户就不会认为他可以编辑任何内容。

我正在使用 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>只读，但仍然能够从日期选择器中选择日期。

Answer 1

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

要为 Bootstrap Datepicker 执行此操作，如下所示:

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

这使得日历对话框完好无损，但所有日期都呈灰色。