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.)

Gannie

Nope, can't do that with CSS. You'd need to update it with JS, unless you use multiple inputs like @HelpNeeder said. – Wotton

Are you looking for something similar to this? jsfiddle.net/zoj2de8p/2 – Night

@BuddhistBeast: Yes, that's what I was looking for, just more robust. – Gannie

@Gannie - if you have built a more robust solution, can you please share the same? I am looking to build a similar one – Hardpressed

Answer 1

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.

Arsenide

Choosing this as it answers my question about getting the desire result with a single input field. It took a surprising amount of code for something this simple, but many corner cases had to be covered. Posting for posterity: jsfiddle.net/nirodhasoftware/pgfcpxeb – Gannie

@Gannie this fails to work in android chrome as keydown will always written keycode as 229 or 0 – Repand

Answer 2

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.

Arawakan

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)

Raymundorayna

Answer 4

it's a quite easy hack if you're looking only for styling, try this:

<div class="fakeinput">
    <input type="text" size="2" class="mini_input" />
    <div class="slash">/</div>
    <input type="text" size="2" class="mini_input" />
</div>

and then CSS like this:

.fakeinput{display:block; border:1px solid #ccc; background:#f9f9f9; width:50px;}
.fakeinput *{display:inline-block; color:#555; vertical-align:middle}
.mini_input{width:15px; font-size:10px; border:none; background:none; box-shadow:none; padding: 3px 0 5px 5px}

As you may imagine, you can also change input to select .

This being said, I'd avoid this for UX purposes, I think it's better to give users the proper format for dates so you avoid issues later, but of course, just an opinion

btw, here's a fiddle so you can preview and play around

Also, if you want just one field, you can do this:

<input name="date" type="text" value="/" onblur="if (this.value=='') this.value = '/'"   onfocus="if (this.value=='some text') this.value = ''"  />

and then use BuddhistBeast's solution which looks really nice, this way you cover all bases with only one field

Akan

well, I didn't see because I was answering the question. Anyway, what's the problem? as you can see I'm resetting styles which you aren't, I didn't know you were the owner of CSS – Akan

Answer 5

My solution was to add a slash after 2 characters have been entered. That's what I came here looking for so hopefully helps someone else down the line.

var characterCount
$('#expiry').on('input',function(e){
    if($(this).val().length == 2 && characterCount < $(this).val().length) {
        $(this).val($(this).val()+'/');
    }
    characterCount = $(this).val().length
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="expiry" type="text" />

Honor

I dont see a jquery tag so could you provide this in javascript? – Eastbourne