Access MatCalendar reference from directive

Question

I have a directive I use for some custom behavior on mat-datepicker.

From within this directive I would like to get access to the associated mat-calendar/MatCalendar component that is opened.

I've tried injecting MatCalendar or using ViewChild to access as in the following code. The result is always null or undefined.

export class DatepickerHelperDirective implements OnInit {
  @ViewChild('mat-calendar', {static: false}) calendar
  @ViewChildren('matCalendar') calendarvc: QueryList<any>
  @Input() pickerEvtDebounceTime: number;
  @Output() keypressDateChange: EventEmitter<moment.Moment> = new EventEmitter();

  private emitSubject = new Subject<moment.Moment>();

  constructor(
    @Optional() private test: MatDatepicker<any>, 
    @Optional() private cal: MatCalendar<any>,
    @Optional() private baseControl: NgControl) {}




<mat-form-field class="date-field mat-input-row col-lg col-md col-sm-12">
  <input
   formControlName="shipDate"
   acsFocus]="jumpFocus === 'shipDate'"
   matDatepicker]="picker"
   matInput
   placeholder="Ship Date"
   acsDatePickerEvtHandler>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker acsDatePickerEvtHandler #picker></mat-datepicker>
</mat-form-field>

Access MatCalendar reference from directive

0 Answers0