How to disable specific Dates in Bootstrap Datepicker

April 2, 2020 XpertPhp Comments 0 Comment

In this article, we will explain to you how to disable specific Dates in bootstrap Datepicker.

Here, in this example, we will disable specific dates using the before show day parameter. so you can see the below example.

<!DOCTYPE html>
<html>
<head>
    <title>How to disable specific Dates in Bootstrap Datepicker - 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 disableSpecificDates = ["11-4-2020", "13-4-2020", "15-4-2020","17-4-2020"];
				$('#datepicker1').datepicker({
					format: 'mm/dd/yyyy',
					beforeShowDay: function(date){
						dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
						if(disableSpecificDates.indexOf(dmy) != -1){
							return false;
						}
						else{
							return true;
						}
					}
				});
				$('#datepicker1').datepicker("setDate", new Date());
            });
        </script>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>How to disable specific Dates in Bootstrap Datepicker - XpertPhp</title>

</head>

<body>

</span>

</div>

$(function () {

var disableSpecificDates = ["11-4-2020", "13-4-2020", "15-4-2020","17-4-2020"];

$('#datepicker1').datepicker({

format: 'mm/dd/yyyy',

beforeShowDay: function(date){

dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();

if(disableSpecificDates.indexOf(dmy) != -1){

return false;

}

else{

return true;

}

});

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

});

</script>

</div>

</body>

</html>

Show Demo