jquery - 日期选择器字段为只读

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