【问题标题】:Angular 2 Ionic 2 - How to set max or min date to today for date input?Angular 2 Ionic 2 - 如何将最大或最小日期设置为今天以进行日期输入?
【发布时间】: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();

但没有运气。

【问题讨论】:

    标签: javascript angular typescript ionic2


    【解决方案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")
      }
      }
      

      【讨论】:

        猜你喜欢
        • 2015-11-29
        • 1970-01-01
        • 2011-03-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多