Restrict Future Dates in HTML5 Date Input

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

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" />

How to disable future dates after a week in input type = date?

Please see the updated code.

[after how many number of days to be disabled i.e. 6 in this case] * 24 * 60 * 60 * 1000

min and max attributes are used to set the minimum and maximum date for type="date"

function validDate(){     var today = new Date().toISOString().split('T')[0];     var nextWeekDate = new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]      document.getElementsByName("date")[0].setAttribute('min', today);      document.getElementsByName("date")[0].setAttribute('max', nextWeekDate) }

<body onload="validDate()"><div class="form-group">            <p>Date<span>*</span></p>            <input type="date" name="date" id="date" class="form-control input-sm " required />          </div></body>

I want to Disable certain Future Dates of html date picker (input type= date ) using PHP and mysql

Here is a demo. This uses Bootstrap datepicker and jquery.
Also, I have mentioned in the comment inside the code on where to use php

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
   
<div class="container">
    <input type="text" name="date" class="form-control datepicker" autocomplete="off">
</div>
   
</body>
  
<script type="text/javascript">
    // This can come from php
    // var disableDates = [<?php //echo $your_variables_from_php_mysql_printed_in_the_format_below; ?>]
    var disableDates = ["7-7-2020", "14-7-2020", "15-7-2020","27-7-2020"];
      
    $('.datepicker').datepicker({
        format: 'mm/dd/yyyy',
        beforeShowDay: function(date){
            dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
            if(disableDates.indexOf(dmy) != -1){
                return false;
            }
            else{
                return true;
            }
        }
    });
</script>
</html>

How to stop user from typing in future dates in date type input in angular

There is a problem with html input type date element when we restrict user by setting maximum attribute as this does not let users to select date from calendar drop-down but still users can type in undesired values using keyboard. So this is the hack, I have used to cope with this problem

Declare a boolean to check if date is invalid.
futureDateError: boolean;

Declare a method to check if input date is valid.

checkDateValidity(date: string): boolean
{

    const mxDate = new Date(this.maxDate);
    const inputDate = new Date(date);

    if (inputDate > mxDate) {
      return this.futureDateError = true;
    }
    return this.futureDateError = false;

}

Bind this method with (change) event.
Show errors when date is invalid and don't submit form.
Date must not be in future
if (this.checkDateValidity(this.Datebillabuse)) {
return;
}

Restrict Future Dates in HTML5 Date Input