There is a credit card component. It asks the user to enter credit card information. However, I want to automatically put a slash between the day and month when the user enters the credit card expiration date. I searched the expiration date entry as "auto slash when 2 digits are entered" but I haven't been successful yet.

i can write; 0614

The format i want; 06/14

How can I solve it?

js

const [expDateValidationState, setExpDateValidationState] = useState({
  error: false,
  helperText: '',
});

const expDateOnChange = (event) => {
  if (expDateValidator(event.target.value)) {
    setExpDateValidationState({ error: false, helperText: '' });
    setPaymentInfo({
      ...paymentInfo,
      expDate: event.target.value === '' ? null : event.target.value,
    });
  } else {
    setExpDateValidationState({
      error: true,
      helperText: 'Please enter your expire date.',
    });
    setPaymentInfo({
      ...paymentInfo,
      expDate: null,
    });
  }

const handleExpDateChange = (event) => {
  expDateOnChange(event);
  handleInputChange(event);
};

validator

export const expDateValidator = (expDate) => {
  const expDateRegex = /^(0[1-9]|1[0-2])\/?([0-9]{4}|[0-9]{2})$/;

  return expDateRegex.test(expDate);
};

html

<AS.TextField
  placeholder="aa/YY"
  inputProps={{ maxLength: 5 }}
  onChange={handleExpDateChange}
  error={expDateValidationState.error}
  helperText={expDateValidationState.helperText}
  name="expDate"
  value={paymentInfo.expDate}
/>