我正在努力创建嵌入式/内联日期选择器,它不可点击 - 它应该只显示日期,表现为只读。
我正在做的是用模型中选定的日期填充日历,然后我尝试使其不可点击,这样用户就不会认为他可以编辑任何内容。
我正在使用 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>
只读,但仍然能够从日期选择器中选择日期。
接受的答案对我来说不起作用,但另一种方法是使用为与 JQuery datepicker 相关的类似问题提供的优雅解决方案(请参阅https://stackoverflow.com/a/8315058/2396046 https://stackoverflow.com/a/8315058/2396046)
要为 Bootstrap Datepicker 执行此操作,如下所示:
$('#datepicker-inline').datepicker({
//Other options...
beforeShowDay: function() {
return false;
}
});
这使得日历对话框完好无损,但所有日期都呈灰色。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)