日期选择器字段为只读

Question

我有一个使用 datepicker:

的输入字段

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

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

那么，如何实现类似于"read-only"但没有"disabled"手动选择器等的效果？

更新

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 class 才能使其正常工作。调查导致问题的原因

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

试一试 -

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

Answer 2

尝试在 click/keyup 个事件上使用 $(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();
});

日期选择器字段为只读

Datepicker field to be read-only

html

jquery

datepicker