加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – Bootstrap的Datepicker angular指令未显示

发布时间:2020-12-17 08:21:16 所属栏目:安全 来源:网络整理
导读:在我的Angular项目中,我试图将Angular指令用于bootstrap datepicker,但它没有显示出来. 我已链接到 script src =“bower_components / angular-bootstrap / ui-bootstrap.js” / script和 script src =“bower_components / angular-bootstrap / ui-bootstra
在我的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,它可以正常工作.

另外我不得不改变< 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的位置.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读