How to set range with Javascript for HTML input date

Question

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
– T.J. Crowder, Commented Sep 17, 2015 at 12:56
You can examine this post. stackoverflow.com/questions/29086764/… — Yigit Yuksel
– Yigit Yuksel, Commented Sep 17, 2015 at 13:03

Drew Gaynor · Accepted Answer · 2015-09-17 13:26:51Z

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>

edited Sep 17, 2015 at 13:26

answered Sep 17, 2015 at 13:21

Drew Gaynor

8,4825 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user4321187 Over a year ago

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?

Drew Gaynor Over a year ago

I actually realized what you meant before you updated the question. Please see my updated answer :)

user4321187 Over a year ago

Oh, this is so clever. I didn't thought about it this way. Thank you very much!

Collectives™ on Stack Overflow

How to set range with Javascript for HTML input date

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related