Как читать Только или отменить событие changeDate на Bootstrap-datepicker

Question

Я использую Bootstrap datepicker, чтобы показать календарь, но я не хочу никакого человеческого взаимодействия.
Это должен быть календарь только для чтения.

Я пытаюсь отключить OnChange событие, но это не работает:

Edited уточнить:

$("#myDatePicker").datepicker(); 
 
$("#myDatePicker").datepicker().on("changeDate", function (ev) { 
 
\t 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>

Expanded:

В календарь окрашен но это не проблема. Я хочу показать данные календаря, но мне нужно избегать того, что пользователь может изменить выбранную дату или месяц. Я хочу статические данные и взаимодействие с человеком.

Спасибо за ваше время!

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>