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

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

＆＃13;

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());
});

＆＃13;

<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">

＆＃13;

Answer 2

建议的答案是正确的主意，但这是针对jQuery datepicker的，而不是引导日期选择器。 Bootstrap datepicker (1.9.0)的工作方式如下：

$("#dateStart").datepicker( {
    //settings
    startDate: new Date('2016-02-02'),
    endDate: new Date()
}).on('changeDate', function(ev) {
    //Get actual date objects from both
    var dt1 = $('#dateStart').data('datepicker').viewDate;
    var dt2 = $('#dateEnd').data('datepicker').viewDate;
    if (dt2 < dt1) {
        //If #dateEnd is before #dateStart, set #dateEnd to #dateStart
        $('#dateEnd').datepicker('update', $('#dateStart').val());
    }
    //Always limit #dateEnd's starting date to #dateStart's value
    $('#dateEnd').datepicker('setStartDate', $('#dateStart').val());
});

$("#endStart").datepicker( {
    //settings
    startDate: $('#dateStart').val(),
    endDate: new Date()
})

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

2 个答案: