Bootstrap Datepicker Disable future Dates Example

In this article, we will explain to you how to disable future dates in bootstrap Datepicker.

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

Please follow and like us:

Recommended Posts: