when expire date entered, automatic slash-CodePudding

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?

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

CodePudding user response：

Try this one

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

CodePudding user response：

When I change some data I usually put it in the state. If you also keep your data in the state, you can modify your handleExpDateChange to something like this:

const handleExpDateChange = (event) => {
  if (event.target.value && event.target.value.length === 2) {
    setExpirationDate(event.target.value   '/')
  } else {
    setExpirationDate(event.target.value)
  }
}

This can be simplified if you use ternary expression or in any other way but this is just very simple and the first thing that came to my mind. Hope this will be helpful.