angularjs - modal - ui bootstrap tpls 2.5 0

La directiva angular Datepicker para Bootstrap no se muestra

Question

En mi proyecto Angular estoy tratando de usar las directivas angulares para bootstrap datepicker , pero no aparece.

Me he relacionado con <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script> y <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> en mi index.html y en mi app.js puse ui.bootstrap como una dependencia.

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

¿Hay algo obvio que me estoy perdiendo?

Estoy tratando de usar uib-datepicker-popup dentro de un ng-switch dentro de una ng-repeat, pero no veo por qué eso causaría ningún problema:

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

Y en mi controlador:

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

Answer 1

Para aquellos que buscan, tuve el mismo problema, esto solucionó mi problema. Se agregó AngularMoment a mi módulo y "Momento" inyectado:

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

entonces:

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

Answer 2

Tenía un problema similar. Después de 2 horas de excavar e intentar, pude hacerlo funcionar con una

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

solo al hacer que los datos del modelo sean un objeto Date en el controlador

Me gusta esto

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

Answer 3

Aparentemente, la documentación en https://angular-ui.github.io/bootstrap/#/datepicker es para una versión más nueva. Al cambiar uib-datepicker-popup a datepicker-popup funcionó.

También tuve que cambiar <input type="date" datepicker-popup> a <input type="text" datepicker-popup> debido a esto: ¿Hay alguna forma de cambiar el tipo de entrada = formato de "fecha"?

Está trabajando ahora. La documentación de las directivas angulares para bootstrap debe mencionar de qué versión usar el uib-datepicker y dónde datepicker es aplicable.