How to readOnly or cancel changeDate event on Bootstrap-datepicker

Question

I'm using Bootstrap datepicker to show a calendar, but I don't want any human interaction.
It must be a read only calendar.

I try to disable onchange event, but it don't work:

Edited to clarify:

$("#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>

Expanded:

The calendar is colored in certain dates, but this is not the problem. I want to show calendar data, but I need to avoid that the user can change the selected date or month. I want static data and no human interaction.

Thanks for your time!

Answer 1

Here is an efficient way to "prevent" any mouse event on the calendar.

The trick is as simple as setting another "mask" div above the calendar, using 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>