如何使用Javascript为HTML输入日期设置范围

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?

Answer 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>