Angular Material 2 Datepicker closed event not executed (Angular 4)

1
votes

I am using the Angular Material 2 Datepicker with Angular 4.x - when I select a date it should emit a function when the datepicker closes (it closes when a date is selected). I basically want to be able to select a date and not have the datepicker close (it should remain on the screen and highlight the selected day)

This is based on the following code which works fine on stackblitz - but not within my own app for some reason? https://stackblitz.com/edit/angular-ysspzm-ckkrbd

-NOTE- The stackblitz code is some generic code I came across and isn't the same as my code below (although it is almost identical)

// component

@Component({
selector: 'app-datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.scss'],
})

export class DatepickerComponent {
@ViewChild('keepOpen') _input: ElementRef;

  _openCalendar(picker: MatDatepicker<Date>) {
      picker.open();
      console.log('here1'); // i see this in the console
  }

  _openCalendarClosed(picker: MatDatepicker<Date>) {
      picker.open();
      console.log('here2'); // never ever see this in the console log??
  }
}

// html

<input
        matInput
        [matDatepicker]="picker"
        placeholder="Choose a date"
        (click)="_openCalendar(picker)"
        #keepOpen>

<mat-datepicker-toggle
        matSuffix
        [for]="picker">
</mat-datepicker-toggle>

<mat-datepicker
        #picker
        class="fixed-open"
        opened="true"
        (closed)="_openCalendarClosed(picker)">
</mat-datepicker>

1
javascriptangulardatepickerangular-material2
The stackblitz link you provided doesn't contain the code that you have in your question. – p4r1
@p4r1 Sorry I should make that clearer - the code in the stackblitz is not my code but it pretty much the same as I am trying to do the same functionality - i have even used the same code in my app and it still doesnt work :( – Zabs
When you say that it doesn't work in your app, what does that mean? – p4r1
@p4r1 in the HTML component when the datepicker is 'closed' it should call the funtion _openCalendarClosed() function - this function is there to basically keep the datepicker always open as currently it closes once you've selected a date – Zabs
I'm not sure if upgrading will help, as 2.0.0-beta.12 is the last version of Material to officially support angular 4.x. The material 5.x versions all bump to angular 5.x as well. – p4r1

1 Answers

2
votes

Looks like material 5.0.0-rc.1 is the version where the datepicker component recieved the ability to output the closed event. You mentioned that you're using material 2.0.0-beta.12, so an update would be needed in order to support this behavior.