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

时间:2015-09-17 12:53:40

标签: javascript angularjs html5 date input

我需要为我的2个输入日期设置日期范围。我知道我可以为它设置buttonmin值,但它会强制我选择一个特定的时间范围。我想要实现的是在第一个输入中选择任何日期,在第二个输入中仅选择14天范围内的一天。

例如,我希望能够选择max - 14.01.2014以及28.01.2014 - 01.05.1992。因此,我不能只使用

15.05.1992

有人知道如何动态设置最大值或是他们的范围属性吗?

1 个答案:

答案 0 :(得分:1)

您可以将maxDate设置为计算值。

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>