How to disable previous dates in Input date type in HTML

by Anuj Kumar

We can disable the previous date in the Input date type using javascript. First Create an Input field with the date type.

<input type="date" id="inputdate" name="inputdate">

1	<input type="date" id="inputdate" name="inputdate">

Javascript Code

<script>
$(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;
    alert(maxDate);
    $('#inputdate').attr('min', maxDate);
});
</script>

$(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;

alert(maxDate);

$('#inputdate').attr('min', maxDate);

});

</script>

Here the full code that is written in this tutorial

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to disable previous dates in Input date type in HTML</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="date" id="inputdate" name="inputdate">

</body>
<script type="text/javascript">
$(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;
    $('#inputdate').attr('min', maxDate);
});
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>How to disable previous dates in Input date type in HTML</title>

</head>

<body>

</body>

$(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;

$('#inputdate').attr('min', maxDate);

});

</script>

</html>

Demo

How to disable previous dates in Input date type in HTML

How to disable previous dates in Input date type in HTML

Demo

You may also like...

HTML Maintenance Page

HTML-Marquees

HTML-Embed Multimedia

HTML-Fonts

HTML-Colors

HTML-Backgrounds

HTML – Blocks