Bootstrap Datepicker Disable future Dates Example

April 1, 2020 XpertPhp Comments 0 Comment

In this article, we will explain to you how to disable future dates in bootstrap Datepicker(Bootstrap Datepicker Disable future Dates Example).

here, in this example, we will disable the past dates using the endDate parameter. so you can see the below example.

<head>
    <title>Bootstrap Datepicker Disable Future Dates Example - XpertPhp</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class='col-lg-6'>
            <div class="form-group">
                <div class='input-group date' id='datepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
				var date = new Date();
				date.setDate(date.getDate());
				
                $('#datepicker1').datepicker({
					endDate: date,
                });
				$('#datepicker1').datepicker("setDate", new Date());
            });
        </script>
    </div>
</div>
</body>
</html>

<head>

<title>Bootstrap Datepicker Disable Future Dates Example - XpertPhp</title>

</head>

<body>

</span>

</div>

$(function () {

var date = new Date();

date.setDate(date.getDate());

$('#datepicker1').datepicker({

endDate: date,

});

$('#datepicker1').datepicker("setDate", new Date());

});

</script>

</div>

</body>

</html>

Show Demo