title: How to make bootstrap datepicker readonly?
body: <p>I'm struggling with creating embedded/inline datepicker which will not be clickable - it should only present dates, behave as readonly.</p>
  
  <p>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.</p>
  
  <p>I'm using eternicode-bootstrap-datepicker - to make it multidate.</p>
  
  <p>So far I've got this:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="&lt;c:url value="/resources/js/lib/eternicode-bootstrap-datepicker/css/datepicker3.css" /&gt;" /&gt;
  
  &lt;script src="&lt;c:url value="/resources/js/lib/eternicode-bootstrap-datepicker/js/bootstrap-datepicker.js"/&gt;"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $("#datepicker-inline").datepicker({
          multidate : true,
          todayHighlight : true,
      });
      var dates = [];
      var i = 0;
      &lt;c:forEach items="${course.selectedDates}" var="selectedDate"&gt;
      console.log("${selectedDate}");
      dates[i++] = new Date("${selectedDate}");
      &lt;/c:forEach&gt;
      $("#datepicker-inline").datepicker('setDates', dates);
  
      // something to make it readonly
      $(".day").click(function(event) {
          console.log("preventing");
          event.preventDefault();
      });
  });
  &lt;/script&gt;
  
  
  &lt;div class="col-xs-8"&gt;
      &lt;h4&gt;Dates&lt;/h4&gt;
      &lt;div id="datepicker-inline"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>[Sorry if it's badly formatted]</p>
  
  <p>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.</p>
  
  <p>Do you have any idea how to make it disabled / inactive / readonly ?</p>
  
  <p>All readonly topic where about making <code>&lt;input&gt;</code> readonly, but still capable to select date from datepicker.</p>