How to apply mask behavior in primeng calendar (p-calendar)?

Question

I am new to angular, in p-calendar I'm not able to apply masking behaviour. Example: If user enters 01012012, I want to change it to 01-01-2012. Thanks in advance.

Answer 1

Here is a great example how you can mask a primeng calendar. The example require a little bit of coding and if you have more than one angular project a library could be useful. You create a directive for the p-calendar control from primeng. It's based on the library inputmask.

Answer 2

Try this:

 onKeyDate(event: any){
   event.target.value = event.target.value.replace(/^(\d{2})(\d{2})(\d{4})/, '$1-$2-$3');
  }

in HTML:

<input type="text" name="data" placeholder="Date:"(keyup)="onKeyDate($event)">

Answer 3

You can use this ngx-mask. Here you are the documentation: ngx-mask

After installation, you can use it in your input like this:

<input mask="00-00-0000">