引导日期选择器禁用日期

Question

我在同一页面上有两个日期选择器，第一个（开始日期）我想禁用所有以前的日期，我已经设法做到了。第二个日期选择器（结束日期）我希望它从选择第一个日期选择器时禁用所有以前的日期。

我有以下代码：

开始日期 - 正在按预期工作。

<div class="field">
<%= form.label :startDate %>
<%= form.text_field :startDate, {class: "form-control custom datepicker"}%> 
    <script type="text/javascript">
      $(".datepicker").attr('readOnly', 'true');
          $(document).ready(function(){
          $('.datepicker').datepicker({
            minDate: 0,
            yearRange : '+0:+1',
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            autoclose: true});
          });
        </script>
</div>

结束日期 - 我希望它禁用从选择开始日期开始的所有以前的日期

<div class="field">
<%= form.label :endDate %>
<%= form.text_field :endDate, {class: "form-control custom date"}%> 
 <script type="text/javascript">
      $(".date").attr('readOnly', 'true');
          $(document).ready(function(){
          $('.date').datepicker({
            minDate: 0 ,
            yearRange : '+0:+1',
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            autoclose: true});
          });
        </script>
</div>

我还有另一个日期选择器，它一直选择今天的日期我不希望它这样做我如何禁用它？这个日期选择器可以追溯到它显示 1948 年的 70 年，但是选择了今天的日期，因此如果用户选择一个日期而不更改年份或月份，它会选择今天的日期。

提前感谢您的帮助。

Answer 1

JS脚本不需要写两次，我觉得如果写两次脚本会有些复杂，你可以这样只写一次脚本，比如sn-ps下面这个。

我想它会对你有所帮助。

$( document ).ready(function() {
$( function($) {
  var dateToday = new Date();
  var dates = $("#start-date, #end-date").datepicker({
    defaultDate: "+2d",
    changeMonth: true,
    numberOfMonths: 1,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "start-date" ? "minDate" : "maxDate",
        instance = $(this).data("datepicker"),
        date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
  });
});
});

 label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 700;
}
.form-control {
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.book-now-form {
  padding-top: 10px;  
}
.book-now-form .form-group {
    margin-right: 1.5em;
}
.book-now-form label {
    font-size: 13px;
    display: block;
    color: #fff;
    padding-top: 5px;
}
.book-now-form .form-control {
    height: 25px;
    line-height: 25px;
    background: white;
    display: block;
    font-size: 12px;
    color: #969696;
    padding: 4px 6px;
}
.book-now-form #start-date, .book-now-form #end-date {
    padding-right: 22px;
    background: url(https://www.solodev.com/assets/booking-form/icon_calendar.png) no-repeat scroll 98% center rgb(255, 255, 255);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

 <form class="form book-now-form" role="form" id="widget_booking_form" name="widget_booking_form" >
    <input id="campaign" type="hidden" value="visitflagler_topNavWidget" name="campaign"> <input id="clone_id" type="hidden" value="278" name="clone_id">
    <!--check in element-->
    <div class="form-group">
       <label for="check-in">Check In</label> <!-- <input type="textfield" class="form-control" id="check-in" placeholder="12.20.2014"> -->
       <input type="text"  class="form-control" id="start-date" name="start-date" placeholder="mm/dd/yyyy">
    </div>
    <!--check out element-->
    <div class="form-group">
       <label for="check-out">Check Out</label> <!-- <input type="textfield" class="form-control" id="check-out" placeholder="12.27.2014"> -->
       <input type="text" class="form-control" id="end-date" name="end-date" placeholder="mm/dd/yyyy" >
    </div>
    <!--submit-->
    <div class="form-group">
       <button name="Submit" href="#" class="btn btn-sm btn-success">Submit</button>
    </div>
 </form>