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

6
votes

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

Credit card expiry field

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

5
javascriptcssinputcredit-card
Nope, can't do that with CSS. You'd need to update it with JS, unless you use multiple inputs like @HelpNeeder said. – Design by Adrian
Are you looking for something similar to this? jsfiddle.net/zoj2de8p/2 – BuddhistBeast
@BuddhistBeast: Yes, that's what I was looking for, just more robust. – Doug
@Doug - if you have built a more robust solution, can you please share the same? I am looking to build a similar one – arvind_cool

5 Answers

7
votes

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

input field data slash

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.

1
votes

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.

0
votes

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

0
votes

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)
-3
votes

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