Angular 2 Ionic 2 - 如何将最大或最小日期设置为今天以进行日期输入？

Posted 2023-03-13

【中文标题】Angular 2 Ionic 2 - 如何将最大或最小日期设置为今天以进行日期输入？

【英文标题】：Angular 2 Ionic 2 - How to set max or min date to today for date input?

【发布时间】：2017-09-08 01:40:53

【问题描述】：

 <input class="alert-input date-input" #dob="ngModel" name="dob" max="2018-03-07" [(ngModel)]="leadDetail.dob" type="date"></div>

如何动态设置今天的最大日期而不是 2018-03-07？

我尝试了以下方法-

 <input  max="today" type="date"></div>
 <input  max="today | date:'yyyy-mm-dd'" type="date"></div>

类-

public today = new Date();

但没有运气。

【参考方案1】：

试试这个：

<input class="alert-input date-input" name="dob" [max]="today" type="date">


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

Working Example Demo

原因：

因为当您使用new Date() 时，这将为您提供包含时区和时间等的完整日期，您必须仅分配日期，因此您必须仅将其与日期分开。 如需更多说明，请运行：

console.log(new Date(), '----', new Date().toJSON());

【讨论】：

太棒了！ :) 谢谢。

真的很有帮助:)

【参考方案2】：

将 mm 更改为 MM 然后格式，但这将影响您更改的日期，除非它的 ngModel 绑定到另一个变量，否则这将无济于事

【参考方案3】：

如果输入日期大于当前日期，提交按钮将被禁用

register.component.html

<div class="container">
<form #loginForm="ngForm" (ngSubmit)="submitLoginForm(loginForm)" style="background-  color:beige;">
<input [(ngModel)]="vdate"  name="dob"  type="date">

<button type="submit" [disabled]="!loginForm.valid || (today < vdate)" class="btn">Login</button>

</form>

</div>

register.component.ts

import  Component, OnInit  from '@angular/core';

@Component(
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
)
export class RegisterComponent implements OnInit 
vdate: Date
today = new Date().toJSON().split('T')[0];
constructor() 



ngOnInit() 


submitLoginForm() 
console.log("Welcome to Jollywood")