Question

我在同一页面上有两个日期选择器，第一个（开始日期）我想要禁用我之前设定的所有日期。第二个datepicker（结束日期）我希望它禁用从第一个日期选择器被选中时的所有先前日期。

我已获得以下代码：

开始日期 - 这是按预期工作的。

<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脚本，我认为如果你编写脚本两次会有些复杂，你可以只编写一次脚本，例如，请看下面的代码片段。

我认为它会对你有所帮助。

$( 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>

Bootstrap datepicker禁用日期

1 个答案: