How to disable past date in Bootstrap Datepicker

Question

I want to disable past date while picking date in Bootstrap datepicker.

In the documentation(Bootstrap Datepicker), I didn't find exactly how to disable past date.

I tried something like these but it didn't work for me.

$(document).ready(function(){
    var todayTmp=new Date();
    var today=new Date(todayTmp.getFullYear(), todayTmp.getMonth(), todayTmp.getDate(), 0, 0, 0, 0);

    $('#vDate').datepicker({
        onRender: function(date){
            return date.valueOf() < today.valueOf() ? 'disabled' : '';
        }
    });
});

How to fix it ?

Yes looks like duplicate of the above link. The simplest solution is `$('#vDate').datetimepicker({ minDate: moment(), });` I pass more options to mine but this example fits on one line so just putting the relevant one. Got this answer from someone else on the link but it was hard to spot! — user7247147, Dec 26 '19 at 05:21

score 0 · Answer 1 · answered Dec 02 '17 at 10:29

Try this and use startDate: new Date() for disable past date.

 $('#datetimepicker1').datepicker({
  todayHighlight: true,
  format: 'dd/mm/yyyy',
  startDate: new Date()   
 });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<div class="container">
    <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>        
    </div>
</div>

This does not appear to work in BS4. However, "minDate" rather than "startDate" does work. — Apolymoxic, Oct 27 '21 at 17:37

How to disable past date in Bootstrap Datepicker

1 Answers1