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

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

您必须在 reg_start_date 上创建侦听器。如果内容发生变化，
的日期选择器 reg_end_date 必须设置为

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

Answer 2

您可以在第一个和第二个文本框上添加额外的 class，并在第一个文本框为 select 时使用 onSelect 为第二个文本框提供 minDate。

$('.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 3

您必须向第一个日期选择器（开始）添加一个侦听器，该侦听器在每次更改时更新第二个（结束）的 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>

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

date picker start date & end date query

jquery

datepicker

jquery-ui-datepicker