Question

我使用Bootstrap datepicker来显示日历，但我不想要任何人为干预。
它必须是只读日历。

我尝试禁用onchange事件，但它不起作用：

编辑澄清：

＆＃13;

$("#myDatePicker").datepicker();
$("#myDatePicker").datepicker().on("changeDate", function (ev) {
	return false;
});

＆＃13;

<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;

扩展

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

谢谢你的时间！

Answer 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>

Answer 2

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

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

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

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

2 个答案: