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

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

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

Answer 2

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.

Answer 3

add to datepicker event

$('.datepicker').datepicker({

}).on('show', function(e){
    $('.day').click(function(event) {
        event.preventDefault();
        event.stopPropagation();
    });
});

Answer 4

The accepted answer didn't work for me as well.

There are several different implemetation of bs datepicker. I use one which comes with metronic admin theme. My bootstrap-datepicker.js file starts with:

/* =========================================================
 * bootstrap-datepicker.js
 * http://www.eyecon.ro/bootstrap-datepicker
 * =========================================================

In order to make it readonly 'disabled' attribute needs to be added to respective input element.

P.S. I think it's a time-efficient tactic in respect to any other js widget/component: before trying to hook into events or try to figure out how particular component works just check it's reaction on 'disabled' and 'readonly' attributes - there are good chances it will disable itself exactly as needed. Actually it may be even faster than reading component's docs. :)

Answer 5

Use onkeydown="return false" in the input field. Clean and simple.