how to disable previous date in bootstrap datepicker?

Today, We want to share with you how to disable previous date in bootstrap datepicker.In this post we will show you disable future dates in bootstrap datepicker, hear for bootstrap-datetimepicker disable past time we will give you demo and example for implement.In this post, we will learn about Bootstrap datepicker Disable Past Dates And Time with an example.

how to 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.

Also Read This ๐Ÿ‘‰   Background Animation Sliders Without jquery

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.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.