HTML Date Picker

Question

I am currently using the date input for an HTML form;

Expiry Date: <input type="date" name="expire" title="Please enter expiry date" required/>

It's for a client-side website. From this, how would I be able to make it so that the user can only select days after the current date? I don't want to have to code in the date, I want it to be able to detect the date maybe if possible?

you would likely have to add some javascript validation if you are not planning to use some pre-built ones like [jqueryui datepicker](http://jqueryui.com/datepicker/#min-max) — happymacarts, Dec 20 '16 at 19:21

Dai · Answer 1 · 2016-12-20T19:29:33.980

The <input type="date" /> element has the min and max attributes which can be used to specify an optional minimum and maximum date range. The value must be specified in ISO-8601 format (yyyy-MM-dd):

<input type="date" min="2016-10-01" max="2017-01-01" />

There doesn't seem to be a magic value such as "today", so you must set the value either on the server-side or using JavaScript:

window.addEventListener('DOMContentLoaded', restrictDateInputs );

function restrictDateInputs(e) {
    var today = ( new Date() ).toISOString().substring( 10 );
    var inputs = document.querySelectorAll('input[type=date].minToday');
    for( var i = 0; i < inputs.length; i++ ) {
        inputs[i].min = today;
    }
}

The above code sets the min attribute value on page-load for all date inputs with class="minToday". Adjust as per your requirements.

Remember that client-side logic will not guarantee that invalid data will not be sent to any data-processing code (either client-side or server-side), so always sanitize, validate and verify (in that order) any input you receive from a user.

Note that <input type="date" /> is still not fully supported by all desktop browsers, in particular Internet Explorer 11 and even recent versions of Firefox.

Note that *toISOString* uses UTC date so for some users will appear to be yesterday and for others it may be tomorrow. — RobG, Dec 21 '16 at 04:39

HTML Date Picker

1 Answers1