要解决Angular Material的输入类型datetime-local不显示今天的日期的问题,您可以使用以下代码示例:
首先,确保您已正确导入所需的模块和依赖项。在您的组件文件中,添加以下导入语句:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
接下来,在您的组件类中,创建一个FormControl实例来管理日期时间输入的值:
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
dateControl = new FormControl();
}
在您的模板文件中,使用Angular Material的MatDateTimepicker组件来显示日期时间输入框。确保将[min]属性设置为当前日期的字符串:
最后,在您的组件类中,使用以下代码来设置FormControl的初始值为当前日期:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
dateControl = new FormControl();
ngOnInit() {
const today = new Date();
this.dateControl.setValue(today.toISOString().substring(0, 16));
}
}
通过以上步骤,您应该能够在Angular Material的datetime-local输入框中显示今天的日期。