Bootstrap 的 Datepicker 角度指令未显示答案

【问题标题】：Datepicker angular directive for Bootstrap not showingBootstrap 的 Datepicker 角度指令未显示
【发布时间】：2015-10-14 08:29:08
【问题描述】：

在我的 Angular 项目中，我尝试使用 Angular 指令来引导 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;
};

【问题讨论】：

标签： angularjs twitter-bootstrap datepicker angular-ui-bootstrap

【解决方案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?

它现在正在工作。 bootstrap 的 Angular 指令文档应提及使用 uib-datepicker 的版本以及 datepicker 适用的位置。

【讨论】：

经过更多搜索后，我找到了这个迁移指南，现在知道添加 uib- 的前缀更改是从版本 0.14.0 开始的：github.com/angular-ui/bootstrap/wiki/…
感谢您的提问和回答。我对这个控件有点困惑。对我来说，它正在使用而不是相反。哪个与文档不一致？？？只要它有效，我想这是最重要的！
@cyoung 检查您正在运行的 UI Bootstrap 版本。 uib- 前缀是在 0.14.0 版本中引入的。所以你可能运行的是旧版本。

【解决方案2】：

有类似的问题。经过 2 小时的挖掘和尝试，我能够使用一个

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

仅通过在控制器中将模型数据设为 Date 对象

喜欢这个

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

【讨论】：

【解决方案3】：

对于那些搜索，我遇到了同样的问题，这解决了我的问题。添加AngularMoment to my module并注入“时刻”：

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

然后：

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

【讨论】：