import { Component } from '@angular/core' ; import { FormControl } from '@angular/forms' ; import { MomentDateAdapter } from '@angular/material-moment-adapter' ; import { DateAdapter , MAT_DATE_FORMATS , MAT_DATE_LOCALE } from '@angular/material/core' ; import { MatDatepicker } from '@angular/material/datepicker' ; import * as _moment from 'moment' ; import { default as _rollupMoment , Moment } from 'moment' ; const moment = _rollupMoment || _moment ; export const MY_FORMATS = { parse : { dateInput : 'MM/YYYY' , } , display : { dateInput : 'MM/YYYY' , monthYearLabel : 'MMM YYYY' , dateA11yLabel : 'LL' , monthYearA11yLabel : 'MMMM YYYY' , } , } ; title @ Component ( { selector : 'datepicker-views-selection-example' , templateUrl : 'datepicker-views-selection-example.html' , styleUrls : [ 'datepicker-views-selection-example.css' ] , providers : [ { provide : DateAdapter , useClass : MomentDateAdapter , deps : [ MAT_DATE_LOCALE ] } , { provide : MAT_DATE_FORMATS , useValue : MY_FORMATS } , ] , } ) export class DatepickerViewsSelectionExample { date = new FormControl ( moment ( ) ) ; chosenYearHandler ( normalizedYear ) { const ctrlValue = this . date . value ; ctrlValue . year ( normalizedYear . year ( ) ) ; this . date . setValue ( ctrlValue ) ; } chosenMonthHandler ( normlizedMonth , datepicker ) { const ctrlValue = this . date . value ; ctrlValue . month ( normlizedMonth . month ( ) ) ; this . date . setValue ( ctrlValue ) ; datepicker . close ( ) ; } }