how to Disable Previous Date in Bootstrap Datepicker?

By Hardik Savani | July 5, 2020 | Category : Bootstrap


Today, bootstrap datepicker disable past dates is our main topic. Here you will learn how to disable past date in bootstrap datepicker. it's simple example of how to disable previous date in bootstrap datepicker. this example will help you how to disable previous date in bootstrap datepicker using jquery. Let's see bellow example how to disable past date in datepicker using bootstrap.

i will give you simple solution of how to disable past dates from today in bootstrap datepicker. we normally use bootstrap datepicker when you need to use datepicker with bootstrap 4 project theme. if you need to disable past dates then you can do it easily.

bootstrap datepicker provide option to "startdate" when you can set today date so it will no available last dates. so let's see bellow solution and full example.

Preview:

Solution:

$('.datepicker').datepicker({

startDate: new Date()

});

Example:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Datepicker Disable Past Dates Example - itsolutionstuff.com/</title>

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

<h1>Bootstrap Datepicker Disable Past Dates Example - itsolutionstuff.com</h1>

<strong>Current Date is 5/7/2020</strong>

<input type="text" name="date" class="form-control datepicker" autocomplete="off">

</div>

</body>

<script type="text/javascript">

$('.datepicker').datepicker({

startDate: new Date()

});

</script>

</html>

i hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: