Dans mon projet Angular, j'essaie d'utiliser les directives Angular pour bootstrap datepicker , mais cela ne s'affiche pas.
J'ai lié à <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
et à <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
dans mon index.html et dans mon app.js j'ai mis ui.bootstrap
en tant que dépendance.
angular
.module('myApp', ['ui.bootstrap'])
Y a-t-il quelque chose d'évident qui me manque?
J'essaie d'utiliser uib-datepicker-popup
dans un commutateur-ng dans une répétition-ng, mais je ne vois pas pourquoi cela poserait problème:
<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>
Et dans mon contrôleur:
vm.datePickerOpen = false;
vm.openDatePicker = function($event) {
vm.datePickerOpen = true;
};
Apparemment, la documentation sur https://angular-ui.github.io/bootstrap/#/datepicker correspond à une version plus récente. En remplaçant uib-datepicker-popup
par datepicker-popup
, cela a fonctionné.
J'ai aussi dû changer <input type="date" datepicker-popup>
en <input type="text" datepicker-popup>
à cause de ceci: Y a-t-il un moyen de changer le format du type d'entrée = "date"?
Il fonctionne maintenant. La documentation sur les directives Angular pour bootstrap doit mentionner à partir de quelle version utiliser uib-datepicker et préciser où datepicker est applicable.
Avait un problème similaire ... Après deux heures de creuser et d’essayer, j’ai pu le faire fonctionner avec
<input type=text" uib-datepicker-popup="dd/MM/yyyy" ng-model="user.birthday" />
uniquement en faisant des données de modèle un objet Date dans le contrôleur
comme ça
//after we fetch the model (user) data make the needed field a Date object
user.birthday = new Date(user.birthday);
Pour ceux qui cherchaient, j'avais le même problème, cela corrigeait mon problème. Ajouté AngularMoment à mon module et "moment" injecté:
$scope.object.moment = moment();
$scope.object.date = $scope.object.moment.toDate();
puis:
<datepicker ng-model="object.date"></datepicker>