Uib DatePicker date range

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="appDatepicker" ng-controller="DatePicker">
      <div class="row marginLeft-4-sm marginTop15">
        <div class="col-xs-11 col-sm-3 btn-group marginLeft19-xs marginTop-xs10">
          <div class="input-group">
            <input id="FechaAltaInicio" type="text" class="form-control datepicker" 
            placeholder="Init Starting Date" uib-datepicker-popup="" 
            datepicker-options="datePicker.FechaAltaInicioOptions" 
            is-open="datePicker.FechaAltaInicioStatus.opened" 
            ng-model="FilterViewModel.FechaAltaInicio" 
            ng-click="datePicker.FechaAltaInicioOpen($event)" 
            onkeydown="return false" 
            ng-change="datePicker.changeMinAndMaxDates()" />
            <span class="input-group-addon" ng-click="datePicker.FechaAltaInicioOpen($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </span>
          </div>
        </div>
        <div class="col-xs-11 col-sm-3 btn-group marginLeft19-xs marginTop-xs10">
          <div class="input-group">
            <input id="FechaAltaFin" type="text" class="form-control datepicker" 
            placeholder="Finish Starting Date" uib-datepicker-popup="" 
            datepicker-options="datePicker.FechaAltaFinOptions" 
            is-open="datePicker.FechaAltaFinStatus.opened" 
            ng-model="FilterViewModel.FechaAltaFin" 
            ng-click="datePicker.FechaAltaFinOpen($event)" 
            onkeydown="return false" ng-change="datePicker.changeMinAndMaxDates()" />
            <span class="input-group-addon" ng-click="datePicker.FechaAltaFinOpen($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </span>
          </div>
        </div>
        <div class="col-xs-11 col-sm-3 btn-group marginLeft19-xs marginTop-xs10">
          <div class="input-group">
            <input id="FechaCierreInicio" type="text" class="form-control datepicker" 
            placeholder="Init Closing Date" uib-datepicker-popup="" 
            datepicker-options="datePicker.FechaCierreInicioOptions" 
            is-open="datePicker.FechaCierreInicioStatus.opened" 
            ng-model="FilterViewModel.FechaCierreInicio" 
            ng-click="datePicker.FechaCierreInicioOpen($event)" 
            onkeydown="return false" ng-change="datePicker.changeMinAndMaxDates()" />
            <span class="input-group-addon" ng-click="datePicker.FechaCierreInicioOpen($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </span>
          </div>
        </div>
        <div class="col-xs-11 col-sm-3 btn-group marginLeft19-xs marginTop-xs10">
          <div class="input-group">
            <input id="FechaCierreFin" type="text" class="form-control datepicker" 
            placeholder="Finish Closing Date" uib-datepicker-popup="" 
            datepicker-options="datePicker.FechaCierreFinOptions" 
            is-open="datePicker.FechaCierreFinStatus.opened" 
            ng-model="FilterViewModel.FechaCierreFin" 
            ng-click="datePicker.FechaCierreFinOpen($event)" 
            onkeydown="return false" 
            ng-change="datePicker.changeMinAndMaxDates()" />
            <span class="input-group-addon" ng-click="datePicker.FechaCierreFinOpen($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

// Code goes here

angular.module('appDatepicker', ['ui.bootstrap'])
.controller('DatePicker', function($scope){
  
  //DatePicker
  $scope.datePicker = {
      FechaAltaInicioStatus: { opened: false },
      FechaAltaInicioOpen: function ($event) {
          $scope.datePicker.FechaAltaInicioStatus.opened = true;
      },
      FechaAltaInicioOptions: {
          maxDate: null
      },
      FechaAltaFinStatus: { opened: false },
      FechaAltaFinOpen: function ($event) {
          $scope.datePicker.FechaAltaFinStatus.opened = true;
      },
      FechaAltaFinOptions: {
          minDate: null,
          maxDate: null
      },
      FechaCierreInicioStatus: { opened: false },
      FechaCierreInicioOpen: function ($event) {
          $scope.datePicker.FechaCierreInicioStatus.opened = true;
      },
      FechaCierreInicioOptions: {
          minDate: null,
          maxDate: null
      },
      FechaCierreFinStatus: { opened: false },
      FechaCierreFinOpen: function ($event) {
          $scope.datePicker.FechaCierreFinStatus.opened = true;
      },
      FechaCierreFinOptions: {
          minDate: null
      },
      //Method for update minDate and MaxDate
      changeMinAndMaxDates: function () {
          $scope.datePicker.FechaAltaInicioOptions.maxDate = new Date($scope.FilterViewModel.FechaAltaFin);

          $scope.datePicker.FechaAltaFinOptions.minDate = new Date($scope.FilterViewModel.FechaAltaInicio);
          $scope.datePicker.FechaAltaFinOptions.maxDate = new Date($scope.FilterViewModel.FechaCierreInicio);

          $scope.datePicker.FechaCierreInicioOptions.minDate = new Date($scope.FilterViewModel.FechaAltaFin);
          $scope.datePicker.FechaCierreInicioOptions.maxDate = new Date($scope.FilterViewModel.FechaCierreFin);

          $scope.datePicker.FechaCierreFinOptions.minDate = new Date($scope.FilterViewModel.FechaCierreInicio);
      }
  };
  
});

/* Styles go here */