Bootstrap datepicker disable past dates Example

Today, We want to share with you bootstrap datepicker disable past dates.In this post we will show you datetimepicker disable past dates and time, hear for how to set bootstrap datetimepicker deactivate past dates and time we will give you demo and example for implement.In this post, we will learn about Bootstrap Datetimepicker deactivate Dates Dynamically with an example.

Read Also:  VueJS onload Function Call Example with Demo

Bootstrap Datepicker Disable Past Dates Example

Solution:-

$('.datepicker').datepicker({ 
    startDate: new Date()
});	

jquery datepicker disable dates
jquery datepicker disable dates

Example 1: index.html
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Datepicker deactivate Past Dates Example - 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 deactivate Past Dates Example - pakainfo.com/</h2>
    <input type="text" name="date" class="form-control datepicker" autocomplete="off">
</div>
  
</body>
   
<script type="text/javascript">

$('.datepicker').datepicker({ 
    startDate: new Date()
});
</script>
</html>

Bootstrap Datetimepicker Disable Past Dates And Time Example

Example 2: index.html

<!DOCTYPE html>
<html>
<head>
    <title>datetimepicker deactivate past dates and time - pakainfo.com</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
    <h2>datetimepicker deactivate past dates and time - pakainfo.com</h2>
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker({
                    minDate:new Date()
                });
            });
        </script>
    </div>
</div>
</body>
</html>

I hope you get an idea about bootstrap datepicker deactivate specific dates.
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.

Read Also:  Authentication registration and Secure login System using php

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  how to disable previous date in bootstrap datepicker?
  2. Read Also:  Angular 9/8 Material Select Box Examples
  3. Read Also:  Bootstrap datepicker Disable Dates Dynamically in jQuery
  4. Read Also:  how to get selected row value in html table using javascript?
  5. Read Also:  How to remove spaces from string using JQuery?
  6. Read Also:  how to disable previous date in bootstrap datepicker?
  7. Read Also:  VueJS Hello World First Application
  8. Read Also:  php array remove keys keep values example
  9. Read Also:  Bootstrap Datetimepicker Disable Dates Dynamically
  10. Read Also:  Get all eloquent query log using Laravel 7/6 example
CLOSEX