Angular 2 Ionic 2 - How to set max or min date to today for date input?

99封情书 提交于 2020-01-13 09:25:34

问题


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

How can I set the max date for today instead of 2018-03-07 dynamically?

I tried following methods-

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

Class -

public today = new Date();

but no luck.


回答1:


Try this:

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


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

Working Example Demo

Reason:

Becasue when you are using new Date() this will give you full date with time zone and time etc, you have to assign only Date so you have to split this with only Date. for more clerification run this

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



回答2:


change mm to MM then the format but this will effect to the date you changed this wont help until unless its ngModel is bind to another variable




回答3:


the submit button will be disabled if input date is greater than current date

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")
}
}


来源:https://stackoverflow.com/questions/43366754/angular-2-ionic-2-how-to-set-max-or-min-date-to-today-for-date-input

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!