CODEWITHSUNDEEP
angulartypescriptdatepickerangular-material
kusky
kusky

Reputation: 63

Angular Material Datepicker - nextClicked, previousClicked not emitting

I am trying to use material datepicker to allow users to make a booking. I would like to call an internal method when the user clicks next or previous month in the datepicker. I can see the methods nextClicked and previousClicked but these do not seem to be emitted so i cant perform my own actions.

<input class="date-selected" [matDatepickerFilter]="checkInFilter" [matDatepicker]="checkInDatepicker" [min]="minDate" (focus)="checkInDatepicker.open()" [(ngModel)]="checkInDate">
<mat-datepicker #checkInDatepicker (nextClicked)="nextMonth($event)"
    (previousClicked)="previousMonth($event)">
</mat-datepicker>

nextMonth(event) {
    console.log(event);
}

previousMonth(event) {
    console.log(event);
}

Is there anyway to call my own method when a user clicks on next/previous in the datepicker?

Upvotes: 2

Views: 2546

Answers (3)

kusky
kusky

Reputation: 63

I got around this by Implementing a customHeader and a Shared service.

In the custom header i am calling a method in the shared service that sets a variable and have an observable on this.

then in the main component i subscribe to the observable in the constructor and call my custom method.

Custom Header method

previousClicked(mode: 'month' | 'year') {
    this._calendar.activeDate = mode === 'month' ?
      this._dateAdapter.addCalendarMonths(this._calendar.activeDate, -1) :
      this._dateAdapter.addCalendarYears(this._calendar.activeDate, -1);

    this.calendarService.previousMonthClick(this._dateAdapter.getMonth(this._calendar.activeDate));
}

shared service

private _previousMonthClick = new Subject();
  previousMonthClick$ = this._previousMonthClick.asObservable();

....

  previousMonthClick(month) {
    this._previousMonthClick.next(month);
  }

main component

constructor(private calendarService: CalendarService) {
    calendarService.previousMonthClick$.subscribe(e => this.previousMonth(e));
  }

...
 previousMonth(event) {
    console.log(event);
  }

Upvotes: 2

user2818985
user2818985

Reputation: 390

The header section of the calendar (the part containing the view switcher and previous and next buttons) can be replaced with a custom component if desired. This is accomplished using the calendarHeaderComponent property of . It takes a component class and constructs an instance of the component to use as the header.

In order to interact with the calendar in your custom header component, you can inject the parent MatCalendar in the constructor. To make sure your header stays in sync with the calendar, subscribe to the stateChanges observable of the calendar and mark your header component for change detection.

Upvotes: 0

mortom123
mortom123

Reputation: 556

First of all: neither nextClicked nor previousClicked are event-emitters, therefore don't produce any output. Check this for further information: https://material.angular.io/components/datepicker/api (both are functions)

You could use the monthSelected emitter and try to get it to work with that (track changes and call next / previous accordingly), although this one only works when selecting a month (i.e. select year -> select month [emitter fires] -> select date)

Upvotes: 0

Related Questions