How to usemultiple Angular UI Bootstrap Datepicker in single form?

I have 30 in one form one controller no problem. use the same concept if you need it on ng-repeat.

 <label>First Date</label>      <div class="input-group">     <input type="text" class="form-control" datepicker-popup="{{format}}"             name="dt" ng-model="formData.dt" is-open="datepickers.dt"             datepicker-options="dateOptions" ng-required="true"             close-text="Close" />      <span class="input-group-btn">        <button class="btn btn-default" ng-click="open($event,'dt')">            <i class="glyphicon glyphicon-calendar"></i></button>      </span>    </div>       <label>Second Date</label>      <div class="input-group">     <input type="text" class="form-control" datepicker-popup="{{format}}"             name="dtSecond" ng-model="formData.dtSecond"             is-open="datepickers.dtSecond" datepicker-options="dateOptions"             ng-required="true" close-text="Close" />      <span class="input-group-btn">        <button class="btn btn-default" ng-click="open($event,'dtSecond')">            <i class="glyphicon glyphicon-calendar"></i></button>      </span>    </div>     myApp.controller('DatePickrCntrl', function ($scope) {      $scope.datepickers = {        dt: false,        dtSecond: false      }      $scope.today = function() {        $scope.formData.dt = new Date();        // ***** Q1  *****        $scope.formData.dtSecond = new Date();      };      $scope.today();      $scope.showWeeks = true;      $scope.toggleWeeks = function () {        $scope.showWeeks = ! $scope.showWeeks;      };      $scope.clear = function () {        $scope.dt = null;      };      // Disable weekend selection      $scope.disabled = function(date, mode) {        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );      };      $scope.toggleMin = function() {        $scope.minDate = ( $scope.minDate ) ? null : new Date();      };      $scope.toggleMin();      $scope.open = function($event, which) {        $event.preventDefault();        $event.stopPropagation();        $scope.datepickers[which]= true;      };      $scope.dateOptions = {        'year-format': "'yy'",        'starting-day': 1      };      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];      $scope.format = $scope.formats[0];}); // ***** Q2 ***** somemodel can be just an array [1,2,3,4,5] <div ng-repeat="o in somemodel"> <label>Date Label</label>      <div class="input-group">     <input type="text" class="form-control" datepicker-popup="{{format}}"            name="dt{{o}}" ng-model="datepickers.data[o]"             is-open="datepickers.isopen[o]" datepicker-options="datepickers.option"             ng-required="true" close-text="Close" />      <span class="input-group-btn">        <button class="btn btn-default" ng-click="open($event,o)">            <i class="glyphicon glyphicon-calendar"></i></button>      </span>    </div>  </div>myApp.controller('DatePickrCntrl', function ($scope) {      $scope.datepickers = {        data: {},        options: {            'year-format': "'yy'",            'starting-day': 1        },        isopen: {}      }      $http.get("get/data/for/some/model", function(result) {         $scope.somemodel = result;         for (var i = 0; i < result.length; i++) {           $scope.datepickers.isopen[result] = false;           $scope.datepickers.data[result] = new Date(); //set default date.         }      });  // fill in rest of the function});

Simpler Solution. Requires only modding the HTML and can be used in a ng-repeat if you like. Just be creative with what you name the opened

Stick this in your Controller:

$scope.calendar = {    opened: {},    dateFormat: 'MM/dd/yyyy',    dateOptions: {},    open: function($event, which) {        $event.preventDefault();        $event.stopPropagation();        $scope.calendar.opened[which] = true;    } };

HTML:

<div class="form-group row">    <div class="col-lg-6">        <label for="formDOB">Date of Birth</label>        <p class="input-group">          <input type="text" class="form-control" datepicker-popup="{{calendar.dateFormat}}" ng-model="record.birthDate" is-open="calendar.opened.dob" datepicker-options="calendar.dateOptions" close-text="Close" placeholder="Date of Birth" />          <span class="input-group-btn">            <button type="button" class="btn btn-default" ng-click="calendar.open($event, 'dob')"><i class="glyphicon glyphicon-calendar"></i></button>          </span>        </p>    </div>    <div class="col-lg-6">        <label for="formWinDate">Win Date</label>        <p class="input-group">          <input type="text" class="form-control" datepicker-popup="{{calendar.dateFormat}}" ng-model="record.winDate" is-open="calendar.opened.win" datepicker-options="calendar.dateOptions" close-text="Close" placeholder="Win DAte" />          <span class="input-group-btn">            <button type="button" class="btn btn-default" ng-click="calendar.open($event, 'win')"><i class="glyphicon glyphicon-calendar"></i></button>          </span>        </p>    </div></div>

wayne's answer is great. I would only add, that you can make the function 'open()' better:

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

And then you have to use it like that:

ng-click="open($event, dateFrom)"

Where dateFrom is your ng-model (i.e. you use $scope.dateFrom).

EDIT: $scope.closeAll(); is a function that closes all the datePickers. It can be written like that:

$scope.closeAll = function() {    $scope.dateFrom.opened = false;    $scope.dateTo.opened = false;};