title: How to usemultiple Angular UI Bootstrap Datepicker in single form?
body: <p>I have a form where there is a need for me to have 2 or more date fields for different things. I tried the Angular UI Bootstrap which works fine when I have only 1 date field in the form. But it stops working if I have multiple date fields and I dont know the easier method to get this to work. </p>
  
  <p>This is my HTML sample:</p>
  
  <pre><code> &lt;label&gt;First Date&lt;/label&gt;  
      &lt;div class="input-group"&gt;
       &lt;input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /&gt;
        &lt;span class="input-group-btn"&gt;
          &lt;button class="btn btn-default" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/span&gt;
      &lt;/div&gt;      
  
   &lt;label&gt;Second Date&lt;/label&gt;  
      &lt;div class="input-group"&gt;
       &lt;input type="text" class="form-control" datepicker-popup="{{format}}" name="dtSecond" ng-model="formData.dtSecond" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /&gt;
        &lt;span class="input-group-btn"&gt;
          &lt;button class="btn btn-default" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/span&gt;
      &lt;/div&gt;     
  </code></pre>
  
  <p>My JS is: </p>
  
  <pre><code>myApp.controller('DatePickrCntrl', function ($scope) {
  
        $scope.today = function() {
          $scope.formData.dt = 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' &amp;&amp; ( date.getDay() === 0 || date.getDay() === 6 ) );
        };
  
        $scope.toggleMin = function() {
          $scope.minDate = ( $scope.minDate ) ? null : new Date();
        };
        $scope.toggleMin();
  
        $scope.open = function($event) {
          $event.preventDefault();
          $event.stopPropagation();
  
          $scope.opened = true;
        };
  
        $scope.dateOptions = {
          'year-format': "'yy'",
          'starting-day': 1
        };
  
        $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
        $scope.format = $scope.formats[0];
  
  });
  </code></pre>
  
  <p>I implemented based on the sample <a href="http://angular-ui.github.io/bootstrap/" rel="noreferrer">here</a>. The problem I have here is: </p>
  
  <p>1) When one of the date field is clicked, the pop-up datepicker is messed up and seems to show 2 datepicker in 1. </p>
  
  <p>2) When I remove <code>is-open="opened"</code> attribute, the pop-up window seems to work fine. But without <code>is-open="opened"</code>, the <code>ng-click="open($event)</code> for the button doesnt work.</p>
  
  <p>3) Since each of the date fields have different ng-models, I am unable to set default dates for any date fields except for the first one with <code>ng-model="formData.dt"</code></p>
  
  <p><strong>The only long way to resolve this that I can think of is to separate the controller for each date field.</strong> </p>
  
  <p>I would like to know how others implement multiple date fields in 1 form itself when using Angular UI Bootstrap.</p>