Automatically inserting "-" or "/" character for MM-YYYY textfields?

Question

I'm working on a CC Validation template at the moment, but using the standard dropdown/separate textfields for selecting the Month/Year expiration fields is unfortunately not on the cards for this particular project.

Instead, I'm looking to have one textfield (in the format MM-YYYY) for capturing the expiration date - however, I'm looking to write this so that a customer is not required to enter the "-" or "/" between the Month/Year entries.

Instead, after the customer types in say, "02", the hyphen or slash should automatically appear after it. If the customer then backspaces over the year, the hyphen/slash should also be removed, allowing for them to easily edit their month data.

Are there any decent solutions available which accomplish this? Or is it a case of rolling your own?

I'd recommend rolling your own. I've done something similar in the past and it isn't that tough. It is actually a great exercise for this kind of thing. Here is a page to get you started https://learn.jquery.com/plugins/basic-plugin-creation/ — nurdyguy, Jan 25 '17 at 17:43

score 1 · Accepted Answer · answered Jan 25 '17 at 17:52

1

please try this, I created for date https://jsfiddle.net/dhruv1992/6fk8fb1v/

<input type="text" id="dateofbirth">

jquery

$("#dateofbirth").on('keyup',function(event){
    var key = event.keyCode || event.charCode;
    if (key == 8 || key == 46) return false;
    var strokes = $(this).val().length;
    if(strokes === 2 || strokes === 5){
        var thisVal = $(this).val();
        thisVal += '/';
        $(this).val(thisVal);
    }
});

answered Jan 25 '17 at 17:52

DHRUV GUPTA

2,000
1
15
24

What do `8` and `46` represent? I know, but would the next programmer know? Why use `$(this).val().length` when `this.value.length` is hundreds of times faster? In fact you're creating `$(this)` three times when you can just do `this.value += "/";` but besides that, what if I want to backspace? I can't because you blocked `keyCode 8`. Basically what I'm saying is, this is extremely unfriendly both to programmers and to users, which is quite an achievement really... – Niet the Dark Absol Jan 25 '17 at 17:58
I just did to make my code more clear. sorry but I don't prefer shortcuts. – DHRUV GUPTA Jan 25 '17 at 18:11
Your code is not clear. At all. Not to programmers, and not to the browser either as it has to do unnecessary calculations for no reason at all... – Niet the Dark Absol Jan 25 '17 at 18:13

score 1 · Answer 2 · answered Jan 25 '17 at 17:54

1

This is pretty crude (but does at least implement your requirements).

https://jsfiddle.net/justinwyllie/ntdwc1qt/

$('#cc').on('input', function() {
    var v = $(this).val();
    if (v.length == 2) {
        $(this).val(v + '-');   
    }

   if (v.length == 3) {
        $(this).val(v.substring(0,2));  
    }


})

Maybe a combination of this and dhruv gupta's answer which at least tries to detect the keystrokes?

answered Jan 25 '17 at 17:54

btw input may not be ideal as it does not fire on the backspace - according to MDN https://developer.mozilla.org/en-US/docs/Web/Events/input – Jan 25 '17 at 17:56
Re your comment: that is only true for IE9, as per the link you provided. Seems fine to me. – Niet the Dark Absol Jan 25 '17 at 18:00

score 0 · Answer 3 · answered Jan 25 '17 at 17:55

0

<input type="month" />

Job done.

answered Jan 25 '17 at 17:55

Niet the Dark Absol

320,036
81
464
592

What browser is this working in, @Niet? I can't get this to work in Firefox 51. – Rounin Jan 25 '17 at 21:19
@Rounin [Basically everything except Firefox](http://caniuse.com/#feat=input-datetime) because Firefox is the new IE. – Niet the Dark Absol Jan 26 '17 at 10:31
Haha. Ouch. I like FF for the same reason that I like Chromium ;-) And I see from caniuse that FF54 does / will support. Thanks for the right caniuse page (I searched, but not for _datetime_). – Rounin Jan 26 '17 at 11:21

score 0 · Answer 4 · answered Jan 25 '17 at 21:22

I liked @31piy's idea of having two text boxes.

Here is one approach using two text input boxes:

var inputMonth =  document.querySelector('input[placeholder="mm"]');
var inputYear = document.querySelector('input[placeholder="yyyy"]');
var enteredDate = document.getElementsByTagName('p')[0];

function updateEnteredDate() {

    enteredDate.textContent = '';

    if (inputMonth.value.length > 0) {
     enteredDate.textContent += inputMonth.value;
    }


    if ((inputMonth.value.length > 1) && (inputYear.value.length < 1)) {

     if (document.activeElement === inputMonth) {
         enteredDate.textContent += '-';
         inputYear.focus();
     }

     else if (document.activeElement === inputYear) {
         inputMonth.focus();
     }
    }

    if (inputYear.value.length > 0) {
     enteredDate.textContent += '-';
     enteredDate.textContent += inputYear.value;
    }

}

inputMonth.addEventListener('keyup', updateEnteredDate, false);
inputYear.addEventListener('keyup', updateEnteredDate, false);
window.addEventListener('load', function(){inputMonth.focus();}, false)

p {
height: 72px;
margin: 0;
padding: 0;
line-height: 72px;
font-size: 72px;
font-weight: bold;
}

<p></p>

<form>
<input type="text" size="2" maxlength="2" placeholder="mm" />
<input type="text" size="4" maxlength="4" placeholder="yyyy" />
</form>

Automatically inserting "-" or "/" character for MM-YYYY textfields?

4 Answers4

Linked