How to Add Validation/Restrictions for HTML5 Date Field Without Jquery/Javascript

How to add validation/restrictions for HTML5 date field without jquery/javascript

You can use min and max attributes on your date input.

Spec : http://www.w3.org/TR/html-markup/input.date.html

Edit :

Afaik, there is no way to disable specific days using HTML5 date input...
If you want to be cross-browser, use Modernizr and provide a fallback for old browsers (for example jQuery datePicker) : http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

Restrict future dates in HTML5 date input

You can use min and max attributes of HTML5 input date

HTML5 code

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

EDIT

You need to use jQuery to achieve it

jQuery code

$(function(){
    var dtToday = new Date();

    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();

    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();

    var maxDate = year + '-' + month + '-' + day;    
    $('#txtDate').attr('max', maxDate);
});

Explanation
max attribute of HTML5 input date takes month and day in double digit format.

Ex: 5 (Month) is not valid whereas 05 (Month) is valid
Ex: 1 (Day) is not valid whereas 01 (Day) is valid

So I have added below code

if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

Check my updated fiddle

Refer fiddle demo

Limiting date range in HTML 5

Use the min and max attributes:

<label>Enter a date before 1989-10-30:</label><input type="date" name="myDate" max="1989-10-29">
<label>Enter a date after 2001-01-01:</label><input type="date" name="myDate" min="2001-01-02">

Prevent user from keying date into HTML5 date field

Like this:

Javascript/Jquery:

$("input").keydown(false);

HTML:

<input type="Date" />

See the Demo.

Hope this helps.

How do I restrict past dates in HTML5 input type Date?

You can try this

 var maxDate = year + '-' + month + '-' + day;
    alert(maxDate);
    $('#txtDate').attr('min', maxDate);

$(function(){
    var dtToday = new Date();
    
    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();
    
    var maxDate = year + '-' + month + '-' + day;

    // or instead:
    // var maxDate = dtToday.toISOString().substr(0, 10);

    alert(maxDate);
    $('#txtDate').attr('min', maxDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />

Validation of Html 5 Datepicker

You don't need JS to accomplish that: There is attr min on html5:

<input type="date" name="from" id="myDate" value="demo" min="2016-10-13">

To update it to the current date, I use todayDate():

$(document).ready(function(){
    $('#myDate').attr('min', todayDate());
});

function todayDate() {    var today = new Date(); // get the current date    var dd = today.getDate(); //get the day from today.    var mm = today.getMonth()+1; //get the month from today +1 because january is 0!    var yyyy = today.getFullYear(); //get the year from today
    //if day is below 10, add a zero before (ex: 9 -> 09)    if(dd<10) {        dd='0'+dd    }
    //like the day, do the same to month (3->03)    if(mm<10) {        mm='0'+mm    }
    //finally join yyyy mm and dd with a "-" between then    return yyyy+'-'+mm+'-'+dd;}$(document).ready(function(){    $('#myDate').attr('min', todayDate());});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><body><form name="f2" action="payment.jsp" method="get" >            <label> Date:</label><br>            From:<input type="date" name="from" id="myDate" value="demo" min="2016-10-13">            Till:<input type="date" name="till" id="myDate1" value="demo1"><br>    </body>  </html>

Set custom HTML5 required field validation message

Code snippet

Since this answer got very much attention, here is a nice configurable snippet I came up with:

/**
  * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
  * @link https://stackoverflow.com/a/16069817/603003
  * @license MIT 2013-2015 ComFreek
  * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
  * You MUST retain this license header!
  */
(function (exports) {
    function valOrFunction(val, ctx, args) {
        if (typeof val == "function") {
            return val.apply(ctx, args);
        } else {
            return val;
        }
    }

    function InvalidInputHelper(input, options) {
        input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));

        function changeOrInput() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
                input.setCustomValidity("");
            }
        }

        function invalid() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
               input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
            }
        }

        input.addEventListener("change", changeOrInput);
        input.addEventListener("input", changeOrInput);
        input.addEventListener("invalid", invalid);
    }
    exports.InvalidInputHelper = InvalidInputHelper;
})(window);

Usage

→ jsFiddle

<input id="email" type="email" required="required" />

InvalidInputHelper(document.getElementById("email"), {
  defaultText: "Please enter an email address!",

  emptyText: "Please enter an email address!",

  invalidText: function (input) {
    return 'The email address "' + input.value + '" is invalid!';
  }
});

More details

defaultText is displayed initially
emptyText is displayed when the input is empty (was cleared)
invalidText is displayed when the input is marked as invalid by the browser (for example when it's not a valid email address)

You can either assign a string or a function to each of the three properties.

If you assign a function, it can accept a reference to the input element (DOM node) and it must return a string which is then displayed as the error message.

Compatibility

Tested in:

Chrome Canary 47.0.2
IE 11
Microsoft Edge (using the up-to-date version as of 28/08/2015)
Firefox 40.0.3
Opera 31.0

Old answer

You can see the old revision here: https://stackoverflow.com/revisions/16069817/6

How to Add Validation/Restrictions for HTML5 Date Field Without Jquery/Javascript