HTML5 Date Input 6 digit year

Question

I have a standard <input /> control on my form, decorated with type="date"

When rendered, it displays the correct watermark of yyyy-mm-dd, and you can select a date correctly.
However, when you try type in a value, the year extends to 6 digits, instead of four. I have added screenshots to help demonstrate the issue I'm having.

Is anyone else getting this? I'm using Chrome ( Version 35.0.1916.153 m ) as my default browser.
I'd like a way to force a 4year input that doesn't involve extra JS.

Date Control

Control Source

score 30 · Answer 1 · answered Nov 11 '14 at 17:23

30

the max attribute is working, as far as i know...

the format of max is trickey, if you put the correct format everything will work fine....

see here for example:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_max_min_date

answered Nov 11 '14 at 17:23

Yaniv Hadad

301
3
2

2

Selected as the correct answer as it's a non-JS fix. – TheGeekZn May 18 '16 at 04:55
8

It's still allowing to type 6 digit year instead of 4 – Abdul Rauf Sep 13 '19 at 15:16
2

Note that when using `type="datetime-local"` you need a max formatted like `yyyy-mm-ddT00:00` for this to work. – Arno van Oordt Oct 12 '19 at 08:32
4

This only affects the browser validator, unfortunately. Still 6 (or 5 on Firefox) digits can be typed. – bencergazda Nov 08 '19 at 13:47
As @Tristan said, it works in Chrome and Edge, but not in Firefox. Is there a universal solution? – André Reichelt Feb 25 '20 at 08:55
This won't work in Safari though https://caniuse.com/input-datetime right now – zyrup Dec 12 '21 at 16:41

score 23 · Answer 2 · answered Jul 26 '18 at 07:29

23

Use max attribute to fix this problem like:-

<input type="date" max="1979-12-31">

answered Jul 26 '18 at 07:29

Javed

1,613
17
16

This won't work in Safari though https://caniuse.com/input-datetime right now – zyrup Dec 12 '21 at 16:41

score 16 · Answer 3 · answered Jan 31 '18 at 16:34

16

A bit old, but for posterity...

Using the max attribute eliminates this problem.

<input type="date" max="2999-12-31">

Pen: https://codepen.io/iHearRobots/pen/OQVzLZ

answered Jan 31 '18 at 16:34

Cam Beaudoin

185
1
2

7

I don't agree that this "eliminates" the problem. As of Chrome 70, for example, I can type a 6 digit year. IMO, it should stop me from typing past the number of digits in the max year. It might get "validated" as incorrect, but validations are still not standard. – Andrew Grothe Nov 02 '18 at 14:20
1

This only seems to work if the users use the little toggle up and down buttons (in Chrome at least). It doesn't prevent typing data outside of the range though. – Zachary Weber Oct 22 '19 at 20:26
This won't work in Safari though https://caniuse.com/input-datetime right now – zyrup Dec 12 '21 at 16:41
On firefox you can still input a longer year. Max only works for 4 digit years – 0x777C Oct 18 '22 at 10:21

score 9 · Answer 4 · edited May 23 '17 at 12:25

9

It will let you type a larger year. It wasn't designed with a cap, so to allow years beyond 9999. Not sure why. (note, even with the max attribute, it doesn't appear to restrict it. [edit] .. it may not allow the user to actually submit after entering that larger number.)

You will need to use a JavaScript solution if you want to fully restrict it.

See this previous thread

edited May 23 '17 at 12:25

Community

1
1

answered Jul 07 '14 at 06:26

John C

666
4
8

6

Silly, as the mask shows a 4-digit year. So this is happening for everyone? – TheGeekZn Jul 07 '14 at 06:27
1

@SemiDemented - yes at least for webkit browsers!! – Zameer Ansari Aug 25 '14 at 19:34

score 0 · Answer 5 · answered Jun 14 '22 at 20:24

const maxLengthCheck (event) ->{ 
    let date = event.target.value
    if(date){
        let dateArr date.split('-') 
        if(dateArr[0] && dateArr[0].length>4){ 
             dateArrl[0]=dateArr[0].substr(e, dateArr[0].length-1) 
             date = dateArr.join('-')
             console.log("updated date : ", date) 
             document.getElementById('date-input').value = date
        }
    }
}

//HTML changes
<input id="date-input" type="date" onInput={maxLengthCheck}/>

HTML5 Date Input 6 digit year

5 Answers5

Linked