如何让bootstrap datepicker只读？ [英] How to make bootstrap datepicker readonly?

问题描述

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

我在做什么从模型中选择日期填充日历，然后我尝试使其不可点击，所以用户不会瘦，他可以编辑任何东西。

我使用eternicode-bootstrap到目前为止，我已经得到了：

 
 code>< link rel =stylesheethref =< 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）; 
 
 //某事使其成为只读
 $（。day）。 （event）{
 console.log（prevent）; 
 event.preventDefault（）; 
}）; 
}）; 
< / script> 
 
 
< div class =col-xs-8> 
< h4>日期< / h4> 
< div id =datepicker-inline>< / div> 
< / div> 
  

[对不起，格式不正确]

您可以看到，我试图阻止日历中的.day日期的默认点击操作。控制台显示预防，但仍然选中日期。

您有什么想法如何使其禁用/不活动/只读？

只读只读 c code $ c

解决方案

在您的点击事件中添加 event.stopPropagation（）; 代码如下：

  $（'。day'）点击（function（event）{
 console.log（'Preventing'）; 
 event.preventDefault（）; 
 event.stopPropagation（）; 
}）; 
  

I'm struggling with creating embedded/inline datepicker which will not be clickable - it should only present dates, behave as readonly.

What I'm doing is populating calendar with selected dates from model, then I try to make it un-clickable so user doesn't thin he can edit anything.

I'm using eternicode-bootstrap-datepicker - to make it multidate.

So far I've got this:

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

[Sorry if it's badly formatted]

As you can see, I'm trying to prevent default click action on .day in calendar. Console shows "preventing", but it still checks day as selected.

Do you have any idea how to make it disabled / inactive / readonly ?

All readonly topic where about making <input> readonly, but still capable to select date from datepicker.

解决方案

Add event.stopPropagation(); in your click event. The code would be as follows:

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

这篇关于如何让bootstrap datepicker只读？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！