2

I need to set date range for my 2 input dates. I know that I can put min and max value for it but it will force me to pick a specific time range. What I want to achieve is to select any date in the first input and only a day within a 14 days range in the second input.

So for example I want to be able to pick 14.01.2014 - 28.01.2014 as well as 01.05.1992 - 15.05.1992. Therefore i can't just use 

<input type="date"  />
<input type="date"  max="{{ctrl.maxDate"}}/>

Do someone know how to dynamically set max value or is their a range attribute?

  • You update the second one's `max` dynamically when the first one's value changes. But I don't know the Angular idiom for that. – T.J. Crowder Sep 17 '15 at 12:56
  • You can examine this post. http://stackoverflow.com/questions/29086764/set-min-date-to-current-date-in-angularjs-input – Yigit Yuksel Sep 17 '15 at 13:03

1 Answers1

1

You can set up maxDate to be a calculated value.

var myApp = angular.module('myApp', []);
  
myApp.controller('MyController', ['$scope', function($scope) {
  //Data
  $scope.startDate = new Date();
  $scope.range = 14;
  
  //Functions
  $scope.maxDate = function () {
    var d = new Date($scope.startDate);
    
    d.setDate($scope.startDate.getDate() + $scope.range);
    
    return d;
  };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">
  <input type="date" ng-model="startDate" />
  <input type="date" min="{{ startDate | date:'yyyy-MM-dd' }}" max="{{ maxDate() | date:'yyyy-MM-dd' }}" />
</div>
Drew Gaynor
  • 8,292
  • 5
  • 40
  • 53
  • Sorry, i wasn't clear. There is no minDate. I edited my question. We can pick whatever date we want for the first input. It's the second one that should be limited. Isn't your answer making the maxDate a constant value that won't dynamically change? –  Sep 17 '15 at 13:29
  • I actually realized what you meant before you updated the question. Please see my updated answer :) – Drew Gaynor Sep 17 '15 at 13:29
  • Oh, this is so clever. I didn't thought about it this way. Thank you very much! –  Sep 17 '15 at 13:33