title: Datepicker field to be read-only
body: <p>I have an input field that takes use of <code>datepicker</code>:</p>
  
  <pre><code>&lt;input id="datepicker-start_date" class="form-control text-center hasDatepicker" readonly="true" type="text"&gt;
  </code></pre>
  
  <p>and I want to make it possible for the date to be picked only by clicking (so, no input-typing). For that purpose I enabled the <code>readonly</code> property. But now the field looks as if it's disabled (gray background) and when I hover it, the selector hand is with a red-crossed (a "no-go") symbol:</p>
  
  <p><img src="https://i.stack.imgur.com/D1V7U.png" alt="enter image description here"></p>
  
  <p>So, how can I achieve an effect similar to "read-only", but not having the "disabled" hand-selector and etc.?</p>
  
  <p><strong>Update</strong></p>
  
  <p>The JS code:</p>
  
  <pre><code>    var dateToday = new Date();
      var start_date = $("#datepicker-start_date");
      start_date.datepicker({
          changeMonth: true,
          changeYear: true,
          dateFormat: "yy-mm-dd",
          yearRange: "-00:+01",
          minDate: dateToday,
          onSelect: function (selected) {
              $("#datepicker-arrival_date").datepicker("option", "minDate", selected)
          }
      });
  
      var arrival_date = $("#datepicker-arrival_date");
      arrival_date.datepicker({
          changeMonth: true,
          changeYear: true,
          dateFormat: "yy-mm-dd",
          yearRange: "-00:+01"
      });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="datepicker-start_date" class="form-control text-center hasDatepicker" placeholder="When do you go?" readonly="readonly" data-parsley-required="true" name="start_date" type="text" value="2015-03-19"&gt;
  
  &lt;input id="datepicker-arrival_date" class="form-control text-center disabled hasDatepicker" placeholder="Arrive on...?" readonly="true" data-parsley-required="true" name="arrival_date" type="text" value="2015-03-20"&gt;
  </code></pre>