如何在 Bootstrap-datepicker 上只读或取消 changeDate 事件

Question

我正在使用 Bootstrap 日期选择器来显示日历，但我不需要任何人机交互。
它必须是只读日历。

我尝试禁用 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>

展开：

日历在某些日期是彩色的，但这不是问题所在。我想显示日历数据，但我需要避免用户可以更改所选日期或月份。我想要静态数据，不需要人工交互。

感谢您的宝贵时间！

Answer 1

这是 "prevent" 日历上任何鼠标事件的有效方法。

技巧很简单，只需在日历上方设置另一个 "mask" 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>

Answer 2

您可以简单地删除所有事件

 $('#bookingsCalendar').find('.day').removeClass('day');

 dp.on('changeMonth', function (e) {
        setTimeout(function () {
            $('#bookingsCalendar').find('.day').removeClass('day');
        }, 100);
        
    });

如何在 Bootstrap-datepicker 上只读或取消 changeDate 事件

How to readOnly or cancel changeDate event on Bootstrap-datepicker

jquery

bootstrap-datepicker