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):

<Form.Control
  type="date"
  placeholder="mm/dd/yyyy"
  value={dob}
  onChange={(e) => setDob(e.target.value)}
></Form.Control>

<Form.Control
  type="date"
  placeholder="mm/dd/yyyy"
  value={dob}
  onChange={(e) => setDob(e.target.value)}
></Form.Control>

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

primereact

package's

InputMask

InputMask

(https://primereact.org/inputmask/) which looked like this (output pic 3):

<InputMask
  value={dob}
  // onChange={handleDateChange}
  onChange={(e) => setDob(e.target.value)}
  mask="99/99/9999"
  maskChar={"*"}
  slotChar="mm/dd/yyyy"
>
  {(inputProps) => (
    <Form.Control type="date" {...inputProps} />
  )}
</InputMask>

<InputMask
  value={dob}
  // onChange={handleDateChange}
  onChange={(e) => setDob(e.target.value)}
  mask="99/99/9999"
  maskChar={"*"}
  slotChar="mm/dd/yyyy"
>
  {(inputProps) => (
    <Form.Control type="date" {...inputProps} />
  )}
</InputMask>

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

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'?

Screenshot_2023-11-20_at_12.38.38_PM.png

Screenshot_2023-11-20_at_12.49.01_PM.png

Screenshot_2023-11-20_at_12.57.07_PM.png

PrimeReact | React UI Component Library

The ultimate collection of design-agnostic, flexible and accessible React UI Components.

Date Input field for birthday, 'masking' the user input, incorporating 'show' button

<Form.Control
  type="date"
  placeholder="mm/dd/yyyy"
  value={dob}
  onChange={(e) => setDob(e.target.value)}
></Form.Control>

<Form.Control
  type="date"
  placeholder="mm/dd/yyyy"
  value={dob}
  onChange={(e) => setDob(e.target.value)}
></Form.Control>

primereact

primereact

package's

InputMask

InputMask

(https://primereact.org/inputmask/) which looked like this (output pic 3):

<InputMask
  value={dob}
  // onChange={handleDateChange}
  onChange={(e) => setDob(e.target.value)}
  mask="99/99/9999"
  maskChar={"*"}
  slotChar="mm/dd/yyyy"
>
  {(inputProps) => (
    <Form.Control type="date" {...inputProps} />
  )}
</InputMask>

<InputMask
  value={dob}
  // onChange={handleDateChange}
  onChange={(e) => setDob(e.target.value)}
  mask="99/99/9999"
  maskChar={"*"}
  slotChar="mm/dd/yyyy"
>
  {(inputProps) => (
    <Form.Control type="date" {...inputProps} />
  )}
</InputMask>

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

InputMask

PrimeReact | React UI Component Library

The ultimate collection of design-agnostic, flexible and accessible React UI Components.

Date Input field for birthday, 'masking' the user input, incorporating 'show' button

Date Input field for birthday, 'masking' the user input, incorporating 'show' button

Similar Threads

Similar Threads

Similar Threads