我需要在一个组件视图中的两个mat datepicker字段中选择两种不同的日期格式(YYYY-MM-DD和YYYY-MM) .
我使用角度6.0.3和材料6.4.7 .
我使用MAT_DATE_FORMATS在app模块中将datepicker格式配置为YYYY-MM-DD,它可以全局工作,但我需要在上面写的几个datepicker字段中将这种格式覆盖为YYYY-MM . 不幸的是,我不知道如何实现这一目标 .
请问你能帮帮我吗?
部分代码:
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-invoice-list',
templateUrl: './invoice-list.component.html',
styleUrls: ['./invoice-list.component.css']
})
export class InvoiceListComponent {
filterForm: FormGroup;
@ViewChild('month_picker') month_picker;
constructor() {
this.filterForm = new FormGroup({
assigned_date_from: new FormControl(),
assigned_date_to: new FormControl(),
assigned_month: new FormControl(),
});
}
}
<div class="container" [formGroup]="filterForm">
<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="start">
<div fxFlex="32%">
<mat-form-field>
<input matInput [matDatepicker]="date_from_picker" (focus)="date_from_picker.open()" formControlName="assigned_date_from" placeholder="Date from">
<mat-datepicker-toggle matSuffix [for]="date_from_picker"></mat-datepicker-toggle>
<mat-datepicker #date_from_picker></mat-datepicker>
</mat-form-field>
</div>
<div fxFlex="32%">
<mat-form-field>
<input matInput [matDatepicker]="date_to_picker" (focus)="date_to_picker.open()" formControlName="assigned_date_to" placeholder="Date to">
<mat-datepicker-toggle matSuffix [for]="date_to_picker"></mat-datepicker-toggle>
<mat-datepicker #date_to_picker></mat-datepicker>
</mat-form-field>
</div>
<!-- In below input I want month year format - YYYY-MM - so different than default format in above fields -->
<div fxFlex="32%">
<mat-form-field>
<input matInput [matDatepicker]="month_picker" (focus)="month_picker.open()" formControlName="assigned_month" placeholder="Month">
<mat-datepicker-toggle matSuffix [for]="month_picker"></mat-datepicker-toggle>
<mat-datepicker #month_picker></mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
1 回答
请试试这个 . 在你的Html中
在你的.ts
这很好用 . 但是选择一个月后,所选日期显示为1 . 但我认为这符合您的要求 .