How to add mask on angular material date picker

Question

I recently started using angular material to build angular form in which i need to use angular material date picker but am not able to add any mask on the input element.

Answer 1

Check out the documentation below for sample use of datepicker. https://www.npmjs.com/package/angular4-datepicker

1. Add a variable in the component

   myDatePickerOptions: IMyDpOptions = {
       // other options...
   dateFormat: 'dd.mm.yyyy'
   };
   

2. assign it to the input element.

   [options]="myDatePickerOptions"

Answer 2

Create directive

import { Directive, ElementRef, OnDestroy } from '@angular/core';
import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask.js';

@Directive({
  selector: '[appMaskDate]'
})
export class MaskDateDirective implements OnDestroy {

  mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
  maskedInputController;

  constructor(private element: ElementRef) {
    this.maskedInputController = textMask.maskInput({
      inputElement: this.element.nativeElement,
      mask: this.mask
    });
  }

  ngOnDestroy() {
    this.maskedInputController.destroy();
  }

}

use mask selector for the datepicker input

  <input matInput [matDatepicker]="dateOfBirth" #dateOfBirth appMaskDate>

Add subscription to the material datepicker own input

  eventSubscription: Subscription;
  @ViewChild('dateOfBirth') dateOfBirth: ElementRef;
  @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput<any>; 

and on ngAfterViewInit

   this.eventSubscription = fromEvent(this.dateOfBirth.nativeElement, 'input').subscribe(_ => {
      this.datepickerInput._onInput(this.dateOfBirth.nativeElement.value);
    });