How to retrieve month and year value when user click on month navigation in mat-calendar?

Question

I am using in my Angular Project. I wanted to catch the event and get the month and year value when user click on navigation button at top for changing month.

After a lot of search I managed to get following piece of code to grab the click event. I am not able to get the month and year value. How to get it?

HTML

<mat-calendar [minDate]="minDate" [maxDate]="maxDate" [dateClass]="dateClass()" [dateFilter]="futureEventFilter"
            #calendar (monthSelected)="monthSelected($event)" (selectedChange)="getDateChangedValue($event)" [(selected)]="selectedDate">
        </mat-calendar>

TS Code

ngAfterViewInit() {
        let buttons = document.querySelectorAll('mat-calendar .mat-calendar-previous-button,' +
            'mat-calendar .mat-calendar-next-button');
    
        if (buttons) {
            Array.from(buttons).forEach(button => {
                this.renderer.listen(button, "click", () => {
                    //this.monthSelected($event);
                    console.log(button)
                });
            })
        }
    }

public monthSelected(date) {
        alert(date);
    }

How to call monthSelected and retrieve month and year value? Please help here.

https://stackoverflow.com/questions/57510066/how-can-i-catch-the-material-datepicker-month-pagination-event/60297741#60297741 — Eliseo, Oct 15 '20 at 21:08

Elmehdi · Answer 1 · 2020-10-16T09:52:12.553

2

Edit:

You can do something like this:

<mat-calendar [selected]="selectedDate" (selectedChange)="logMonth($event)"></mat-calendar>

And a handler for your selectedChange in your ts file:

  selectedDate: any
  logMonth($event: any) {
    this.selectedDate = $event
    console.log($event)
  }

You will have the date printed in the console, and the calendar updated with the selected date

Original:

Use mat-datepicker instead: link

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker (monthSelected)="logMonth($event)" #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

You don't need the whole ngAfterViewInit() {...} block of code.
All you need (monthSelected)="logMonth($event)" in your date picker, and logMonth($event) in your ts file to handle the event:

  logMonth($event: any) {
    console.log($event);
  }

edited Oct 16 '20 at 09:52

answered Oct 15 '20 at 19:55

Elmehdi

1,390
2
11
25

the `(monthselect)` only handle the event when you "click" the month, not when you're moving thougth the calendar – Eliseo Oct 15 '20 at 20:41
@Eliseo so you want something a hover event ? – Elmehdi Oct 15 '20 at 20:57
No, I think, the question is about when change the month displayed, e.g. to call an api to change the class in some days. I put one link to SO to solve the problem in the question of simpleuser – Eliseo Oct 15 '20 at 21:11
My requirement is to show calendar to user instead of asking them to click on button to open datepicker. Hope it is clear. That is why I have used mat-calendar but now I am not able to select the month in calendar view. Please help me here. – simple user Oct 16 '20 at 08:04
so you want the callendar to be always visible! – Elmehdi Oct 16 '20 at 09:32
@simpleuser I edited my answer maybe it is gobba be useful for you now. I edited the live demo too. – Elmehdi Oct 16 '20 at 09:47
I used (selectedChange) as you have mentioned but it didnt get trigger when month navigation is clicked. It gets only triggered when I select date in the calendar. – simple user Oct 20 '20 at 10:29

How to retrieve month and year value when user click on month navigation in mat-calendar?

1 Answers1