JQuery 日期选择器无法禁用以前的日期

Question

I'm using jQuery date picker in my PHP site. It's working properly, but I want to disable previous date from it. I tried every settings I can but unable to disable it.

<center><div class="card shadow mb-4 col-xs-12 col-md-8 border-bottom-primary">
  <div class="card-header py-3">
    <h4 class="m-2 font-weight-bold text-primary">Add Employee</h4>
  </div>
  <a href="employee.php?action=add" type="button" class="btn btn-primary bg-gradient-primary">Back</a>
  <div class="card-body">
    <div class="table-responsive">
      <form role="form" method="post" action="emp_transac.php?action=add">

        <div class="form-group">
          <input class="form-control" placeholder="First Name" name="firstname" required>
        </div>
        <div class="form-group">
          <input class="form-control" placeholder="Last Name" name="lastname" required>
        </div>
        <div class="form-group">
          <input class="form-control" type="email" id="email" placeholder="Email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
        </div>
        <div class="form-group">
          <input class="form-control" placeholder="Phone Number" name="phonenumber" required>
        </div>
        <div class="form-group">
          <?php
                                echo $opt;
                              ?>
        </div>
        <div class="form-group">
          <input type="date" id="FromDate" name="hireddate" value="yyyy-MM-dd" class="form-control" />
        </div>
        <div class="form-group">
          <select class="form-control" id="province" placeholder="Province" name="province" required></select>
        </div>
        <div class="form-group">
          <select class="form-control" id="city" placeholder="City" name="city" required></select>
        </div>
        <hr>
        <button type="submit" class="btn btn-success btn-block"><i class="fa fa-check fa-fw"></i>Save</button>
        <button type="reset" class="btn btn-danger btn-block"><i class="fa fa-times fa-fw"></i>Reset</button>

      </form>  
    </div>
  </div>
</div></center>

jQuery( document ).ready( function ( e ) {
  if ( jQuery( '.your-date-picker-selector' ).length ) {
    jQuery.datepicker.setDefaults({
      minDate: 0,
      maxDate: "+12m"
    });
  }
});

Answer 1

I'm an idiot. I forgot to include the jQuery(UI) js and css. It should be working now with.datepicker.min/ minDate. Here is the working snippet I think you're looking for. :/

 $("#datepicker").datepicker({ minDate: 0, maxDate: '+12m'});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <input type="text" id="datepicker">