How to style a credit card expiration date input field to include spaces and forward slash?

Question

I am wondering how I can style one input field (type = text) to display with spaces and a slash between numbers, like this:

I know how to constrain the input to digits and perform validation. That's not what I'm asking. I'm wondering about the actual display. Can you use CSS to do this somehow, splitting the first two MM digits from the last two YY digits?

I want the user to be able to type 4 digits only and have it display as: MM / YY

(Different question from How to format credit card input fields and expiry date. That question focuses on validation.)

Answer 1

You can accomplish this using two inputs fields, removing the border of the input fields, adding a border to a wrapper element to appear as one input and a place / in between like so. - jsFiddle Demo

HTML

 <span class="expiration">
    <input type="text" name="month" placeholder="MM" maxlength="2" size="2" />
    <span>/</span>
    <input type="text" name="year" placeholder="YY" maxlength="2" size="2" />
</span>

CSS

.expiration {
    border: 1px solid #bbbbbb;
}
.expiration input {
    border: 0;
}

Result

This is just the CSS needed to demonstrate the idea, of course you can style it however you'd like.

I used <span>s because they are inline elements, as are input fields.

Answer 2

Read first few characters and save them to the variable. then read last characters, and write them into other variable... Then concatenate with the space between them.

How can I get last characters of a string using JavaScript

Retrieve first 2 characters of this.title attribute, and call corresponding id

Or, have 2 fields and style them with CSS to look like a single field.

Answer 3

This is my solution using Regex.

const expdate = '0421';
const expDateFormatter = expdate.replace(/\//g, "").substring(0, 2) + 
  (expdate.length > 2 ? '/' : '') + 
  expdate.replace(/\//g, "").substring(2, 4);
  
console.log(expDateFormatter)