60

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

8 Answers 8

31

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

6
  • 2
    Selected as the correct answer as it's a non-JS fix.
    – TheGeekZn
    Commented May 18, 2016 at 4:55
  • 9
    It's still allowing to type 6 digit year instead of 4
    – Abdul Rauf
    Commented Sep 13, 2019 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. Commented Oct 12, 2019 at 8:32
  • 5
    This only affects the browser validator, unfortunately. Still 6 (or 5 on Firefox) digits can be typed. Commented Nov 8, 2019 at 13:47
  • As @Tristan said, it works in Chrome and Edge, but not in Firefox. Is there a universal solution? Commented Feb 25, 2020 at 8:55
26

Use max attribute to fix this problem like:-

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

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

4
  • 9
    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. Commented Nov 2, 2018 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. Commented Oct 22, 2019 at 20:26
  • This won't work in Safari though caniuse.com/input-datetime right now
    – zyrup
    Commented Dec 12, 2021 at 16:41
  • On firefox you can still input a longer year. Max only works for 4 digit years
    – 0x777C
    Commented Oct 18, 2022 at 10:21
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

2
  • 7
    Silly, as the mask shows a 4-digit year. So this is happening for everyone?
    – TheGeekZn
    Commented Jul 7, 2014 at 6:27
  • 1
    @SemiDemented - yes at least for webkit browsers!!
    – Xameer
    Commented Aug 25, 2014 at 19:34
2

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).

1

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.

1
  • This doesn't fix the issue in Edge, it still allows typing six digits.
    – Tridus
    Commented Jan 15 at 18:06
0
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}/>
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.