用於Bootstrap的Datepicker角度指令不顯示

在我的Angular項目中，我嘗試使用Angular指令作爲引導程序datepicker，但它沒有顯示出來。用於Bootstrap的Datepicker角度指令不顯示

我掛<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>和 <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>在我的index.html，在我app.js我已經把ui.bootstrap作爲一個依賴。

angular 
    .module('myApp', ['ui.bootstrap'])

有什麼明顯的我失蹤了嗎？

我想一個NG重複內的NG-交換機中使用uib-datepicker-popup，但我不明白爲什麼這會導致什麼問題：

<div class="form-group" ng-repeat="field in vm.fields"> 
    <label for="{{ field.propertyName }}"> 
     <h5><span translate="{{ field.translate }}"></span> 
      <span class="form-control-required" ng-show="{{field.required}}">*</span> 
     </h5> 
    </label> 
    <div ng-switch="field.type" ng-class="{ 'input-group': field.type === 'date' }"> 
     <select ng-switch-when="gender" 
       name="{{ field.propertyName }}" id="{{ field.propertyName }}" 
       ng-model="vm.model[field.propertyName]" class="form-control" 
       ng-required="{{ field.required }}"> 
      <option value="m">Male</option> 
      <option value="f">Female</option> 
     </select> 
     <textarea ng-switch-when="textarea" 
        name="{{ field.propertyName }}" id="{{ field.propertyName }}" 
        class="form-control" ng-model="vm.model[field.propertyName]" 
        ng-required="{{ field.required }}"></textarea> 
     <input ng-switch-when="date" 
       type="date" uib-datepicker-popup="dd/MM/yyyy" 
       show-weeks="false" is-open="vm.datePickerOpen" 
       name="{{ field.propertyName }}" id="{{ field.propertyName }}" 
       class="form-control pull-left" ng-model="vm.model[field.propertyName]" 
       ng-required="{{ field.required }}"> 
     <span class="input-group-btn btn-" ng-if="field.type === 'date'"> 
      <button type="button" class="btn btn-primary" 
        ng-click="vm.openDatePicker($event)"> 
       <i class="glyphicon glyphicon-calendar"></i> 
      </button> 
     </span> 
     <input ng-switch-default="" 
       type="{{ field.type }}" name="{{ field.propertyName }}" id="{{ field.propertyName }}" 
       class="form-control pull-left" ng-model="vm.model[field.propertyName]" 
       ng-required="{{ field.required }}"> 
    </div> 
</div>

而且在我的控制器：

vm.datePickerOpen = false; 

vm.openDatePicker = function($event) { 
    vm.datePickerOpen = true; 
};

來源

2015-10-14 dhuyvetter

顯然https://angular-ui.github.io/bootstrap/#/datepicker的文檔是針對較新的版本。通過將uib-datepicker-popup更改爲datepicker-popup它工作。

此外，我不得不改變<input type="date" datepicker-popup>到<input type="text" datepicker-popup>因爲這個：Is there any way to change input type="date" format?

它現在的工作。關於引導程序的Angular指令的文檔應該提及使用uib-datepicker的版本以及datepicker的適用位置。

來源

2015-10-14 10:32:55 dhuyvetter

經過一番搜索之後，我發現了這個遷移指南，並且現在知道添加uib的前綴更改是從發佈0.14.0開始**：https：//github.com/angular-ui/bootstrap/wiki/Migration-指南前綴 – dhuyvetter

感謝您的問題和答案。我對這個控制有點困惑。對我來說，它正在使用而不是其他方式。這與文檔不一致？只要它有效，我猜這是主要的！ – CYoung

@cyoung檢查您正在運行的是哪個版本的UI Bootstrap。 uib-前綴引入了反轉0.14.0。所以你可能運行的是舊版本。 – dhuyvetter

對於那些搜索，我有同樣的問題，這解決了我的問題。新增AngularMoment to my module並注入「時刻」：

$scope.object.moment = moment(); 
$scope.object.date = $scope.object.moment.toDate();

則：

<datepicker ng-model="object.date"></datepicker>

來源

2016-03-23 01:18:42 Fergus

也有類似的問題。 2小時挖掘和嘗試之後，我能夠僅通過在控制器中的模型數據Date對象，使其與

<input type=text" uib-datepicker-popup="dd/MM/yyyy" ng-model="user.birthday" />

工作

這樣

//after we fetch the model (user) data make the needed field a Date object 
user.birthday = new Date(user.birthday);

來源

2017-02-07 16:04:52

用於Bootstrap的Datepicker角度指令不顯示

回答

相關問題