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>只读，但仍能从datepicker中选择日期。

Answer 1

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

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

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

这使日历对话框保持完整，但所有日子都显示为灰色。

Answer 2

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

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

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
 * =========================================================

为了使其只读＆＃39;已停用＆＃39; 属性需要添加到相应的输入元素。

P.S。我认为这是任何其他js小部件/组件的时间效率策略：在尝试挂钩事件或试图找出特定组件的工作方式之前，只需检查它对“禁用”的反应。＃39;和＆＃39; readonly＆＃39;属性 - 很有可能它会根据需要完全禁用它。实际上它可能比阅读组件的文档更快。：）

Answer 5

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

如何使readstrap datepicker readonly？

5 个答案: