jQuery 如何使引导日期选择器只读？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21933728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap datepicker readonly?
提问by bart.z33
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.
我正在使用 eternicode-bootstrap-datepicker - 使其成为多日期。
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.
如您所见，我试图阻止日历中 .day 的默认点击操作。控制台显示“正在阻止”，但它仍会检查所选日期。
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.
所有关于只读的主题<input>，但仍然能够从日期选择器中选择日期。
采纳答案by Brian
Add event.stopPropagation();in your click event. The code would be as follows:
添加event.stopPropagation();您的点击事件。代码如下：
$('.day').click(function(event) {
console.log('Preventing');
event.preventDefault();
event.stopPropagation();
});
回答by Nik
The accepted answer didn't work for me, but another way to do this is by using the elegant solution provided to a similar question related to JQuery datepicker (see https://stackoverflow.com/a/8315058/2396046)
接受的答案对我不起作用，但另一种方法是使用提供给与 JQuery datepicker 相关的类似问题的优雅解决方案（参见https://stackoverflow.com/a/8315058/2396046）
To do this for Bootstrap Datepicker would look like this:
要为 Bootstrap Datepicker 执行此操作，将如下所示：
$('#datepicker-inline').datepicker({
//Other options...
beforeShowDay: function() {
return false;
}
});
This leaves the calendar dialogue box intact, but all days are greyed out.
这使日历对话框完好无损，但所有的日子都变灰了。
回答by Bogdan
add to datepicker event
添加到日期选择器事件
$('.datepicker').datepicker({
}).on('show', function(e){
$('.day').click(function(event) {
event.preventDefault();
event.stopPropagation();
});
});
回答by M-Kay
The accepted answer didn't work for me as well.
接受的答案对我也不起作用。
There are several different implemetation of bs datepicker. I use one which comes with metronic admin theme. My bootstrap-datepicker.js file starts with:
bs datepicker 有几种不同的实现。我使用了一个带有 metronic 管理主题的。我的 bootstrap-datepicker.js 文件以：
/* =========================================================
* bootstrap-datepicker.js
* http://www.eyecon.ro/bootstrap-datepicker
* =========================================================
In order to make it readonly 'disabled'attribute needs to be added to respective inputelement.
为了使其只读，需要将“禁用”属性添加到相应的输入元素。
P.S. I think it's a time-efficient tactic in respect to any other js widget/component: before trying to hook into events or try to figure out how particular component works just check it's reaction on 'disabled' and 'readonly' attributes - there are good chances it will disable itself exactly as needed. Actually it may be even faster than reading component's docs. :)
PS 我认为对于任何其他 js 小部件/组件来说，这是一种省时的策略：在尝试连接事件或尝试弄清楚特定组件如何工作之前，只需检查它对“禁用”和“只读”属性的反应 - 有很有可能它会根据需要完全禁用自己。实际上它可能比阅读组件的文档还要快。:)
回答by Mohit Jindal
Use onkeydown="return false" in the input field. Clean and simple.
在输入字段中使用 onkeydown="return false"。干净简单。
