Date Input field for birthday, 'masking' the user input, incorporating 'show' button
I'm trying to create a birthday date input field inside of a React-bootstrap 'Form'.
What I want it to do:
Have "mm/dd/yyyy" as a placeholder
As the user types in the date, every character he types is being masked, meaning that it is being " covered up" with an icon that I've imported, except the last 4 digits of the date (year).
Enable a button to reveal the masked character numbers only as the it is being clicked, so while it is in an :active state.
Starting here (ouput is pic 2):
This regular 'date'-type Form.Control element:
1) Doesn't allow you to hide/mask the characters, let alone do it with an icon, which prevents the possibility linking an 'unmask' btn to it, and
2) it includes a 'calendar' popout that I don't want
I tried using the npm
primereact
package's InputMask
(https://primereact.org/inputmask/) which looked like this (output pic 3):
The mask attribute only provides a template for the input type, and can throw errors if the user provides incorrect data in the field - ex; letters in a 'date' type field. I don't see any way with InputMask
to actually hide the user's provided input.
Does anyone have a good resource I can follow to accomplish this, or know of some other npm module that would give me this capability?
Also, for searching purposes, should I be referring to this 'covering up' ability as something other than 'masking'?PrimeReact | React UI Component Library
The ultimate collection of design-agnostic, flexible and accessible React UI Components.
![No description](https://cdn.answeroverflow.com/1176237123939074159/Screenshot_2023-11-20_at_12.38.38_PM.png)
![No description](https://cdn.answeroverflow.com/1176237124350136451/Screenshot_2023-11-20_at_12.49.01_PM.png)
![No description](https://cdn.answeroverflow.com/1176237124689854525/Screenshot_2023-11-20_at_12.57.07_PM.png)
0 Replies