日期选择器开始日期&结束日期查询

Question

我有2个日期选择器(意味着应用2次)，如果我从第一次日期选择器(即开始日期)中选择特定日期，那么第二次日期选择器将禁用所有少于开始日期的日期。

​

//Date picker
$('.datepicker').datepicker({

  format: "yyyy/mm/dd",

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-sm-12">

  <div class="col-sm-6 pull-left">
    From: <input type="text" name="reg_start_date" class="datepicker" size="15" />
  </div>
  <div class="col-sm-6 pull-left">
    To: <input type="text" name="reg_end_date" class="datepicker" size="15" />
  </div>
</div>

​

更新：

   <script>
<?= $this->Html->script(array('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js','https://code.jquery.com/ui/1.11.4/jquery-ui.min.js','bootstrap/js/bootstrap.min.js','https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js','plugins/select2/select2.full.min.js','plugins/input-mask/jquery.inputmask.js','plugins/input-mask/jquery.inputmask.date.extensions.js','plugins/input-mask/jquery.inputmask.extensions.js','plugins/daterangepicker/moment.js','https://code.jquery.com/ui/1.11.4/jquery-ui.min.js', 'plugins/sparkline/jquery.sparkline.min.js', 'plugins/jvectormap/jquery-jvectormap-1.2.2.min.js', 'plugins/jvectormap/jquery-jvectormap-world-mill-en.js','plugins/knob/jquery.knob.js','plugins/daterangepicker/daterangepicker.js','plugins/datepicker/bootstrap-datepicker.js','plugins/slimScroll/jquery.slimscroll.min.js', 'plugins/fastclick/fastclick.min.js','dist/js/app.min.js','dist/js/demo.js','plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.js')); ?>


      $(function () {
       $('.second').datepicker({
            format: "yy/mm/dd" 
        });

        $('.first').datepicker({
          format: "yy/mm/dd",
          onSelect: function(date) {
            alert('124');
            var date1 = $('.first').datepicker('getDate');
            var date = new Date(Date.parse(date1));
            date.setDate(date.getDate() + 1);
            var newDate = date.toDateString();
            newDate = new Date(Date.parse(newDate));
            $('.second').datepicker("option", "minDate", newDate);
          }
        });

      });

    </script>

Answer 1

您可以在第一个文本框和第二个文本框中添加额外的类，并在使用minDate选择第一个文本框时将onSelect添加到第二个文本框。

​

$('.second').datepicker({
    dateFormat: "yy/mm/dd" 
});

$(".first").datepicker({
  dateFormat: "yy/mm/dd",
  onSelect: function(date) {
    var date1 = $('.first').datepicker('getDate');
    var date = new Date(Date.parse(date1));
    date.setDate(date.getDate() + 1);
    var newDate = date.toDateString();
    newDate = new Date(Date.parse(newDate));
    $('.second').datepicker("option", "minDate", newDate);
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-sm-12">

  <div class="col-sm-6 pull-left">
    From: <input type="text" name="reg_start_date" class="datepicker first" size="15" />
  </div>
  <div class="col-sm-6 pull-left">
    To: <input type="text" name="reg_end_date" class="datepicker second" size="15" />
  </div>
</div>

​

Answer 2

您必须在reg_start_date上创建一个侦听器。如果内容发生变化，则

reg_end_date必须与

$("#reg_end_date").datepicker({ minDate: new Date(/*date from reg_start_date*/) });

Answer 3

您将不得不向第一个数据报警器(start)中添加一个侦听器，该监听器在每次更改时都更新了第二个(end)的minDate。

就像这样：

​

var $start = $('[name="reg_start_date"]');
var $end = $('[name="reg_end_date"]');

$('.datepicker').datepicker({
  format: 'yyyy/mm/dd'
});

$start.datepicker('option', 'onClose', function(date) {
  $end.datepicker('option', 'minDate', date);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-sm-12">

  <div class="col-sm-6 pull-left">
    From: <input type="text" name="reg_start_date" class="datepicker" size="15" />
  </div>
  <div class="col-sm-6 pull-left">
    To: <input type="text" name="reg_end_date" class="datepicker" size="15" />
  </div>
</div>

​