简体   繁体   English

Angular 2 Ionic 2 - 如何将日期输入的最大或最小日期设置为今天?

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

 <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? 如何动态设置今天的最大日期而不是2018-03-07?

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. 但没有运气。

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. 当您使用new Date()这将为您提供时区和时间等的完整日期,您必须仅指定日期,因此您必须将其与仅日期分开。 for more clerification run this 为了更多的工作,运行这个

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

将mm更改为MM然后格式但这将影响您更改的日期,这将无助于除非其ngModel绑定到另一个变量

the submit button will be disabled if input date is greater than current date 如果输入日期大于当前日期,则将禁用提交按钮

register.component.html 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 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")
}
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将输入类型“datetime-local”设置为 min [today] at 08.00 to max [today] at 17.00? 或仅设置最大日期 [今天]? - How to set input type 'datetime-local' with min [today] at 08.00 to max [today] at 17.00 ? or set the max date [today] only? 离子输入日期默认设置为今天 - ionic input date set default to today 如何在 iOS 上的输入类型日期中设置最大值和最小值 - how to set max & min in Input type date on iOS 如何在输入类型日期中将“最大日期”设置为从今天起的第7天? - How can I set Max date to 7th day from today in input type date? 如何设置最小和最大日期? - How to able to set min and max date? 如何动态设置Angular Material md-datepicker指令的md-min-date / md-max-date? - How to dynamically set md-min-date/md-max-date of Angular Material md-datepicker directive? 如何从JS更改输入类型日期的最大值或最小值 - How to change max or min value of input type date from JS angularJS如何动态绑定输入类型的日期最大值/最小值 - angularJS how to dynamically bind input type date max/min value 如何为日期选择器设置最小和最大日期? - How do I set a Min and Max date for my datepicker? 如何设置谷歌时间线图表的最小和最大日期 [2020] - How to set Min and Max date for Google timline Charts [2020]
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM