Mask date field in angular input

Question

I'm trying to mask the DOB input field so that on the screen user can only see **/**/****. the input field is already using bsDatePicker.

I tried to add ngx-mask to mask it like this.

<input type="text" class="form-control" 
        [formControlName]="dob" [id]="dob" #dateInput
        [patterns]="datePattern" [hiddenInput]="true" mask="00/00/0000" 
        [name]="dob" 
        
        placeholder="MM/DD/YYYY"
        bsDatepicker [bsConfig]="bsDateConfig"   />

The textbox is not getting rendered.

Answer 1

If you are already using ngx-mask, it might be worth taking a look at the docs under secureInput. The key is here using X to hide the input as asterisk.

https://github.com/JsDaddy/ngx-mask#secure-input

<input [hiddenInput]="true" mask="XX/XX/XXXX" />