How to Automatically Format User Input 4 digits to last 2 digits

Question

I have the credit card expiring text field that user able to type in 4 digit but i want to automatically format user input 4 digits to last 2 digits.

So, if user input 2022, i want automatically changed to last two digits "22". I have try the maxlength 2 in html input but that doesn't work out for me.

This is try format the input 4 digits to 2 digits.

Possible duplicate of [Regex get last two digits of year](https://stackoverflow.com/questions/25609821/regex-get-last-two-digits-of-year) — Bruno Monteiro, Mar 11 '19 at 21:01
Can you show us what you've tried? What you're asking for is rather simple: a search on StackOverflow should give you the solution you need. — Terry, Mar 11 '19 at 21:01
This sounds like very bad UX. You should make it clear that you want two digits for month and two digits for the year. Everything else will probably just confuse people. — Luca Kiebel, Mar 11 '19 at 21:03
@LucaKiebel just wanted the from the year input.. User input 2022, wanted to changed to last two digits 22. hope this help. — sam lim, Mar 11 '19 at 21:06
I understand what you want to do, I am telling you that that's probably not the best way to solve the "problem". — Luca Kiebel, Mar 11 '19 at 21:07
I want to find the way, when user type in 4 digits of the year. See i can take out the first two digits of that input. — sam lim, Mar 11 '19 at 21:09
@Luca,, i am asking what is the solution for what i wanted to do. I do see your point but just wanted to get the fix what i have on now. — sam lim, Mar 11 '19 at 21:12
Welcome to SO! Please check the link in [this](https://stackoverflow.com/questions/55110324/how-to-automatically-format-user-input-4-digits-to-last-2-digits#comment96963463_55110324) comment! — Olafant, Mar 11 '19 at 21:40
[Regex get last two digits of year](https://stackoverflow.com/questions/25609821/regex-get-last-two-digits-of-year) — Olafant, Mar 11 '19 at 22:05
Thanks for the point, i saw the solution and that wasn't what i looking for. If you review the post, i am not looking to use regen for that little piece. See if there solution like jqury masking and html or css solution. — sam lim, Mar 11 '19 at 22:15

Doda Gheorghe · Answer 1 · 2019-03-13T12:23:23.083

Although i don't believe that it's a good choice to let the user write a full year and show only the last 2 digits, you could try this fiddle and/or this fiddle.

<input id="year" data-fullyear="" placeholder="yyyy" maxlength="4">

$("#year")
  .on("blur",e=>{
        let $this = $(e.currentTarget);
    let value = $this.val();
    if(value.length===4){
        $this.data("fullyear",value)
        $this.val(value.substring(2));
    }else{
        $this.data("fullyear","")
        $this.val("");
    }
  })
  .on("focus",e=>{
    let $this = $(e.currentTarget);
    let value = $this.val();
    if(value.length===2){
        let fullYear = $this.data("fullyear");
        $this.val(fullYear);
    }else{
        $this.val("");
    }
  });

score 0 · Answer 2 · answered Apr 08 '21 at 17:33

0

This should work:

const year = 2023

function formatYear(year) {
  const yearToArr = String(year)
  return `${yearToArr[2]}${yearToArr[3]}`
}

console.log(formatYear(year))

answered Apr 08 '21 at 17:33

AbrarShahriar

153
8

score 0 · Answer 3 · edited Apr 05 '22 at 10:51

The answer to this question is slice, it can help you slice a string using two parameters. First, the starting index and second ending index. I have added some extra features too. Hope the code below helps:

const lastToDigets = str =>{
    let total = ""
    let error = false
    let errorMessage=  ''
    if (str != null && str != "") {
        error = false
        if (str.length <=4) {
            total = str.slice(str.length-2, str.length)
        } else {
           error = true
           errorMessage = `The maxium length can be 4 you have given ${str.length}` 
           return errorMessage
        }
    } else {
        error  = true
        errorMessage = "Please fill the str perimeter."
        return errorMessage
    }
    return total
}


// Calling Function
// Answer
console.log(lastToDigets("2022"))
// Extra Feature: If the user enters a greater than length, it will raise an error
console.log(lastToDigets("12345"))

How to Automatically Format User Input 4 digits to last 2 digits

3 Answers3