Morioh
Login
Franz Bosco

Franz Bosco

1 year ago

Disable Previous Date in Bootstrap Datepicker

Solution:

$('.datepicker').datepicker({

startDate: new Date()

});

index.html

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Datepicker Disable Past Dates Example - www.pakainfo.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">
<h2>Bootstrap Datepicker Disable Past Dates Example - www.pakainfo.com</h2>
<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>

Disable Previous Date in Bootstrap Datepicker

To disable previous dates in Bootstrap Datepicker, you can use the startDate option to set the earliest selectable date. Here is an example:

$(function() {
// Initialize the datepicker
$('#datepicker').datepicker({
startDate: new Date() // Set the earliest selectable date to today
});
});

In this example, we use the startDate option to set the earliest selectable date to today. This means that the user will not be able to select any date before today.

You can also use the endDate option to set the latest selectable date. For example, to disable all dates after a specific date, you can set the endDate option to that date. Here is an example:

$(function() {
// Initialize the datepicker
$('#datepicker').datepicker({
endDate: '2023-12-31' // Set the latest selectable date to December 31, 2023
});
});

In this example, we use the endDate option to set the latest selectable date to December 31, 2023. This means that the user will not be able to select any date after December 31, 2023.

You can also use the setStartDate and setEndDate methods to set the start and end dates dynamically. For example, you can set the startDate to today and the endDate to one year from today using the following code:

$(function() {
// Initialize the datepicker
var datepicker = $('#datepicker').datepicker();

// Set the earliest selectable date to today
datepicker.datepicker('setStartDate', new Date());

// Set the latest selectable date to one year from today
var endDate = new Date();
endDate.setFullYear(endDate.getFullYear() + 1);
datepicker.datepicker('setEndDate', endDate);
});

In this example, we use the setStartDate and setEndDate methods to set the start and end dates dynamically. We first initialize the datepicker and then set the earliest selectable date to today using setStartDate. We then calculate the latest selectable date, which is one year from today, and set it using setEndDate.

I hope you get an idea about jquery datepicker | disable dates before today.

#javascript #jquery #bootstrap 

Disable Previous Date in Bootstrap Datepicker
1.00 GEEK