在我的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'])
我有什么明显的遗失吗?
我试图在ng-repeat中的ng-switch中使用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; };
显然,https://angular-ui.github.io/bootstrap/#/datepicker上的文档适用于较新版本.通过将uib-datepicker-popup更改为datepicker-popup,它可以正常工作.
原文链接:https://www.f2er.com/angularjs/141459.html另外我不得不改变< input type =“date”datepicker-popup> to< input type =“text”datepicker-popup>因为这个:Is there any way to change input type=”date” format?
它现在正在运作.有关引导程序的Angular指令的文档应该提及使用uib-datepicker的版本以及适用于datepicker的位置.