Datepicker angular directive for Bootstrap not showing

Question

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

dhuyvetter · Accepted Answer · 2016-05-25T07:53:20.347

16

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.

edited May 25 '16 at 07:53

answered Oct 14 '15 at 10:32

dhuyvetter

544
1
7
19

2

After some more searching I found this migration guide and know now that the prefix change to add uib- is **from release 0.14.0** : https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes – dhuyvetter Oct 14 '15 at 10:55
Thanks for your question and answer. I'm a bit confused by this control. For me it is working using and not the other way around. Which is inconsistent with the documentation??? So long as it works I guess that is the main thing! – CYoung Sep 05 '16 at 00:33
@cyoung Check which version of UI Bootstrap you are running. The uib- prefix was introduced inversion 0.14.0. So you are probably running an older version. – dhuyvetter Sep 06 '16 at 06:12

score 2 · Answer 2 · answered Feb 07 '17 at 16:04

Had a similar issue. After 2 hours of digging and trying, I was able to make it work with an

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

only by making the model data a Date object in the controller

like this

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

score 0 · Answer 3 · answered Mar 23 '16 at 01:18

For those searching, I had the same issue, this fixed my issue. Added AngularMoment to my module and Injected "moment":

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

then:

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

Datepicker angular directive for Bootstrap not showing

3 Answers3