I'm having the following problem: I want to show two differents datepickers in the same component, but allowing to pick only year in one, and year and month in the other. I've tryed using multiple providers as following:
export const MY_FORMATS_MONTH = {
parse: {
dateInput: 'MM/YYYY',
},
display: {
dateInput: 'MM/YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
export const MY_FORMATS_YEAR = {
parse: {
dateInput: 'YYYY',
},
display: {
dateInput: 'YYYY',
monthYearLabel: 'YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'YYYY',
},
};
@Component({
selector: /.../
templateUrl: /.../
styleUrls: /.../
providers: [
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
},
{provide: MAT_DATE_FORMATS, useValue: {MY_FORMATS_MONTH, MY_FORMATS_YEAR}, multi: true},
],
})
And them doing this to allow the user only select the things I mentioned before:
export class #MyClass implements OnInit {
date = new FormControl(moment());
year = new FormControl(moment());
chosenYearHandler(normalizedYear: Moment) {
const ctrlValue = this.date.value;
ctrlValue.year(normalizedYear.year());
this.date.setValue(ctrlValue);
}
chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
const ctrlValue = this.date.value;
ctrlValue.month(normalizedMonth.month());
this.date.setValue(ctrlValue);
datepicker.close();
}
chosenOnlyYearHandler(normalizedYear: Moment, datepicker: MatDatepicker<Moment>) {
const ctrlValue = this.year.value;
ctrlValue.year(normalizedYear.year());
this.year.setValue(ctrlValue);
datepicker.close();
}
And finally my html is this:
<!-- Year -->
<div>
<mat-form-field class="form-field col-sm-4">
<mat-label>Year</mat-label>
<input matInput [matDatepicker]="dpy" [formControl]="year">
<mat-datepicker-toggle matSuffix [for]="dpy"></mat-datepicker-toggle>
<mat-datepicker #dpy
startView="multi-year"
(yearSelected)="chosenOnlyYearHandler($event, dpy)"
panelClass="example-year-picker">
</mat-datepicker>
</mat-form-field>
</div>
<!-- Month & Year -->
<div>
<mat-form-field class="form-field col-sm-4">
<mat-label>Month and Year</mat-label>
<input matInput [matDatepicker]="dp" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp
startView="multi-year"
(yearSelected)="chosenYearHandler($event)"
(monthSelected)="chosenMonthHandler($event, dp)"
panelClass="example-month-picker">
</mat-datepicker>
</mat-form-field>
</div>
If you have any advice about how to correctly implement multiple providers or how to indicate each input the dateFormat that corresponds, or just a better way of doing this I'll apreciate it if you help me.
