Datepicker 字段为只读答案

【问题标题】：Datepicker field to be read-onlyDatepicker 字段为只读
【发布时间】：2015-04-24 16:38:41
【问题描述】：

我有一个使用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">

【问题讨论】：

你可以试试 $("#datepicker-start_date").attr( 'readOnly' , 'true' );在您的 document.ready 方法中？或者你也可以试试 $("#datepicker-start_date").keypress(function(event) {event.preventDefault();});
我建议为日期选择器使用图像，然后将您的输入设为只读。我试过了，它有效
@Sushil - 第一个选项提供的功能与我对 HTML 属性所做的功能完全相同。而第二个选项没有做任何事情......
@Pratik，你能详细说明一下吗？
您的 css 规则正在应用光标和背景提示。您只需要使用新的 css 规则覆盖它。

标签： jquery html datepicker

【解决方案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;
}

【讨论】：

stackoverflow.com/questions/1865492/…。是你自己添加了一个 hasDatePicker 类还是 JQuery 添加的？
它是自动添加的。
不，不是。 :( 在 jsfiddle 中，即使我放回“hasDatePicker”，它也可以工作。
也许你误解了我想要的。我知道它可以作为readonly 工作。但在视觉上，它有一个带有disabled 符号的手动选择器（悬停在该字段上时），该字段是灰色的。这就是“只读”HTML 属性给出的效果。我不想要这些视觉效果。
我认为css规则是这里的路。但是，我会向该选择器添加一个类以使其更加受限，因此它不会破坏所有与日期选择器无关的只读输入。

【解决方案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();
});

【讨论】：

只是没有。这完全禁用了 datepicker 元素的键盘导航。