我使用Bootstrap datepicker来显示日历,但我不想要任何人为干预。
它必须是只读日历。
我尝试禁用onchange事件,但它不起作用:
编辑澄清:
$("#myDatePicker").datepicker();
$("#myDatePicker").datepicker().on("changeDate", function (ev) {
return false;
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div id="myDatePicker" style="border: 1px solid gray; display: inline-block;"></div>
&#13;
扩展
日历在某些日期着色,但这不是问题。我想显示日历数据,但我需要避免用户可以更改所选的日期或月份。我想要静态数据而不需要人为干预。
谢谢你的时间!
答案 0 :(得分:2)
这是在日历上“防止”任何鼠标事件的有效方法。
诀窍就像使用div
在日历上方设置另一个“掩码”z-index
一样简单。
$("#myDatePicker").datepicker();
// Get the calendar dimention and position.
var calendar={};
calendar.top=$("#myDatePicker").offset().top;
calendar.left=$("#myDatePicker").offset().left;
calendar.height=$("#myDatePicker").outerHeight();
calendar.width=$("#myDatePicker").outerWidth();
//console.log( JSON.stringify(calendar) );
// Apply it to a mask "over" the calendar.
$("#mask").css(calendar);
#mask{
position:fixed;
z-index:100;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div id="myDatePicker" style="border: 1px solid gray; display: inline-block;"></div>
<div id="mask"></div>
答案 1 :(得分:1)
您可以简单地删除所有事件
$('#bookingsCalendar').find('.day').removeClass('day');
dp.on('changeMonth', function (e) {
setTimeout(function () {
$('#bookingsCalendar').find('.day').removeClass('day');
}, 100);
});