如何使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的默认操作。控制台显示“preventing”，但它仍将该天检查为已选。

您有任何想法如何使其禁用/无效/只读？

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

- bart.z33

---

在你的 $('.day').click 事件中，尝试在 event.preventDefault(); 后添加 event.stopPropagation(); 了吗？不确定它是否跨浏览器兼容或者是否适用于像你所拥有的 div，但值得一试。我刚刚在 Chrome 中尝试过（使用一个 input），它阻止了日期被点击。 - Brian

那个有效！谢谢！ :) 如果您将其作为答案添加，我会将其标记为解决方案。 - bart.z33

Answer 1

接受的答案对我没用，但是另一种做法是使用一个优雅的解决方案，该方案与 JQuery日期选择器有关（参见https://dev59.com/hWsz5IYBdhLWcg3wj4ra#8315058）。

要在Bootstrap日期选择器中执行此操作，如下所示：

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

这将保留日历对话框，但所有日期都被变灰显示。

- Nik

Answer 2

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

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

- Brian

---

嗨，如果您在日期选择器的第二页上，那么这个功能将无法工作，例如，如果当前月份是三月，则上述函数将正常工作。然而，如果您进入下个月并点击日期，则它将无法工作。 - Jimil

Answer 3

我也尝试了已经被认可的答案，但并未奏效。

bs datepicker 有几种不同的实现方法。我使用的是 Metronic 管理主题附带的一种。我的 bootstrap-datepicker.js 文件开头如下：

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

为使输入框只读，需要在相应的输入框元素中添加'disabled'属性。

附言：我认为这是一种节省时间的策略，适用于任何其他js小部件/组件：在尝试挂钩事件或尝试弄清楚特定组件如何工作之前，只需检查其对 'disabled' 和 'readonly' 属性的反应-它们有很好的机会像需要的那样自动禁用。实际上，这甚至可能比阅读组件说明书还要快。 :)

- M-Kay

---

只需将readonly属性添加到输入字段中即可。 - mshakeel

Answer 4

添加到日期选择器事件

$('.datepicker').datepicker({

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

- Bogdan

Answer 5

在输入框中使用 onkeydown="return false"。简洁明了。

- Mohit Jindal

---

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