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 other. Here is my code:

<div>             <div class="form-horizontal pull-left">                 <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>                 <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>             </div>             <div class="form-horizontal pull-left">                 <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />                 <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>             </div>             <button type="submit" class="btn btn-default">Submit</button>         </div> 

I just did a copy/paste of the datepicker code from the site http://angular-ui.github.io/bootstrap/#/datepicker. They conflict with each other. When I click <input> field to open a datepicker no one can be opened properly, both are opened for a second and immediately disappear.

How may I have several datepickers on a single page?

Answer 1

Rather than using a different function you can use a different is-open attribute and then pass the attribute in through the ng-click function. You still need different models:

<div>         <div class="form-horizontal pull-left">             <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>             <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>         </div>         <div class="form-horizontal pull-left">             <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />             <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>         </div>         <button type="submit" class="btn btn-default">Submit</button>     </div> 

And inside controller:

   $scope.open = function($event,opened) {     $event.preventDefault();     $event.stopPropagation();      $scope[opened] = true;   }; 

Answer 2

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:

<p class="input-group">     <input type="text" class="form-control" ng-model="editableEmployee.dateHired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateHired']" close-text="Close" />     <span class="input-group-btn">         <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateHired')"><i class="glyphicon glyphicon-calendar"></i></button>     </span> </p>  <p class="input-group">     <input type="text" class="form-control" ng-model="editableEmployee.dateFired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateFired']" close-text="Close" />     <span class="input-group-btn">         <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateFired')"><i class="glyphicon glyphicon-calendar"></i></button>     </span> </p> 

This worked like a charm for me.