<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a month" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker (monthSelected)="monthSelected($event)" startView="multi-year"></mat-datepicker>
</mat-form-field>
import { Component, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NativeDateAdapter, DateAdapter, MatDatepicker } from '@angular/material';
import * as _moment from 'moment';
import { default as _rollupMoment } from 'moment';
const moment = _rollupMoment || _moment;
class CustomDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
var formatString = 'MMMM YYYY';
return moment(date).format(formatString);
}
}
@Component({
selector: 'app-month-picker-example',
templateUrl: './month-picker-example.component.html',
styleUrls: ['./month-picker-example.component.css'],
providers: [
{
provide: DateAdapter, useClass: CustomDateAdapter
}
]
})
export class MonthPickerExampleComponent{
@ViewChild(MatDatepicker) picker;
date = new FormControl();
constructor() { }
monthSelected(params) {
this.date.setValue(params);
this.picker.close();
}
}
/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
