web-dev-qa-db-ja.com

Datepicker angularディレクティブBootstrapが表示されない

私のAngularプロジェクトでは、Angularディレクティブを使用しようとしていますbootstrap datepicker 、しかし、それは表示されていません。

私のindex.htmlと私ので<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>と<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>にリンクしました）app.jsui.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;
};
angularjstwitter-bootstrapdatepickerangular-ui-bootstrap
7
dhuyvetter

どうやら https://angular-ui.github.io/bootstrap/#/datepicker のドキュメントは新しいバージョン用です。 uib-datepicker-popupをdatepicker-popupに変更することで機能しました。

また、このため、<input type="date" datepicker-popup>を<input type="text" datepicker-popup>に変更する必要がありました： 入力type = "date"形式を変更する方法はありますか？

現在動作中です。 Angularディレクティブのbootstrapについてのドキュメントでは、uib-datepickerを使用するバージョンと、datepickerを適用できる場所について説明する必要があります。

16
dhuyvetter

同様の問題がありました。 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);
2
Bogdan Deaky

検索している人にとって、私は同じ問題を抱えていました、これは私の問題を修正しました。追加 私のモジュールにAngularMoment そして注入された「モーメント」：

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

その後：

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