I have an angular application, which is styled with Angular Material. In short, I have a form, which consists of multiple mat-form-field components, among which there is a datepicker one. The idea is the following: when a user selects a year and then a month, the dialog will be closed (I don’t care about the day, and want to exclude it instead), and this specific field in the form will be patched with the selected date.

Here is a part of my form:

<mat-form-field appearance="fill" class="half-width">
            <mat-label>Дата на прозводство</mat-label>
            <input 
              matInput 
              #dateInput
              [matDatepicker]="picker" 
              [min]="startDate" 
              [max]="endDate" 
              formControlName="manufactureDate"
              (click)="openDatePicker()"
              >
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker startView="multi-year"  (monthSelected)="closeDatePicker($event)"></mat-datepicker>
            <mat-hint>MM/YYYY</mat-hint>
</mat-form-field>

and here is my component.ts

@Component({
    selector: 'app-new-offer',
    templateUrl: './new-offer.component.html',
    styleUrls: ['./new-offer.component.css'],
    **providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }]**
})
export class NewOfferComponent {
    @ViewChild(MatDatepicker) datePicker?: MatDatepicker<Moment>;
    readonly subscriptions: Subscription = new Subscription();
    readonly vehicleTypeList: string[] = vehicleTypes;
    readonly vehicleMakeList: string[] = vehicleMakeList;
    readonly gasTypeList: string[] = gasTypeList;
    readonly startDate: Date = getMinDate();
    readonly endDate: Date = getMaxDate();
    form: FormGroup = new FormGroup({
        type: new FormControl('', Validators.required),
        make: new FormControl({ value: '', disabled: false }, Validators.required), //TODO: set disabled to true
        model: new FormControl({ value: '', disabled: false }, Validators.required), //TODO: set disabled to true
        mileage: new FormControl(0, [Validators.required, Validators.min(minValue), Validators.max(maxValue)]),
        gasType: new FormControl('', Validators.required),
        manufactureDate: new FormControl('', Validators.required),
        price: new FormControl(0, [Validators.required, Validators.min(minValue), Validators.max(maxValue)]),
        currency: new FormControl('BGN', Validators.required),
        description: new FormControl(''),
        additionalInfo: new FormControl('')
    });

    openDatePicker(): void {
        this.datePicker?.open();
    }

    closeDatePicker(selectedDate: Moment): void {
        this.form.patchValue({ manufactureDate: selectedDate });
        this.datePicker?.close();
    }
}

as well as the CUSTOM_DATE_FORMATS object which was supposed to set the format to MM/YYYY

export const CUSTOM_DATE_FORMATS = {
    parse: {
        dateInput: 'MM/YYYY',
    }, 
    display: {
      dateInput: 'MM/YYYY',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
};

I tried providing MAT_DATE_FORMATS with value that is supposed to display the selected date in the input as MM/YYYY by explicitly omitting the day. DO you have any idea on this?