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

【问题标题】：How to readOnly or cancel changeDate event on Bootstrap-datepicker如何在 Bootstrap-datepicker 上只读或取消 changeDate 事件
【发布时间】：2021-05-31 20:12:54
【问题描述】：

我正在使用 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>

扩展：

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

感谢您的宝贵时间！

【问题讨论】：

如果你想“显示”日期，我认为你不应该使用日期“选择器”。
有趣的问题。所以你想要一个显示“喜欢”的日期选择器......但没有选择交互。日历是否应该显示已知事件？或者只是一个简单的空日历？能不能具体说一下用法？
我编辑了你的 sn-p 以使其“稍微”工作。所以我们现在可以看到的显示......这就是你想要的？但在什么情况下？由于不需要选择，输入字段是否有用（可以隐藏）？日历有什么用？
也许您可以禁用所有日期，只需使用：daysOfWeekDisabled: [0,1,2,3,4,5,6] 选项 (doc here)。我同意以前的 cmets，有关您的方案的其他信息可能会很有用。
好的...“某些日子有色”是一项要求。我给你的链接不行。这是a link for you to read... 将此添加到@VincenzoC 评论中，您将接近解决方案。 ;) 随意编辑您的问题，以便根据您的要求澄清它...否则，您真的冒着投票的风险，因为 “不清楚您在问什么”。

标签： jquery bootstrap-datepicker

【解决方案1】：

这是一种“防止”日历上出现任何鼠标事件的有效方法。

诀窍就像在日历上方设置另一个“掩码”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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：