How to validate input date html year?

Question

I want the date input to stop typing once the year has 4 digits. I tried using the min and max component from HTML, but it stills allows you to type erasing the first digit. See example 1.

See example 2 to see that year can be typed with more than 4 digits.

Here are my two test runs, I also tried creating a method with JS using the "onchange" component from HTML and I tried, but none of this seems to work...

https://fiddle.jshell.net/jaelsvd/98xww3qg/9/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Example 1</label>
 <input id="date1" type="date" min="1990-12-31" max="2050-12-30">
  <br />
   <label>Example 2</label>
  <input id="date2" type="date" />

Try again with the onkeypress JavaScript event. The onchange event does not fire while you type inside the input. — GramThanos
– GramThanos, Commented Aug 4, 2017 at 23:32
@GramThanos—what about input that doesn't cause a keypress event to be dispatched (like pasting using a mouse)? — RobG
– RobG, Commented Aug 5, 2017 at 3:07
Probably a duplicate of How to validate a year I enter in textbox using jquery rule? — RobG
– RobG, Commented Aug 5, 2017 at 3:11
@RobG Yeah, this is a problem too. So... someone can use all the event :P — GramThanos
– GramThanos, Commented Aug 5, 2017 at 10:25
The problem with the onkeypress is that it's not detecting the value of my year correctly. Maybe cause it triggers the method before even detecting the actual value of the date. :P I wish it just worked as easy as maxlenght=8, lol — Jael Saavedra
– Jael Saavedra, Commented Aug 5, 2017 at 22:07

charlietfl · Accepted Answer · 2017-08-04 23:39:55Z

1

Set maxlength and use pattern along with required if you want html5 built in validation:

<form>
  <label for ="date2">Example 2</label>
  <input id="date2" type="date" pattern="\d{4}" maxlength="4"  required />
  <button>
    Submit
  </button>
</form>

answered Aug 4, 2017 at 23:39

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Khoa Bui · Accepted Answer · 2017-08-04 23:52:37Z

0

For more flexibility, you can use textbox input and check on keypress event, and decide to accept or reject the pressed key like below:

<input type="text" id="my_date" placeholder="MM/dd/YYYY" />

<script>
    var myDate = document.querySelector('#my_date');
    myDate.onkeypress = function (evt) {
        var _evt = evt || windows.event;
        var keyCode = _evt.keyCode || _evt.charCode;
        var sKey = String.fromCharCode(keyCode);
        // TODO: test for key value

        // Test for text lenth
        var text = this.value;
        // TODO: test value, return true to accept, false to reject.
        if (text.length > 10) {
            alert(text + ' length reach quota.');
            return false;
        }
        else {
            return true;
        }
    };
</script>

answered Aug 4, 2017 at 23:52

Khoa Bui

7531 gold badge8 silver badges15 bronze badges

7 Comments

RobG Over a year ago

What about values that are input without using the keyboard (i.e. don't cause a keyboard event to be dispatched)?

Jael Saavedra Over a year ago

I'm thinking I'll use something like this, but instead of the alert I'll use a onpresskey disabled. "False"

Khoa Bui Over a year ago

@RobG: to handle copy & paste, maybe to catch 'onchange' and check for value and reject the whole text.

Khoa Bui Over a year ago

@JaelSaavedra, if this help, please accept the answer.

Jael Saavedra Over a year ago

@KhoaBui it's not working, I tried changing the input type to date and also trying to get rid of the last 0(extra character), if I try the condition text.length > 9 it doesn't work either, heres an example, I still need to delete the extra digit. jsfiddle.net/jaelsvd/8p35t1ep/1

|

Yusnur Hidayah · Accepted Answer · 2017-08-05 00:06:40Z

0

For your case, can use : (1) FormValidation (this link), (2) DateRangePicker - Jquery (this link)

answered Aug 5, 2017 at 0:06

Yusnur Hidayah

211 bronze badge

1 Comment

RobG Over a year ago

This isn't an answer, it might be a comment.

Jael Saavedra · Accepted Answer · 2017-08-07 17:37:29Z

The problem is that the component "date" sets 000's when pressing a key. I had to change the condition and read the 000 before and then set the condition. This worked.

var myDate = document.querySelector('#my_date');
    myDate.onkeypress = function (evt) {
        var _evt = evt || windows.event;
        var keyCode = _evt.keyCode || _evt.charCode;
        var sKey = String.fromCharCode(keyCode);
        
        var text = this.value;
         var res = text.substring(0, 3);
         var res2 = text.substring(0,2);
         var res3  = text.substring(0,1);
         if(res === "000" || res2 === "00" || res3 ==="0"){
             return true;
         }else{
            if (text.length >= 9) {
                return false;
            }
            else {
                return true;
            }
         }
        
    };

<input type="date" id="my_date" placeholder="MM/dd/YYYY" />

Collectives™ on Stack Overflow

How to validate input date html year?

4 Answers 4

Comments

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related