У меня есть форма, где мне нужно иметь 2 или более полей даты для разных вещей. Я попробовал Angular UI Bootstrap, который отлично работает, когда у меня есть только 1 поле даты в форме. Но он перестает работать, если у меня есть несколько полей даты, и я не знаю более простой способ заставить это работать.

Это мой пример 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>     

Мой JS это:

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];

});

Я реализовал на основе образцаВот, Проблема, которую я имею здесь:

1) При щелчке по одному из полей даты во всплывающем окне выбора даты появляется сообщение «Похоже, что 2 выбора даты в 1».

2) Когда я удаляюis-open="opened" атрибут, всплывающее окно, кажется, работает нормально. Но безis-open="opened",ng-click="open($event) для кнопки не работает.

3) Поскольку каждое из полей даты имеет разные ng-модели, я не могу установить даты по умолчанию для любых полей даты, кроме первого сng-model="formData.dt"

Единственный длинный способ решить эту проблему, о котором я могу подумать, - это выделить контроллер для каждого поля даты.

Я хотел бы знать, как другие реализуют несколько полей даты в одной форме при использовании Angular UI Bootstrap.