dhuyvetter dhuyvetter - 6 months ago 68
AngularJS Question

Datepicker angular directive for Bootstrap not showing

In my Angular project I am trying to use the Angular directives for bootstrap datepicker, but it isn't showing up.

I've linked to

<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
and
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
in my index.html and in my app.js I've put
ui.bootstrap
as a dependency.

angular
.module('myApp', ['ui.bootstrap'])


Is there anything obvious I am missing?

I am trying to use
uib-datepicker-popup
within a ng-switch within a ng-repeat, but I don't see why that would cause any problem:

<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>


And in my controller:

vm.datePickerOpen = false;

vm.openDatePicker = function($event) {
vm.datePickerOpen = true;
};

Answer

Apperently the documentation on https://angular-ui.github.io/bootstrap/#/datepicker is for a newer version. By changing uib-datepicker-popup to datepicker-popup it worked.

Also I had to change <input type="date" datepicker-popup> to <input type="text"datepicker-popup> because of this: Is there any way to change input type="date" format?

It is working now. The documentation on Angular directives for bootstrap should mention from what version to use the uib-datepicker and where datepicker is applicable.