How to make bootstrap datepicker readonly?

I'm struggling with creating embedded/inline datepicker which will not be clickable - it should only present dates, behave as readonly.

What I'm doing is populating calendar with selected dates from model, then I try to make it un-clickable so user doesn't thin he can edit anything.

I'm using eternicode-bootstrap-datepicker - to make it multidate.

So far I've got this:

<link rel="stylesheet" href="<c:url value="/resources/js/lib/eternicode-bootstrap-datepicker/css/datepicker3.css" />" />

<script src="<c:url value="/resources/js/lib/eternicode-bootstrap-datepicker/js/bootstrap-datepicker.js"/>"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#datepicker-inline").datepicker({
        multidate : true,
        todayHighlight : true,
    });
    var dates = [];
    var i = 0;
    <c:forEach items="${course.selectedDates}" var="selectedDate">
    console.log("${selectedDate}");
    dates[i++] = new Date("${selectedDate}");
    </c:forEach>
    $("#datepicker-inline").datepicker('setDates', dates);

    // something to make it readonly
    $(".day").click(function(event) {
        console.log("preventing");
        event.preventDefault();
    });
});
</script>


<div class="col-xs-8">
    <h4>Dates</h4>
    <div id="datepicker-inline"></div>
</div>

[Sorry if it's badly formatted]

As you can see, I'm trying to prevent default click action on .day in calendar. Console shows "preventing", but it still checks day as selected.

Do you have any idea how to make it disabled / inactive / readonly ?

All readonly topic where about making <input> readonly, but still capable to select date from datepicker.

Add event.stopPropagation(); in your click event. The code would be as follows:

$('.day').click(function(event) {
    console.log('Preventing');
    event.preventDefault();
    event.stopPropagation();
});