Restrict future dates in HTML5 date input

by

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

More Related Contents:

  1. Why we have to write robots.txt in website application? [closed]
  2. How long can a background-image be?
  3. How do I properly escape quotes inside HTML attributes?
  4. Can I use div as a direct child of UL?
  5. How to escape hash character in URL
  6. Add centered text to the middle of a horizontal rule [duplicate]
  7. Make page to tell browser not to cache/preserve input values
  8. text-overflow is not working when using display:flex
  9. What’s the difference between ” ” and ” “?
  10. Why are iframes considered dangerous and a security risk?
  11. CSS Float: Floating an image to the left of the text
  12. Add line break within tooltips
  13. Why doesn’t “margin: auto” center an element vertically?
  14. Do HTML5 Script tag need type=”javascript”? [duplicate]
  15. Table row won’t contain elements with position:absolute
  16. How to create a Slanted Background with CSS? [duplicate]
  17. Display Adobe pdf inside a div
  18. Vertical Alignment of text in a table cell
  19. How to use an tag inside a in the middle of a text? [duplicate]
  20. Table overflowing outside of div
  21. HTML number input min and max not working properly
  22. How to handle xml/html in git feature branch workflow?
  23. Angular4 – Scrolling to anchor
  24. How to curve the div from bottom with image background
  25. Can I use an HTML input type “date” to collect only a year?
  26. Removing the Bevel Effect on the Corner of Borders
  27. CSS class starting with number is not getting applied
  28. How to parse HTML table with Powershell Core 7?
  29. How to set a percentage height value in HTML/CSS
  30. Are void elements and empty elements the same?

Leave a Comment