ItSolutionStuff.com

how to Disable Previous Date in Bootstrap Datepicker?

By Hardik Savani • September 6, 2020
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

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Bootstrap Datepicker Disable Saturday and Sunday Example

Read Now →

Bootstrap Datepicker Trigger Change Event Example

Read Now →

Bootstrap Datepicker Get Date on Change Event Example

Read Now →

Bootstrap Year Picker using Datepicker JS Example

Read Now →

How to Change View Mode in Bootstrap Datepicker Like yyyy-mm?

Read Now →

JQuery Datepicker Example using JQuery UI JS

Read Now →

Bootstrap Datepicker Change Date Format Example

Read Now →

How to use Datepicker in Bootstrap?

Read Now →