防止用户输入未来日期角度 4答案

【问题标题】：Prevent user from entering future date angular 4防止用户输入未来日期角度 4
【发布时间】：2019-02-21 09:32:58
【问题描述】：

我有一个 dateOfBirth 对象，我用时刻 js 创建了一个今天日期的对象但是当我比较它们时，即使输入的日期小于今天的日期，它也会给我一个错误

这是我的 html 文件

<div class="form-group datepicker">
      <label for="dob">Date of Birth*</label>
      <div class="row input-group">
        <input
          ngbDatepicker
          #d="ngbDatepicker"
          #dobF="ngModel"
          class="form-control input-underline input-lg"
          id="dob"
          [(ngModel)]="dateOfBirth"
          placeholder="yyyy-mm-dd"
          name="dp"
          [ngClass]="{
            invalid:
              (dobF.value === null || isString(dobF.value) || (dateOfBirth.year > dobYear || dateOfBirth.month > dobMonth || dateOfBirth.day > dobDay) ) && dobF.touched
          }"
          required
        />
        <div class="input-group-append">
          <button
            class="btn btn-outline-secondary calendar"
            (click)="d.toggle()"
            type="button"
          ></button>
        </div>
      </div>
      <div
        *ngIf="
          (dobF.value === null || isString(dobF.value)  || dateOfBirth.year > dobYear || dateOfBirth.month > dobMonth || dateOfBirth.day > dobDay ) && dobF.touched
        "
        class="error"
      >
        Please enter a valid date of birth.
      </div>
    </div>

这是我的 ts 文件，我在其中定义了我的 dob 代码

 public dateOfBirth: { year: number; month: number; day: number };
 public currentDate = moment().format("YYYY-MM-DD");
 public dobYear: any;
 public dobMonth: any;
 public dobDay: any;

  let obj = this.currentDate.split("-");
let obj2 = obj.map(Number);
this.dobYear = obj2[0];
this.dobMonth = obj2[1];
this.dobDay = obj2[2];

它给了我一个错误，因为今天的月份是 02，所以当我输入 2012-09-09 它给我一个错误，因为 02

【问题讨论】：

标签： javascript angular typescript date

【解决方案1】：

当然，这里的解决方案是简单地使用Date 对象。您可以在不解析它们的情况下直接比较它们，并使用带有自定义验证器的反应式表单，这还允许您在输入正确的日期之前使表单无效。

但是，如果要保持当前的逻辑，则需要检查年份是否错误，然后检查年份是否正确但月份错误，然后如果年月正确但日期错误。它最终看起来很难辨认：

(dobF.value === null || isString(dobF.value)  || dateOfBirth.year > dobYear || (dateOfBirth.year == dobYear && dateOfBirth.month > dobMonth) || (dateOfBirth.year == dobYear && dateOfBirth.month == dobMonth && dateOfBirth.day > dobDay) ) && dobF.touched

【讨论】：

我其实更喜欢 Stefan 的回答，你可以使用内置的 HTML 验证和max。
工作就像一个魅力谢谢上帝保佑你:) @Will Alexander
我必须说 Stefan 的回答是优越的。如果您使用 new Date() 而不是 moment.js 对象，它将起作用。
它不工作它正在接受未来的日期并且没有给出任何错误

【解决方案2】：

使用[max] 防止用户输入未来的日期。无需自行构建此验证器。

见：https://material.angular.io/components/datepicker/api

HTML：

<input
  ngbDatepicker **[max]="maxDate"** ...

控制器：

public maxDate = new Date()

【讨论】：

它不起作用。我做了很多次。当我写下未来的日期时，它什么都不做并接受它。
我正在使用它，我可以向你保证，它可以工作。也许您提供的是时刻数据对象而不是实际日期对象。
我已经完成了与 stefan 完全一样的工作，但没有工作是否有任何额外的实现？ @Stefan
您的验证是否有效（例如，需要）？

【解决方案3】：

我的建议如下。

由于您使用的是日期选择器，请禁用输入字段（将其标记为只读）

设置 [maxDate]="maxDate" （今天是当前日期，可以通过以下代码获取）

 import * as moment from "moment";

 **Declare:-** 

 maxDate: {};
  today = new Date();

constructor(){
    this.maxDate = {
      year: parseInt(moment(this.today).format('YYYY')),
      month: parseInt(moment(this.today).format('MM')),
      day: parseInt(moment(this.today).format('DD')),
    }
}

【讨论】：