How to disable past dates in datetime picker with example

How to disable past dates in datetime picker with example

While working on a application, we generally need to disable past dates in bootstrap datetime picker or only bootstrap date picker. Because we can not give option to select prevoius date for date field which has to be filled with upcoming dates only.

We also can say that we should validate date or datetime field. Which is must an an important feature of date picker. By which we could store only valuable data not junk in our database.

Here, i will present an example where we will disable past dates in bootstrap datetime picker.   

Actually the logic behind this is bootstrap date picker or date time picker provides an option for start date. If we initialize start date from today’s date the all previous dates will be automatically disabled.

$(function () {

    $('#datetimepicker').datetimepicker({

        minDate:new Date()

    });

});

Let’s see how can we do this through an example like below.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>How to disable past dates in bootstrap datetime picker</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>How to disable past dates in bootstrap datetime picker</h2>
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepickerDemo'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
  
<script type="text/javascript">
    $(function () {
        $('#datetimepickerDemo').datetimepicker({
            minDate:new Date()
        });
    });
</script>
  
</body>
</html>

The above example can be used in any web application. It is not any language or framework dependent. This is a simple javascript and bootstrap exaample. Hope it will help you.

You can also read the article to allow only image files for uploaading in dropzone js by clicking on the link below.

Dropzone JS allow Only Image files to Upload