Javascript: allow month and year in an input only?

Question

Basically I'm trying to create a simple input text field that looks like this:

MM/YYYY

I've tried this like so:

<input type="text" value="MM/YYYY" >

But some users seem to go crazy and put strange value in there.

So, I'm trying to force them to keep the format like MM/YYYY using javascrip or jQuery.

Any pointer would be appreciated.

ANSWER:

Here is what I came up with which works exactly like what I want with the help of Jonas's answer:

https://jsfiddle.net/z2a7ydcj/4/

@LelioFaieta, I don't think you clearly understood the question. I need to format the input field like MM/YYYY. the validation will be done elsewhere. — David Hope, May 25 '17 at 20:27
Check this link: https://stackoverflow.com/questions/511439/custom-date-format-with-jquery-validation-plugin — Marco Hurtado, May 25 '17 at 20:28
You should not allow raw user input in this case. A better UI would be a date picker whose resulting value is formatted how you would like it. — djfdev, May 25 '17 at 20:29
Seems like you want [``](https://www.w3.org/wiki/HTML/Elements/input/month). Also, [this question](https://stackoverflow.com/q/12578507/215552) may be broader, but is essentially the same question. — Heretic Monkey, May 25 '17 at 21:00
You got to laugh at the spiteful kids that downvote a perfectly valid question with a working answer because you don't accept their answer lol... Good job and you know who you are ;) grow up... that's my only advice for you. — David Hope, May 25 '17 at 21:21
@DavidHope The solution you amended is a bit wonky. For example, if I make a typo in the month, I cannot use the delete key to move back behind the slash. To make an edit, you'd have to manually select the portion before the slash, or reselect everything and start over. I strongly suggest using a date picker, rather than manipulating the effect of user events inside a text input. This would also prevent the user from inputting invalid dates (e.g. 99/0000) — djfdev, May 25 '17 at 22:49
@djfdev, you can now use your delete key if you make a mistake: https://jsfiddle.net/z2a7ydcj/6/ — David Hope, May 26 '17 at 13:37

john Smith · Answer 1 · 2017-05-25T21:07:02.057

3

html5 comes with the pattern attribute ;-)

<input type="text" id="foo" pattern="(0[1-9]|1[012])/[0-9]{4}" placeholder="MM/YYYY">

here is some jquery script that tests the input on change and if not valid resets it

jQuery(document).on("change", "#foo", function(){
   pattern = new RegExp("/(0[1-9]|1[012])/([0-9]){4}/")
   valid = pattern.test(jQuery(this).val())

   if(!valid){
     jQuery(this).val("")
   }
})

you could also manually trigger the form validation by wrapping input into a form and call checkValidity() on it, it will return false and it will highlight all invalid inputs then, so you could check this way before doing any ajaxcalls

edited May 25 '17 at 21:07

answered May 25 '17 at 20:28

john Smith

17,409
11
76
117

1

No, you still can enter whatever you like in the input. https://jsfiddle.net/z2a7ydcj/ – David Hope May 25 '17 at 20:32
It works on form submit, you can still type whatever you want in the box. – Douglas Tyler Gordon May 25 '17 at 20:38
I never said I'm using a form! This doesn't work in all browsers and also it doesn't work in AJAX. – David Hope May 25 '17 at 20:39
that still gets rid of the input value if they enter it wrong! check out Jonas's answer as that is very close to what i'm trying to achieve. Thanks any how. :) – David Hope May 25 '17 at 20:55
i see, maybe https://github.com/RobinHerbots/Inputmask is sth for your needs, because its a pretty hardcore task and you did not show **any** tries of yourself – john Smith May 25 '17 at 20:59
doest work for me, i can enter whatever i want and the slash is not injected, good luck ;-) – john Smith May 25 '17 at 21:02

Jonas Wilms · Accepted Answer · 2017-05-25T21:11:13.640

You could check each input using js:

<script>
window.addEventListener("load",function(){
 document.getElementById("someid").addEventListener("input",function(){
   this.value=this.value.split("/").slice(0,2).map((el,i)=>parseInt(el,10)&&i<2?el.slice(0,2+2*i):"").join("/");
  });
});
</script>
<input id="someid" />

This just enforces 23/1234. However you might make it more complex:

     var length=0;
     document.getElementById("someid").addEventListener("input",function(){
     if(length>(length=this.value.length)) return; //enable deleting
       var mapped=this.value.split("").map(function(char,i){
            switch(i){
                case 0:
                   return char=="1" || char=="0"?char:"";
                 break;
                 case 1:
                   return !isNan(parseInt(char,10))?(this[0]=="0"?char:(+char<3?char:"")):"";
                 break;
                 case 2:
                   return "/";
                 break;
                 case 3:
                 case 4:
                 case 5:
                 case 6:
                   return !isNan(parseInt(char,10))?char:"";
                 break;
                 default:
                   return "";
                 break;
            }
    },this.value);
  if(mapped.length===2) mapped.push("/");
  this.value=mapped.join("");
});

It replaces every character with 0 if it does not fullfill special requirenments for the character at that position. It also adds a / after the second char automatically, however this can lead to problems while editing, thats why i recommend to enable the enable deleting above...

http://jsbin.com/razupobamu/edit?output

Very close but still not working properly: https://jsfiddle.net/z2a7ydcj/2/ — David Hope, May 25 '17 at 20:47
@DavidHope shure i work on it. Also have a look at the latest review of my code, it already improves many bugs — Jonas Wilms, May 25 '17 at 20:49
@DavidHope check latest version of the jsbin link above. It fullfills all requirements... — Jonas Wilms, May 25 '17 at 21:03
@DavidHope i fixed all bugs, code above should work now, may also add it to the *change* event... — Jonas Wilms, May 25 '17 at 21:11

Javascript: allow month and year in an input only?

2 Answers2