日期选择器字段为只读

Question

我有一个使用的输入字段datepicker：

<input id="datepicker-start_date" class="form-control text-center hasDatepicker" readonly="true" type="text">

我希望仅通过单击即可选择日期（因此无需输入内容）。为此，我启用了该readonly属性。但现在该字段看起来好像已禁用（灰色背景），当我将其悬停时，选择器手带有红叉（“禁止”）符号：

那么，如何才能达到类似于“只读”的效果，但又没有“禁用”手动选择器等呢？

更新

JS代码：

    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"
    });

HTML：

<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">

<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">

Answer 1

http://jsfiddle.net/8w8v9/154/

这似乎对我有用。我必须删除 hasDatePicker 类才能使其工作。调查导致问题的原因

<input id="datepicker-start_date" class="form-control text-center" type="text" readonly>

试试这些——

input[readonly] {
  cursor: pointer !important;
  background-color: white !important;
}