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

    
        
        
        
        
        
        
    

    

    
Bootstrap Datepicker Disable Past Dates Example - www.pakainfo.com
    Current Date is 5/7/2020
    

    

     

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