How to have at least two datepickers of ui-bootstrap on a single page?

Question

I want to have several datepickers on a page. But with the default solution from UI-Bootstrap it is not possible, no one of datepickers may be opened. The conflict with each

Answer 1

I'm still learning Angular and UI-Bootstrap, so take that into account when reading my answer. I did something similar to BlueMonk, but in a flexible way that keeps my controller code from having to know about the instances of the datepicker on the page.

I put all of the datepicker code in my controller into a single namespace:

$scope.datePicker = (function () {
    var method = {};
    method.instances = [];

    method.open = function ($event, instance) {
        $event.preventDefault();
        $event.stopPropagation();

        method.instances[instance] = true;
    };

    method.options = {
        'show-weeks': false,
        startingDay: 0
    };

    var formats = ['MM/dd/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    method.format = formats[0];

    return method;
}());

And then used the following markup:

This worked like a charm for me.