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.

Apetalous

Answer 1

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

Iridium

Selected as the correct answer as it's a non-JS fix. – Apetalous

It's still allowing to type 6 digit year instead of 4 – Diaphoresis

Note that when using type="datetime-local" you need a max formatted like yyyy-mm-ddT00:00 for this to work. – Belmonte

This only affects the browser validator, unfortunately. Still 6 (or 5 on Firefox) digits can be typed. – Boodle

As @Tristan said, it works in Chrome and Edge, but not in Firefox. Is there a universal solution? – Clinkscales

This won't work in Safari though caniuse.com/input-datetime right now – Marvellamarvellous

Answer 2

Use max attribute to fix this problem like:-

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

Gradate

This won't work in Safari though caniuse.com/input-datetime right now – Marvellamarvellous

Answer 3

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

Attitudinarian

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. – Carliecarlile

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. – Stereotyped

This won't work in Safari though caniuse.com/input-datetime right now – Marvellamarvellous

On firefox you can still input a longer year. Max only works for 4 digit years – Oaxaca

Answer 4

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

Outward

Silly, as the mask shows a 4-digit year. So this is happening for everyone? – Apetalous

@SemiDemented - yes at least for webkit browsers!! – Neville

Answer 5

The max="2999-12-31" is useful for validation.
But to prevent the entry of more than 4 digits on year, the only solution I can see is to use JS.

<input type="date" oninput="if(this.value.length > 10) this.value = this.value.replace(/\d{5,}/, match => match.substr(0, 4));"/>

Note that if you continue to press the key, the year will be reset - this is normal behavior (tested on FF).

Ambriz

Answer 6

For me, what worked was the code below:

<input type="datetime-local" max="9999-12-31T23:59">

The max string format was key to do the trick.

Tell

This doesn't fix the issue in Edge, it still allows typing six digits. – Intussuscept

Answer 7

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

Constanceconstancia

Answer 8

Based on my research, html5 provides fields max and min. You can use these fields based on requirements without involving JS.

I have updated your input and added snippets here, Try it in your code.

<!DOCTYPE html>
<html>
<head>
    <title> Date Published </title>
</head>
<body>
  <input
    class="form-control"
    data-val="true"
    data-val-date="The field DatePublished must be a date."
    data-val-required="The DatePublished field is required."
    id="DatePublished"
    name="DatePublished"
    required="true"
    type="date"
    value=""
    min="2000-01-01"
    max="2999-12-31"
  />
</body>
</html>

Ennius