代码之家 › 专栏 › 技术社区 › ZeroZek

引导DP日期比较

twitter-bootstrap jquery

ZeroZek · 技术社区 · 7 年前

如何将date\u from与date\u与这两个datepicker函数进行比较?

var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;

    $("#date_from").bootstrapDP({format: 'yyyy-mm-dd', endDate: '+1d'})
        .on('changeDate', function (event) {
            $("#date_from").bootstrapDP('hide')
            $($("#date_to")[0]).focus()
        });


    $("#date_to").bootstrapDP({format: 'yyyy-mm-dd', endDate: '+1d'})
                .on('changeDate', function (event) {
            $("#date_to").bootstrapDP('hide')
        });

1 回复 | 直到 7 年前

Alexander 7 年前

你可以用 date-range constructor Bootstap Datepicker的:

$('.input-daterange').datepicker();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<div class="input-group input-daterange">
    <input id="started" type="text" class="form-control" value="10/01/2017">
    <div class="input-group-addon">to</div>
    <input id="finished" type="text" class="form-control" value="10/02/2017">
</div>

如果将开始日期值设置为大于完成日期,则将自动更正完成日期值。但如果日期之间的最小差值应等于1天,则需要使用自定义 changeDate event 处理程序:

$('.input-daterange').datepicker().on('changeDate', function(e) {
  var started = $('#started').datepicker('getDate');
  var finished = $('#finished').datepicker('getDate');
  var date;
  if (started >= finished) {
    if (e.target.id == 'started') {
      date = new Date(started);
      date.setDate(started.getDate() - 1);
      $('#started').datepicker('setDate', date);
    }
    if (e.target.id == 'finished') {
      date = new Date(finished);
      date.setDate(finished.getDate() + 1);
      $('#finished').datepicker('setDate', date);
    }
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<div class="input-group input-daterange">
  <input id="started" type="text" class="form-control" value="10/01/2017">
  <div class="input-group-addon">to</div>
  <input id="finished" type="text" class="form-control" value="10/02/2017">
</div>