Jquery datepicker 不允许在禁用的文本框中更改日期。答案

【问题标题】：Jquery datepicker won't allow to change date on a disabled textbox.Jquery datepicker 不允许在禁用的文本框中更改日期。
【发布时间】：2015-01-10 00:22:48
【问题描述】：

我在指令中使用了一个日期选择器来允许用户选择日期。我已禁用文本框，以强制用户仅使用 datepicker 小部件更改日期。指令如下：

function InformationDirective(){
return { 
    restrict: 'A',
    link: function (scope, element, attrs, ngModelCtrl) {
        var date = document.getElementById('reqDate');
        $(date).datepicker($.extend({
            dateFormat: 'm/d/y'
        }
    ));
        $("#calTrigger-btn").click(function(){
            $(date).datepicker("show");

        });         
    }
 };
}

HTML如下：

<div information-directive>
   <input   id="reqDate"
            ng-model="date"
            type="text"
            value="{{reqDate}}"
            disabled/>  
    <div type="button" id="calTrigger-btn">
         <img id="calendar-img" src="css\images\calendar.gif"></img>
    </div>                                                                  
</div>

由于某种原因，我的日期选择器只允许我选择一次日期，之后按钮将不会再次启动小部件。每次单击按钮时都会调用 $("#calTrigger-btn").click(function() 但在第一次选择后不会调用小部件。指令和所有内容都被添加到 html 中，唯一的问题是我在选择一次日期后无法使用日期选择器。我正在使用 Jquery-ui-1.8.15 并且无法将其更改为新的。我想知道是否有任何方法我可以解决这个问题。感谢提供任何帮助。谢谢。

【问题讨论】：

使用 'readonly' 和 'autofocus' 而不是 'disabled' 怎么样？

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

看起来您正在使用 angular js（我对此一无所知），但如果您可以按如下方式进行设置，它会按预期工作。

$('#reqDate').datepicker($.extend({
            dateFormat: 'm/d/y'
   }
));

$("#calTrigger-btn").click(function(){
   $('#reqDate').datepicker("show");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>


<div information-directive>
   <input   id="reqDate"
            ng-model="date"
            type="text"
            value=""
            disabled/>  
    <div type="button" id="calTrigger-btn">
         <img id="calendar-img" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png" width=25 height=25></img>
    </div>                                                                  
</div>

【讨论】：