在HTML模板中添加一个input元素,通过[(ngModel)]指令将选择的日期值绑定到一个日期对象属性。
在组件类中声明选定日期对象的属性,并使用指令@ViewChild来获取MatDatePicker对象。然后,可以在日期选择器的日期更改事件中更新另一个属性,以便在进行提交前在所需的格式中提供字符串表示形式。
import { Component, ViewChild } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';
@Component({
selector: 'datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.css']
})
export class DatepickerComponent {
@ViewChild(MatDatepicker) picker: MatDatepicker;
selectedDate: Date;
formattedDate: string;
onDateChange(event): void {
this.formattedDate = this.selectedDate.toISOString().slice(0, 10);
}
}
最后,使用相应的格式将选择的日期值提交到服务器。
onSubmit(): void {
const data = { date: this.formattedDate };
this.http.post('/api/date', data).subscribe(response => console.log(response));
}