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>

<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

primereact

primereact package's

InputMask

InputMask

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>

<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

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.

No replies yetBe the first to reply to this messageJoin

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

Similar Threads

Similar Threads

Similar Threads