DEV Community

ashok2maruthamuthu
ashok2maruthamuthu

Posted on

MUI 5 and react 18. How to mask the entered date with (*) asterisk symbol in mui datepicker

In my application, there is an option for capturing date of birth of user. Once user entered date or selected from calendar, I want to show number as asterisk.

Package version:

"@mui/material": "^5.6.2",
"@mui/lab": "^5.0.0-alpha.71",
"date-fns": "^2.24.0",
"react": "^18.0.0",

Example:

If user enter DOB 05/11/1990(mm/dd/yyyy), then need to show like * * / * */ 1990.

Actual
Actual result in screen

Expected:
Expected result in screen

Code:
Datepicker Code

Top comments (0)