Question

我在我的指令中使用了一个datepicker来允许用户选择日期。我已禁用文本框，以强制用户仅使用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>

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

Answer 1

看起来您正在使用角度js（我对此一无所知），但如果您可以将其设置为如下，则可以按预期工作。

＆＃13;

$('#reqDate').datepicker($.extend({
            dateFormat: 'm/d/y'
   }
));

$("#calTrigger-btn").click(function(){
   $('#reqDate').datepicker("show");
});

＆＃13;

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

＆＃13;

Jquery datepicker将不允许更改已禁用文本框的日期。

1 个答案: