How to make bootstrap datepicker readonly?

Question

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.

Answer 1

The accepted answer didn't work for me, but another way to do this is by using the elegant solution provided to a similar question related to JQuery datepicker (see https://stackoverflow.com/a/8315058/2396046)

To do this for Bootstrap Datepicker would look like this:

$('#datepicker-inline').datepicker({
   //Other options...
   beforeShowDay: function() {
      return false;
   }
});

This leaves the calendar dialogue box intact, but all days are greyed out.