NG-Zorro Datepicker Manual Input Mask not working

Question

I need to mask the datepicker as MM/dd/yyyy and my users do not want to manually type out the /character. They want to be able to enter in just the numbers and the masking works on its own.

I have tried ngx-mask and while this works great for inputs, it doesn't work for the datepicker.

Here is my stackblitz which I have set the mask but it isn't working as expected

  <nz-date-picker
    mask="'d0/00/0000'"
    [nzFormat]="'dd/MM/yyyy'"
  ></nz-date-picker>

Answer 1

It seems folks at ng-zorro have already received similar requests, and they have made their stance clear that they won't support masking natively and since Datepicker is a component that creates an input internally the mask can't be added like a regular input.

So, the approach in codesandbox linked in the question is correct. We would need to create and enable the mask on a custom input field.

The primary issue I noticed was that by default ngx-mask doesn't capture the special characters of the mask such as the / in this example. So a date of 09/09/2023 would be captured as 09092023 which isn't accepted as a valid date by the ng-zorro date picker.

You could fix this with the dropSpecialCharacters option for ngx-mask. However, during my attempts, there were issues with the date and mask getting messed up for some inputs, and looking at their github, there are multiple times that people have encountered similar issues.

Therefore, I used the Maskito library which although relatively new has seen good results, and works well with this use case. Although you could use another library or create a custom directive.

Here is a working CodeSandbox with the Maskito library to provide masking and using MM/dd/yyyy format for the date inputs.