How can i make an input date limit when you are typing or chosing the date?

Question

I want to limit in special year : Ex: year <= 2200 when he is typing ;

<input type="date" max="2200-01-01" min="1900-01-01" class="form-control" id="regdate"
                   placeholder="Registration Date">

Sorry for bad my bad expressions... P.S WITHOUT SUBMIT !- when you type you can type over 2200 or under 1900.

Meaning you want the year to be between those two, or you want those two years exclusively? — Blazemonger, Aug 01 '14 at 13:15
I think [this](http://tiffanybbrown.com/2013/10/24/date-input-in-html5-restricting-dates-and-thought-for-working-around-limitations/) will help you to sort out the issue. — Deepak Biswal, Aug 01 '14 at 13:16
See [this](http://stackoverflow.com/questions/22232638/min-max-attribute-with-type-date-on-html5) and possibly [this](http://stackoverflow.com/questions/12075967/jquery-ui-min-max-date-difference-for-calendar). — Blazemonger, Aug 01 '14 at 13:22

score 0 · Answer 1 · answered Aug 01 '14 at 13:15

You can use validation to achieve this. A simple date range validation

function dateCheck() {
var fDate = new Date("1900/01/01");
var lDate; = new Date("2200/01/01");
fDate = Date.parse(document.getElementById("fDate").value);
lDate = Date.parse(document.getElementById("lDate").value);

if(fDate <= lDate) {
    alert("true");
    return true;
}
alert("false");
return false;

}

score 0 · Answer 2 · answered Aug 01 '14 at 13:15

Your code is correct, wrap it in form tag, Make input tag required, it will work, when you try to submit above or below the max or min values, it will display the alert

                 <form>
          <input type="date" max="2200-01-01" min="1900-01-01" class="form-control" id="regdate"  placeholder="Registration Date" required />
               <input type="submit" />
                 </form>

Check the working fiddle here

score 0 · Answer 3 · answered Aug 01 '14 at 13:18

0

You can use below fiddle for reference

<body>

<form>

  Enter a date before 1980-01-01 and after1900-01-01:
  <input type="date" name="bday" min="1901-12-31" max="1979-12-31"><br>


  <input type="submit">
</form>
</body>

Demo

answered Aug 01 '14 at 13:18

Yogesh Sharma

2,017
1
15
33

score 0 · Accepted Answer · edited Aug 01 '14 at 13:34

0

You can't do it via html, but You can use js for it, example here http://fiddle.jshell.net/5Sup8/

$(function () {
    $('input').change(function () {
        var val = $(this).val().split('-');
        console.log(val);
        if (val[0] < 1900 || val[0] > 2200) {
            $(this).addClass('error');
        } else {
            $(this).removeClass('error');
        }
    });
});

edited Aug 01 '14 at 13:34

Blazemonger

90,923
26
142
180

answered Aug 01 '14 at 13:26

Sargis Markosyan

146
1
3

Please don't provide link-only answers; include some code directly in your response. – Blazemonger Aug 01 '14 at 13:30

How can i make an input date limit when you are typing or chosing the date?

4 Answers4