How to make bootstrap datepicker read-only?

Question

I'm struggling with creating an inline / inline datepicker that won't be clickable - it should only specify dates, behave as read only.

What I am doing is filling the calendar with selected dates from the model, and then I try to make it inaccessible to the user, so the user is not thinner, he can edit anything.

I use eternicode-bootstrap-datepicker - to make it multiple.

So far I have 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 is poorly formatted]

As you can see, I am trying to prevent the default click click action in .day on the calendar. The console displays a "warning", but still checks the day as selected.

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

All readonly topics on how to make <input> read-only, but still able to select a date from a datepicker.

Answer 1

Add event.stopPropagation(); in the click event. The code will look like this:

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

Answer 2

add datepicker to event

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

Answer 3

The accepted answer did not work for me, but another way to do this is to use the elegant solution provided for a similar question related to the JQuery datpicker (see fooobar.com/questions/163926 / ... )

For this, for Bootstrap, the Datepicker would look like this:

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

This leaves the calendar dialog box intact, but all days are inactive.

Answer 4

The accepted answer did not work for me either.

There are several different bs datepicker options. I use the one that comes with the metric administrative theme. The bootstrap-datepicker.js file starts with:

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

To make it readonly, the disabled attribute must be added to the corresponding input element.

PS I think that this is a time-efficient tactic for any other js widget / component: before trying to connect to events or trying to figure out how a particular component works, just check its reaction to the disabled and readonly attributes - there is a good chance that he will turn himself off exactly as needed. In fact, it can be even faster than reading component documents. :)

Answer 5

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