Disable past dates in bootstrap date picker

Question

I have used the date input form derived from:

Youderian, C. How to Add a Date Picker to a Bootstrap Form. FormDen. [Blog]. 2015-10-27.

But I am unable to disable the past dates. I tried the following; according to an issue in GitHub, but it didn't work for me.

$(document).ready(function() {
  var date_input = $('input[name="date"]'); //our date input has the name "date"
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
  date_input.datepicker({
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
  })
})
$(function() {
  var nowDate = new Date();
  var today = new Date(nowDate.getFullYear(), nowDate.getMonth(),
    nowDate.getDate(), 0, 0, 0, 0);
  $('#date').datepicker({
    startDate: today
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="bootstrap-iso">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <form class="form-horizontal" method="post">
          <div class="form-group ">
            <label class="control-label col-sm-2" for="date">
              Date
            </label>
            <div class="col-sm-10">
              <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button class="btn btn-primary " name="submit" type="submit">
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Possible duplicate of [How to restrict the selectable date ranges in Bootstrap Datepicker?](http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker) — Louys Patrice Bessette, Dec 28 '16 at 16:59

score 6 · Accepted Answer · answered Dec 28 '16 at 17:19

You can either add startDate to the config when you first convert it to a date-picker field or you can set the property using setStartDate.

Pick any of the two.

$(document).ready(function() {
  var dateInput = $('input[name="date"]'); // Our date input has the name "date"
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : 'body';
  dateInput.datepicker({
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: truncateDate(new Date()) // <-- THIS WORKS
  });

  $('#date').datepicker('setStartDate', truncateDate(new Date())); // <-- SO DOES THIS
});

function truncateDate(date) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="bootstrap-iso">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <form class="form-horizontal" method="post">
          <div class="form-group ">
            <label class="control-label col-sm-2" for="date">
              Date
            </label>
            <div class="col-sm-10">
              <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button class="btn btn-primary " name="submit" type="submit">
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

You can use startDate and endDate e.g. '+2d', '-2m'

In your CodePen link:

date_input.datepicker({
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: '-2d',
    endDate: '+2d'
})

How to restrict the selectable date ranges in Bootstrap Datepicker?

edited May 23 '17 at 12:33

Community

1
1

answered Dec 28 '16 at 16:54

G0dsquad

4,230
1
17
22

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

jQuery Date Picker - disable past dates

Here is the link that will help you.

You can do this by mindate and maxdate.

edited May 23 '17 at 11:53

Community

1
1

answered Dec 28 '16 at 16:53

Info Truth

101
1

Wouldn't you mark to close this using that link instead? – Mr. Polywhirl Dec 28 '16 at 16:59
2

This doesn't appear to work for Bootstrap datepicker. – G0dsquad Dec 28 '16 at 17:01
@Mr.Polywhirl, does he has permissions for close question with this rate? – demo Dec 28 '16 at 17:13
http://code.runnable.com/WGPyKBHyWd8dnl4G/output Check this for bootstrap date picker. date.setDate(date.getDate()-1); $('#example1').datepicker({ startDate: date }); – Info Truth Dec 28 '16 at 17:13

score 0 · Answer 4 · answered Dec 28 '16 at 16:57

0

you can disable the past dates by setting startDate property. No need for separate function.

date_input.datepicker({
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: new Date()
})

answered Dec 28 '16 at 16:57

Jayakrishnan

4,232
2
23
35

score 0 · Answer 5 · answered Dec 28 '16 at 17:39

0

Try with ease : Use minDate

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$('#date').datepicker({ 
    minDate: today
});

answered Dec 28 '16 at 17:39

Lakhan

12,328
3
19
28

He is using Bootstrap datepicker not jQuery datepicker so minDate is not going to work... – Miguel Flores Dec 28 '16 at 22:36

Disable past dates in bootstrap date picker

5 Answers5