Angular Material Date Picker Range but only choosing year and month

Question

I'm having troubles to find a way to use mat-date-range-picker with only year and month... Did you guys have already find a way to do it ? :)

I've tried to use the same function used in the documentation for the date picker, but i cannot found a way to restart the pop up for the second date....

<mat-datepicker #dp
                  startView="multi-year"
                  (yearSelected)="chosenYearHandler($event)"
                  (monthSelected)="chosenMonthHandler($event, dp)"
                  panelClass="example-month-picker">
</mat-datepicker>

thanks by advance all \o/

don't work the last example in docs:https://material.angular.io/components/datepicker/examples ? — Eliseo, Mar 21 '21 at 12:19

score 1 · Accepted Answer · answered Mar 21 '21 at 07:46

1

Here's an example of a month range-picker popup. Just use this to create a popup. DEMO

answered Mar 21 '21 at 07:46

Naman Jain

351
6
27

This is exactly what I want :). But there is no example in angular material ? – Courbin .Francis Mar 22 '21 at 08:03
At worst, that will do the trick for what I need to do :) Thank you :) – Courbin .Francis Mar 22 '21 at 10:52
To be honest Angular material has poor documentation. – Naman Jain Mar 22 '21 at 11:37

Alex Villatoro · Answer 2 · 2021-09-14T05:44:32.460

I am developing an application with the Angular technology, I ran into this problem and looked everywhere how to give a solution with Angular Material, but there is not, I managed to solve it with the following (The code can be improved):

In file html:

<mat-form-field appearance="fill">
    <mat-label>date</mat-label>
    <mat-date-range-input [rangePicker]="picker">
        <input matStartDate placeholder="Start date" formControlName="mesIni">
        <input matEndDate placeholder="End date" formControlName="mesFin">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker id="picker" #picker disabled="false" startView="multi-year"
                           (monthSelected)="chosenMonthHandler($event, picker)" (click)="true">
    </mat-date-range-picker>
</mat-form-field>

In file ts:

formBusqueda: FormGroup;
//flag to identify if the start date or end date is entered
mclick = 0;

ngOnInit() {}

get controls() {
    return this.formBusqueda.controls;
}

public chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>):void {
    this.mclick++;

    if (this.mclick == 1) {
        const ctrlValue = this.controls.mesIni.value;
        ctrlValue.month(normalizedMonth.month());
        this.controls.mesIni.setValue(ctrlValue);
        
        datepicker.close();

        //It can improve
        var inter = setInterval(() => {
            let htmlElem: HTMLCollectionOf<HTMLElement> = document.getElementsByClassName('mat-focus-indicator mat-icon-button mat-button-base') as HTMLCollectionOf<HTMLElement>;

            //Here it is important to put the id of the element that is clicked to open the calendar
            htmlElem[1].click();
            clearInterval(inter);
        }, 50);
    } else if (this.mclick == 2) {
        const ctrlValue = this.controls.mesFin.value;
        ctrlValue.month(normalizedMonth.month());
        this.controls.mesFin.setValue(ctrlValue);
        datepicker.close();
        this.mclick = 0;
    }
}

The trick is to close and reopen the calendar with a delay, it is not ideal but it is a way to solve it.

Angular Material Date Picker Range but only choosing year and month

2 Answers2