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

【问题标题】：How to set range with Javascript for HTML input date如何使用 Javascript 为 HTML 输入日期设置范围
【发布时间】：2015-12-14 08:25:08
【问题描述】：

我需要为我的 2 个输入日期设置日期范围。我知道我可以为其设置min 和max 值，但它会迫使我选择一个特定的时间范围。我想要实现的是在第一个输入中选择任何日期，在第二个输入中选择 14 天范围内的一天。

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

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

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

【问题讨论】：

当第一个值发生变化时，您会动态更新第二个的max。但我不知道 Angular 的成语。
你可以查看这篇文章。 stackoverflow.com/questions/29086764/…

标签： javascript angularjs html date input

【解决方案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>

【讨论】：

对不起，我不清楚。没有minDate。我编辑了我的问题。我们可以为第一个输入选择我们想要的任何日期。这是应该限制的第二个。你的答案是不是让 maxDate 成为一个不会动态变化的常数值？
在您更新问题之前，我实际上已经意识到您的意思。请查看我的更新答案:)
哦，这太聪明了。我没有这样想。非常感谢！