Duefectu Corp Duefectu Corp - 1 month ago 7
jQuery Question

How to readOnly or cancel changeDate event on Bootstrap-datepicker

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

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>

Comments