Kevin Powell - Community•13mo ago

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 package's 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 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.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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