Disable date before current date in JQuery UI datepicker

Question

I want to disable the date before current date in date picker. How to do this?

$(function() {
  var $dp1 = $("#datepicker1");
  $(document).ready(function() {
    $dp1.datepicker({
      changeYear: true,
      changeMonth: true,
      dateFormat: "yy-m-dd",
      yearRange: "-100:+20",
    });
  });
});

$(function() {
  var $dp2 = $("#datepicker2");
  $(document).ready(function() {
    $dp2.datepicker({
      changeYear: true,
      changeMonth: true,
      yearRange: "-100:+20",
      dateFormat: "yy-m-dd",
    });
  });
});

p.pfield-wrapper input {
  float: right;
}
p.pfield-wrapper::after {
  content: "\00a0\00a0 "; /* keeps spacing consistent */
  float: right;
}
p.required-field::after {
  content: "*";
  float: right;
  margin-left: -3%;
  color: red;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<p class="pfield-wrapper required-field">
  <label>Start Date</label>
  <input id="datepicker1" type="text" name="s" style="width:155px;" required value="">
</p>
<p class="p">End Date
  <input id="datepicker2" type="text" name="e" style="width:155px;" value="">
</p>

Equivalent JsFiddle

Answer 1

Use the minDate property in JQuery UI datepicker API.

$(function() {
  var $dp1 = $("#datepicker1");
  $dp1.datepicker({
    changeYear: true,
    changeMonth: true,
      minDate:0,
    dateFormat: "yy-m-dd",
    yearRange: "-100:+20",
  });

  var $dp2 = $("#datepicker2");
  $dp2.datepicker({
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+20",
    dateFormat: "yy-m-dd",
  });
});

$(function() {
  var $dp1 = $("#datepicker1");
  $dp1.datepicker({
    changeYear: true,
    changeMonth: true,
    minDate: 0,
    dateFormat: "yy-m-dd",
    yearRange: "-100:+20",
  });

  var $dp2 = $("#datepicker2");
  $dp2.datepicker({
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+20",
    dateFormat: "yy-m-dd",
  });
});

p.pfield-wrapper input {
  float: right;
}
p.pfield-wrapper::after {
  content: "\00a0\00a0 "; /* keeps spacing consistent */
  float: right;
}
p.required-field::after {
  content: "*";
  float: right;
  margin-left: -3%;
  color: red;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<p class="pfield-wrapper required-field">
  <label>Start Date</label>
  <input id="datepicker1" type="text" name="s" style="width:155px;" required value="">
</p>
<p class="p">End Date
  <input id="datepicker2" type="text" name="e" style="width:155px;" value="">
</p>

Equivalent JsFiddle

Also note that you need to use only one document ready event in your script.

Answer 2

You can use the minDate option

    $dp1.datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: "yy-m-dd",
        yearRange: "-100:+20",
        minDate: '0'
    });

Demo: Fiddle