0

I tried react-input-date-mask to use the input mask for a date in my code like this:

import React from 'react'
import ReactInputDateMask from 'react-input-date-mask';

export default function PartnersDetailsForm() {
const [feildsValue, setFeildsValue] = useState({
        name: "",
        lastName: "",
        birthDate: "",
    })
});

const onChangeHandler = (e) => {
   let changedValue;
   if (e.target.name === "CPF" || e.target.name === "birthDate" || e.target.name === "cell") {
     changedValue = e.target.value.replace(/\D+/g, '');
   } else {
     changedValue = e.target.value;
   }
   setFeildsValue({ ...feildsValue, [e.target.name]: changedValue });
}

return (
        <>
           <ReactInputDateMask mask='DD/MM/YYYY' showMaskOnFocus={true} value={feildsValue.birthDate} onChange={(e) => {onChangeHandler(e)}} showMaskOnHover={true} />
        </>
)

which is quite similar to this https://codesandbox.io/s/r2f5r?file=/src/App.js:148-185.

But in my code the output is

enter image description here

Why am I getting a window error?

halfer
  • 19,824
  • 17
  • 99
  • 186
HamzaKhalid273
  • 355
  • 1
  • 4
  • 11
  • What is the version of `react-input-date-mask` that you are using? – Dulaj Ariyaratne Oct 28 '22 at 01:48
  • I am using the 2.0.0 version of react-input-date-mask. – HamzaKhalid273 Oct 28 '22 at 13:49
  • It seems `ReactInputDateMask` uses Web APIs that aren't accessible when Next.js pre-renders the page on the server. Try using `next/dynamic` with `ssr: false` to dynamically import `ReactInputDateMask` instead. See [Window is not defined in Next.js React app](https://stackoverflow.com/a/57848309/1870780). – juliomalves Nov 01 '22 at 22:16

0 Answers0