Datepicker угловая директива для Bootstrap, не показывающая

Question

В моем проекте Angular Я пытаюсь использовать Angular директивы для 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']) 

Есть ли что-то очевидное, что мне не хватает?

Я пытаюсь использовать 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; 
}; 

Answer 1

Приблизительно документация на 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?

Он сейчас работает. В документации по угловым директивам для бутстрапа следует указать, из какой версии использовать uib-datepicker и где применим datepicker.

Answer 2

Для тех, кто искал, у меня была та же проблема, это исправило мою проблему. Добавлено AngularMoment to my module и Введенный "момент":

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

затем:

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

Answer 3

Если бы подобный вопрос. После 2-х часов копания и пытался, я был в состоянии заставить его работать с

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