Javascript - How to restrict html date to today's date?

Question

There is <input type=date> field in my html page. And I am trying to make a function in javascript that will set today's date in that field if some date greater than today has been chosen. Actually, I would like to restrict maximum date to today's date. Here is code in jsfiddle. What am I doing wrong?

HTML:

<div class="entry">
    <label for="startDate">Start date:</label>
    <input id="startDate" name="startDate" type="date" oninput="validDate(startDate)">
</div>

Javascript:

function validDate(date) {
    todayDate = getTodaysDate();
    if (date > todayDate)
        document.searchForm["date"].value = todayDate;
}

function getTodaysDate(){
    date = new Date();
    day = date.getDate();
    month = date.getMonth() + 1;
    year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    today = year + "-" + month + "-" + day; 

    return today;
}

Look at [this post](http://stackoverflow.com/q/8417199/1267304). — DontVoteMeDown, Jan 14 '14 at 11:02
Not sure if the code is correct, but at least `onxxx="func()"` won't change invalid values. That needs `onxxx="return func()"`. — PurkkaKoodari, Jan 14 '14 at 11:02

sroes · Accepted Answer · 2014-01-14T11:09:18.677

3

You can set the max attribute to restrict it to todays date:

document.getElementById('startDate').setAttribute('max', getTodaysDate());

See http://jsfiddle.net/4jCT6/1/

edited Jan 14 '14 at 11:09

answered Jan 14 '14 at 11:02

sroes

14,663
1
53
72

only safari does not support it. see here http://stackoverflow.com/a/8419769/821057 – Zaheer Ahmed Jan 14 '14 at 11:10

MassivePenguin · Answer 2 · 2014-01-14T12:19:57.223

1

Here's an updated fiddle which works for me (in Chrome/Windows, at least):

http://jsfiddle.net/nFHLn/4/

JavaScript:

function validDate(date, theInput) {
    var date = document.getElementById("startDate").value;
    todayDate = getTodaysDate();
    if (date > todayDate)
        theInput.value = todayDate;
}

function getTodaysDate(){
    date = new Date();
    day = date.getDate();
    month = date.getMonth() + 1;
    year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    today = year + "-" + month + "-" + day; 

    return today;
}

HTML:

<div class="entry">
    <label for="startDate">Start date:</label>
    <input id="startDate" name="startDate" type="date" oninput="validDate(this.value, this)">
</div>

edited Jan 14 '14 at 12:19

answered Jan 14 '14 at 11:05

MassivePenguin

3,701
4
24
46

It does work, yes. But that `validDate(date)` function looks little odd to me. You are not calling function with any argument. And I wanted to use this function for more than one date field on the form, not only `startDate`. – Vladimir Jan 14 '14 at 11:16
You're right; that was an error on my part. I've updated my answer (and Fiddle) to make the code more portable; you should be able to use it on different date inputs now. – MassivePenguin Jan 14 '14 at 12:21

Javascript - How to restrict html date to today's date?

2 Answers2