在angularJS输入中将最小日期设置为当前日期
Posted
技术标签:
【中文标题】在angularJS输入中将最小日期设置为当前日期【英文标题】：Set min date to current date in angularJS input 【发布时间】：2015-03-16 20:55:33 【问题描述】：在 AngularJS 中，我们如何将 input type="date" 的 min 属性设置为当前日期（今天）？
<input type="date" ng-model="data.StartDate" name="StartDate" min=?? />
编辑1
我做了下面的建议并在控制器中添加了这个 -
$scope.currentDate = new Date();
这在 html 中 -
<input type="date" ng-model="data.StartDate" name="StartDate" required min="currentDate | date:'yyyy-MM-dd'" />
<span ng-show="form.StartDate.$dirty && form.StartDate.$invalid">
<span ng-show="form.StartDate.$error.required">Start Date is required</span>
<span ng-show="form.StartDate.$error.min">Start Date should not be less than current date</span>
</span>
现在，不允许选择小于 2015 年的年份。此外，如果整个日期小于当前日期，则不会进行验证。所需的验证工作正常。 .min 是正确的字段检查方式吗？
谢谢
【问题讨论】：
function() return new Date();
【参考方案1】：
是的，您可以设置最小值。根据docs：
<input type="date"
ng-model=""
[name=""]
[min=""]
[max=""]
[required=""]
[ng-required=""]
[ng-change=""]>
参数
min （可选） string - 如果值为 输入小于分钟。这必须是有效的 ISO 日期字符串 (yyyy-MM-dd)。
编辑 要将字段设置为当前日期：
控制器：
function Ctrl($scope)
$scope.date = new Date();
查看：
<input type="date" ng-model="data.StartDate"
name="StartDate" min="date | date:'yyyy-MM-dd'" />
工作示例here。
【讨论】：
我想设置为当前日期。 它对我有用，用一个例子更新了我的答案。 是的，它是正确的。只是一个问题，你是如何填写表格的？您使用的是相同的 ISO8601 格式，例如：2015-03-10 吗？ 虽然我绑定的数据是 yyyy-MM-dd 格式，但它显示的是 dd-MM-yyy 格式。 也许这就是问题所在，虽然我只是在 Safari 上测试过（它不支持日期字段）。以 dd-MM-yyy 格式输入日期可以正常工作。在 Chrome 上有一个日期选择器，它将日期显示为 dd-MM-yyyy，但验证也可以正常工作。【参考方案2】：根据 Angular 文档
min (optional) string 设置最小验证错误键，如果值 输入小于分钟。这必须是有效的 ISO 日期字符串 (yyyy-MM-dd)。
您可以将其绑定到范围变量或直接将表达式放入属性中，它只需要采用正确的格式（javascript 日期对象具有 toISOString() 方法）。还应注意，这不会阻止用户选择低于最小值的日期，而是设置验证键以指示该字段无效。
编辑：
脚本
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope)
$scope.name = 'World';
var today=new Date();
$scope.today = today.toISOString();
);
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello name!</p>
<form name="myForm">
<input type="date" ng-model="StartDate" name="StartDate" required min="today" />
<span ng-show="myForm.StartDate.$dirty && myForm.StartDate.$invalid">
<span ng-show="myForm.StartDate.$error.required">Start Date is required</span>
<span ng-show="myForm.StartDate.$error.min">Start Date should not be less than current date</span>
</span>
</form>
</body>
</html>
您的错误消息表明您希望日期不大于当前日期，如果是这种情况，只需更改
<input type="date" ng-model="StartDate" name="StartDate" required min="today" />
到
<input type="date" ng-model="StartDate" name="StartDate" required max="today" />
Working Example
【讨论】：
我也有类似的问题！虽然我在选择最小值和最大值。最大值和最小值不应该仍然可以选择吗？ I mean they are not greyed out, so they should be okay to select, but when selected an error is still thrown, this is kind of strange.是不是严格比较了最小值和最大值，因此选择它们会导致错误，有没有办法避免这种情况？ 我遇到了类似的问题。按照上面提供的步骤，选择回溯日期时会显示错误。但仍然允许在提交时创建记录。还有没有一种方法可以使今天之前的日期无效，即无法选择？【参考方案3】：正确答案已经在上面， 如果有人在这里寻找 Angular 2/4/5 的解决方案是一种方法，
在你的 .ts 文件中
private todate = new Date();
在您的 html 文件中，
<input type="date" min="todate | date:'yyyy-MM-dd'" class="form-control" [(ngModel)]="datemodel" id="input-12">
您还可以在此处归档 Angular 中可用的其他格式选项
date formats
【讨论】：
【参考方案4】：只需添加你的控制器
$scope.today=new Date() // calculates current date
并在您的 html 代码中添加 -
min-date="today"
【讨论】：
【参考方案5】： var today = new Date().toISOString().split('T')[0];
document.getElementsByName("appo_date")[0].setAttribute('min', today); <input type="date" name="appo_date" id="appo_date" ng-model="appoint_data.appo_date"
ng-required="true" close-text="Close" uib-datepicker-popup="dd-MMMM-yyyy" required> 【讨论】：
尽量避免在答案中发表评论，除非您有“具体细节”的答案。请使用下面的评论框，一旦您有足够的声誉，您就可以对任何帖子发表评论。 :) 你能再看看我的答案吗 感谢 :)以上是关于在angularJS输入中将最小日期设置为当前日期的主要内容，如果未能解决你的问题，请参考以下文章
如何在 android 日期选择器中将特定选定日期设置为最小日期？ （爪哇）
如何在 android 日期选择器中将特定选定日期设置为最小日期？ [复制]