Expiry date don't format input data

[carloscba]

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]

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
/>