日期验证，以便不选择下一个日期答案

【问题标题】：Date validation so that no next date is selected angular日期验证，以便不选择下一个日期
【发布时间】：2020-12-17 15:15:22
【问题描述】：

我想写一下 Angular 的 datepicker 我想编写日期验证，以便不选择下一个日期例如：今天是日期 17/12/2020 您可以选择日期 17 或 16 或大于 17，但您不能选择日期 18 或小于 17。我想知道如何用角度书写

html 文件：

<div class="form-group col-md-6">
  <label for="date">Date</label>
  <input type="date" formControlName="date" class="form-control" id="date" placeholder="date">
</div>

添加-ticket.component.ts 文件

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { TicketService } from 'src/app/services/ticket/ticket.service';
import Swal from 'sweetalert2/dist/sweetalert2.js';

@Component({
  selector: 'app-add-ticket',
  templateUrl: './add-ticket.component.html',
  styleUrls: ['./add-ticket.component.scss']
})
export class AddTicketComponent implements OnInit {
  public addTicketForm: FormGroup;

  constructor(
    public ticketService: TicketService,
    public fb: FormBuilder
  ) { }

  ngOnInit() {
    this.ticketService.getTicketsList();
    this.buildForm();
  }

  successNotification(){
    Swal.fire({
      text: 'Your ticket has been saved',
      icon: 'success',
    }).then((result) => {
      window.location.href = "./../ticket";
    })
  } 

  sources = [
    { name: 'website' },
    { name: 'Facebook' },
    { name: 'Line' },
    { name: 'Email' },
    { name: 'Telephone' },
    { name: 'Onsite' }
  ]

  types = [
    { name: 'info' },
    { name: 'consult' },
    { name: 'problem' },
    { name: 'add-ons' }
  ]

  prioritys = [
    { name: 'low' },
    { name: 'medium' },
    { name: 'high' }
  ]

  buildForm() {
    this.addTicketForm = this.fb.group({
      date: [''],
      source: [''],
      siteName: ['', [Validators.required]],
      maintenancePackage: ['', [Validators.required]],
      product: ['', [Validators.required]],
      module: [''],
      creater: ['', [Validators.required]],
      type: [''],
      subject: ['', [Validators.required]],
      priority: [''],
      description: [''],
      resolveDescription: [''],
    })
  }

  get date() {
    return this.addTicketForm.get('date');
  }

  get source() {
    return this.addTicketForm.get('source');
  }

  get siteName() {
    return this.addTicketForm.get('siteName');
  }

  get maintenancePackage() {
    return this.addTicketForm.get('maintenancePackage');
  }

  get product() {
    return this.addTicketForm.get('product');
  }

  get module() {
    return this.addTicketForm.get('module');
  }

  get creater() {
    return this.addTicketForm.get('creater');
  }

  get type() {
    return this.addTicketForm.get('type');
  }

  get subject() {
    return this.addTicketForm.get('subject');
  }

  get priority() {
    return this.addTicketForm.get('priority');
  }

  get description() {
    return this.addTicketForm.get('description');
  }

  get resolveDescription() {
    return this.addTicketForm.get('resolveDescription');
  }

  addTicketData() {
    this.ticketService.addTicket(this.addTicketForm.value);
  }
}

【问题讨论】：

标签： angular typescript angular11

【解决方案1】：

尝试在输入日期字段中提供最小值和最大值，（最小值字段不是必需的）

<input type="date" formControlName="date" min="2020-12-12" max="2020-12-17" class="form-control" id="date" placeholder="date">

如果你想限制今天的日期

<input type="date" formControlName="date" min="2020-12-12" [max]="today" class="form-control" id="date" placeholder="date">

在ts中

today = new Date().toJSON().split('T')[0]

如果您不想给出最短日期，可以跳过 min 字段

【讨论】：

如何在ts中声明'today'？
只需将这一行粘贴到 ts 中，今天 = new Date().toJSON().split('T')[0]
现在完成了最大日期，但现在我想写小于 1 个月的最小日期
试试这个：在 ts 中，minDate = new Date(new Date().setMonth(new Date().getMonth() - 1)).toJSON().split('T')[ 0];
在 html 中：

【解决方案2】：

您可以通过简单地设置input 标签的max 属性来实现。

<div class="form-group col-md-6">
  <label for="date">Date</label>
  <input type="date" formControlName="date" class="form-control" id="date" placeholder="date" max="2020-12-17">
</div>

由于您使用的是 Angular，您可以像这样绑定它 [max]='(new Date).toISOString().split("T")[0]'

【讨论】：

如何在ts中声明max