在Angular 7中,你可以使用ngModel指令结合日期管道来格式化日期。以下是一个示例:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
在上面的示例中,我们使用了ngModel指令将输入框和组件中的myDate属性进行双向绑定。同时,我们使用了ngModelOptions属性来设置时区为UTC。当输入框的值发生变化时,ngModelChange事件将会触发formatDate方法来格式化日期。
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myDate: Date;
constructor(private datePipe: DatePipe) {}
formatDate(date: Date) {
this.myDate = this.datePipe.transform(date, 'yyyy-MM-dd');
}
}
在上面的示例中,我们使用了Angular的DatePipe来格式化日期。在构造函数中注入了DatePipe,并定义了formatDate方法来接收一个日期对象并将其格式化为'yyyy-MM-dd'格式的字符串,然后将其赋值给myDate属性。
注意:在使用DatePipe之前,需要在你的组件中导入DatePipe:
import { DatePipe } from '@angular/common';
这样,当用户在输入框中输入日期时,它将会自动格式化为'yyyy-MM-dd'格式的字符串,并赋值给myDate属性。