由於添加了兩個腳本，顯示了兩個日曆

Question

我在我的代碼中使用了datepicker。我最初使用this script的datepicker。

現在我使用this script在我的頁面上進行分頁。因此，在我的代碼中添加第二個腳本後，頁面向我顯示兩個日曆，其中我只想使用從第一個腳本加載的日曆。如何刪除出現在頁面上的第二個日曆？使用ui.bootstrap

var todoApp = angular.module('todoController', ['ui.bootstrap']); 

，然後將日期選擇器指令添加到它：

另外一兩件事，我添加分頁這樣的腳本。這是它向我展示兩個日曆的主要原因。但我無法擺脫它。

Answer 1

使用引導日期選擇器，輸入類型應設置爲文本。如果您將輸入類型設置爲日期，它也將顯示本機日期選擇器。將輸入類型更改爲文本並重試。

Answer 2

出現在我的頁面上的兩個日曆是由於我包含在我的控制器文件中的指令。我使用datepicker作爲ui-bootstrap以及我自己的指令都使用的指令。

<input type="text" class="form-control input-lg text-center datepicker" ng-model="formData.endDate" placeholder="Choose end date" datepicker/> 

todoApp.directive("datepicker", function() { 
    return { 
    restrict: "A", 
    require: "ngModel", 
    link: function (scope, elem, attrs, ngModelCtrl) { 
     var updateModel = function (dateText) { 
      scope.$apply(function() { 
       ngModelCtrl.$setViewValue(dateText); 
      }); 
     }; 
     var options = { 
      dateFormat: "yy-mm-dd", 
      onSelect: function (dateText) { 
       updateModel(dateText); 
      }, 
      minDate: -0 
       // maxDate: "+1M +10D" 
     }; 
     elem.datepicker(options); 
    } 
    } 
}); 

此前該指令的名字是datepicker這是與datepicker指令已經在ui-bootstrap代碼存在衝突。所以，我在代碼改變了我的指令名稱：

<input type="text" class="form-control input-lg text-center datepicker" ng-model="formData.endDate" placeholder="Choose end date" mydatepicker/> 

todoApp.directive("mydatepicker", function() { 
    return { 
    restrict: "A", 
    require: "ngModel", 
    link: function (scope, elem, attrs, ngModelCtrl) { 
     var updateModel = function (dateText) { 
      scope.$apply(function() { 
       ngModelCtrl.$setViewValue(dateText); 
      }); 
     }; 
     var options = { 
      dateFormat: "yy-mm-dd", 
      onSelect: function (dateText) { 
       updateModel(dateText); 
      }, 
      minDate: -0 
       // maxDate: "+1M +10D" 
     }; 
     elem.datepicker(options); 
    } 
    } 
}); 

而不是使用datepicker作爲名稱指令，我用mydatepicker。因此衝突得到解決。