базовый сборщик подголовника угловой js. двойной ввод

Question

Я надеюсь создать набор выбора диапазона даты, используя угловые js и бутстрап.

У меня есть два текстовых поля, и они оба открывают окно выбора даты. Однако он вводит дату в оба блока одновременно?

фрагмент кода HTML

<div class="form-group"> 

     <div class="input-group"> 
      <input type="text" class="form-control date" id="dateFrom" placeholder="From" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" > 
      <input type="text" class="form-control date" id="dateTo" placeholder="To" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" > 
     </div> 

    </div> 

Javascript фрагмент

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { 

    $scope.open = function($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 

     $scope.opened = true; 
    }; 
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
    $scope.format = $scope.formats[1]; 
}); 

Вы можете увидеть working plunker example here

Answer 1

Вы используете ту же модель для обоих полей, нг-модель =» дт ";

Просто используйте две разные модели нг-модель = "dtFrom" для dateFrom и нг-модель = "dtTo" для dateTo:

<input type="text" class="form-control date" id="dateFrom" placeholder="From" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtFrom" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" > 
<input type="text" class="form-control date" id="dateTo" placeholder="To" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtTo" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" > 

Вот the working Plunker

AngularJS документация на ngModel должна помочь много , Я думаю.