Jquery datepicker將不允許更改禁用文本框的日期。

Question

我在我的指令中使用了一個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，並且無法將其更改爲新的。我想知道是否有任何方法可以解決這個問題，謝謝

Answer 1

它看起來像你正在使用角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>