Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cant autofill the last 2 digits of card year in MUI React

I am trying to fix the autofill on my expiry input. It should autofill the last 2 digits of YYYY. Just YY.

I feel like I’m doing this right, but when I autofill it uses the first 2 digits, not the last 2.

Where am I going wrong?

<InputField
    id={id}
    name={'YY'}
    label={'YY'}
    placeholder='YY'
    maxlength="2"
    pattern="d{2}" 
    autoComplete='cc-exp-year'
/>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had some input masking effecting it.

    Removed that and used this code to fix it:

    const onChangeYear = (event: React.ChangeEvent<HTMLInputElement>) => {
    let inputYear = event.target.value;
    if (inputYear.length === 3) {
        return
    }
    if (inputYear.length > 2) {
        inputYear = inputYear.slice(-2);
    }
    setYear(inputYear);
    setFieldValue(id, `${month} / ${inputYear}`, false);
};

  2. 0 
    // The symbol $ is used to match something at the end of a string.
// Additionally, ^ is used to match something at the start of a string (it has other uses as well).

const lastTwoCharacters = '1965'.match(/d{2}$/)
console.log(lastTwoCharacters[0])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search