Expiry date don't format input data
Opened this issue · 1 comments
carloscba commented
I'm working with react-payment-inputs and material ui:
const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } = usePaymentInputs();
const { erroredInputs, touchedInputs } = meta;
...
const [expiryDate, setExpiryDate] = useState();
const handleChangeExpiryDate = (event) => setExpiryDate(event.target.value);
...
<TextField
inputProps={{ "data-testid": "expireDate" }}
{...getExpiryDateProps({ onChange: handleChangeExpiryDate })}
defaultValue = { expiryDate }
error={ (erroredInputs.expiryDate && touchedInputs.expiryDate) ? true : false }
helperText= { (touchedInputs.expiryDate) && erroredInputs.expiryDate }
label="Expiry Date"
type="text"
margin="dense"
fullWidth
/>
In this example validation work fine but don't format the input date as 00/00
If I implement a simple input everything it's ok
<input {...getExpiryDateProps({ onChange: handleChangeExpiryDate })} value={expiryDate} />
Saludos, muchas gracias.
kguptaaa commented
Hi,
You need to pass the getter method to inputProps like this:
<TextField
inputProps={getExpiryDateProps({ onChange: handleChangeExpiryDate })}
defaultValue = { expiryDate }
error={ (erroredInputs.expiryDate && touchedInputs.expiryDate) }
helperText= { (touchedInputs.expiryDate) && erroredInputs.expiryDate }
label="Expiry Date"
type="text"
margin="dense"
fullWidth
/>