Tengo un formulario donde es necesario que tenga 2 o más campos de fecha para diferentes cosas. Probé el Bootstrap de IU angular que funciona bien cuando solo tengo 1 campo de fecha en el formulario. Pero deja de funcionar si tengo varios campos de fecha y no sé el método más fácil para que esto funcione.

Esta es mi muestra HTML:

 <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="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event)"><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="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>     

Mi JS es:

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' && ( 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];

});

Implementé basado en la muestraaquí. El problema que tengo aquí es:

1) Cuando se hace clic en uno de los campos de fecha, el selector de fecha emergente está en mal estado y parece mostrar 2 selector de fecha en 1.

2) Cuando eliminois-open="opened" atributo, la ventana emergente parece funcionar bien. Pero sinis-open="opened", elng-click="open($event) para el botón no funciona.

3) Dado que cada uno de los campos de fecha tiene modelos ng diferentes, no puedo establecer fechas predeterminadas para ningún campo de fecha excepto el primero conng-model="formData.dt"

La única manera larga de resolver esto que se me ocurre es separar el controlador para cada campo de fecha.

Me gustaría saber cómo otros implementan múltiples campos de fecha en 1 formulario cuando usan Angular UI Bootstrap.