Datepicker字段是只读的

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

Answer 2

尝试在点击/加密事件中使用$(this).blur()：

jsFiddle Demo

<强> HTML：

Date: <input id="datepicker" type="text">

<强> JS / jQuery的：

$( "#datepicker" ).datepicker();
$( "#datepicker" ).click(function(){
    $(this).blur();
});
$( "#datepicker" ).keyup(function(){
    //To further secure field, uncomment next line
    //$(this).val( $(this).val().slice(0,-1) );
    $(this).blur();
});