开始日期不应大于结束日期引导日期选择器

Question

我需要禁用过去的日期,也不应该允许选择小于开始日期的结束日期和大于结束日期的开始日期.

*css included*
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker3.css') }}">

HTML包含 这是我的laravel项目.

<div class="col-lg-4 col-md-3">
    <div class='input-group date' data-provide="datepicker" id='fromdatepicker' >
        {!! Form::text('from_date', null,['id' => 'from_date', 'class' => 'form-control', 'placeholder'=> '-From Date-']) !!}
        <span class="input-group-addon">
            <span class="calendar-icon-bg"> </span>
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
     </div>
</div>
<div class="col-lg-4 col-md-3">
    <div class='input-group date' data-provide="datepicker" id='todatepicker' >
        {!! Form::text('to_date', null,['id' => 'to_date', 'class' => 'form-control', 'placeholder'=> '-To Date-']) !!}
         <span class="input-group-addon">
             <span class="calendar-icon-bg"></span>
             <i class="glyphicon glyphicon-calendar"></i>
         </span>
     </div>
</div>

JS

<script src="{{ asset('assets/js/bootstrap-datepicker.js') }}"></script>
<script>
$(function () {
    var nowDate = new Date();
    var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
    $("#fromdatepicker").datepicker({
        startDate: today,
        autoclose: true,
        numberOfMonths: 1,
        onSelected: function(selected) {
            $("#todatepicker").datepicker("option","minDate", selected)
        }
  });
  $("#todatepicker").datepicker({
      autoclose: true,
      numberOfMonths: 1,
      onSelected: function(selected) {
          $("#fromdatepicker").datepicker("option","maxDate", selected)
      }
  });  
});
</script>

请帮我.

Answer 1

这是一个基于您的要求的简单示例.结束日期永远不会相同或在开始日期之前.过去的日期被禁用.

function populateEndDate() {
  var date2 = $('#dateStart').datepicker('getDate');
  date2.setDate(date2.getDate() + 1);
  $('#dateEnd').datepicker('setDate', date2);
  $("#dateEnd").datepicker("option", "minDate", date2);
}

$(document).ready(function() {

  $("#dateStart").datepicker({
    dateFormat: "dd-M-yy",
    minDate: 'dateToday',
    onSelect: function(date) {
      populateEndDate();
    }
  }).datepicker("setDate", new Date());
  $('#dateEnd').datepicker({
    dateFormat: "dd-M-yy",
    minDate: 1,
    onClose: function() {
      var dt1 = $('#dateStart').datepicker('getDate');
      var dt2 = $('#dateEnd').datepicker('getDate');
      if (dt2 <= dt1) {
        var minDate = $('#dateEnd').datepicker('option', 'minDate');
        $('#dateEnd').datepicker('setDate', minDate);
      }
    }
  }).datepicker("setDate", new Date());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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.css" rel="stylesheet" />

<label for="">start</label>
<input type="text" class="form-control" id="dateStart" name="start">
<label for="">end</label>
<input type="text" class="form-control" id="dateEnd" name="end">