在Angular 6中,可以使用Angular的内置日期管道(date pipe)来格式化日期。下面是一个示例,演示如何在响应式表单中使用日期选择器并格式化日期。
首先,我们需要在组件的模板中创建一个响应式表单,并添加一个日期选择器控件。假设我们有一个名为myForm
的响应式表单和一个名为date
的日期选择器控件。
接下来,在组件的类中,我们需要创建一个myForm
表单并初始化日期选择器控件。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
date: [''] // 初始化日期选择器控件,可以设置默认日期
});
}
}
现在,我们可以在模板中使用内置的日期管道来格式化日期。在这个例子中,我们使用yyyy-MM-dd
格式来格式化日期。
这样,当用户选择日期时,它将自动格式化为yyyy-MM-dd
格式并显示在页面上。
希望这个示例可以帮助你解决问题!