javascript - DateRangePicker - 从第一个输入选定值开始的第二个输入的最小日期

Question

我正在使用 DateRangePicker选择日期的插件。

选择器工作正常 - 但我们需要的行为是 MultiCityTripTwo 的 mindate 应该是 MultiCityTripOne 的选定值。

谁能提出解决方案？

HTML:

<input class="form-control input-lg" id="multiCityTripInputOne" name="MulticityTripOne" />

<input class="form-control input-lg" id="multiCityTripInputTwo" name="MulticityTripTwo" />

Js:

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

$('input[name="MulticityTripOne"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": today,
    "maxDate": maxLimitDate,
    "opens": "left",
    "locale": {
        format: 'DD MMM YYYY'
    }
}, function (start, end) {
    $("#multiCityTripInputOne").val(start.format('DD MMM YYYY'));
    $('#multiCityTripInputOne').parent().parent().removeClass('has-error');
    console.log($("#multiCityTripInputOne").val());
});

$('input[name="MulticityTripTwo"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": today, /* Mindate have to start with MultiCityTripOne val */
    "maxDate": maxLimitDate,
    "opens": "left",
    "locale": {
        format: 'DD MMM YYYY'
    }
}, function (start, end) {
    $("#multiCityTripInputTwo").val(start.format('DD MMM YYYY'));
    $('#multiCityTripInputTwo').parent().parent().removeClass('has-error');
});

Answer 1

下面的示例代码通过在第一个回调中设置第二个选择器来更改您的代码。此代码获取第二个选择器的新的最短日期:

var aMinDate = new Date(Date.parse(start));

start 在回调中的位置。

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var minDateForSecondPicker;

$('input[name="MulticityTripOne"]').daterangepicker({
  "autoApply": true,
  "autoUpdateInput": false,
  "singleDatePicker": true,
  "minDate": today,
  "maxDate": maxLimitDate,
  "opens": "left",
  "locale": {
    format: 'DD MMM YYYY'
  }
}, function(start, end) {
  $("#multiCityTripInputOne").val(start.format('DD MMM YYYY'));
  $('#multiCityTripInputOne').parent().parent().removeClass('has-error');
  console.log($("#multiCityTripInputOne").val());

  var aMinDate = new Date(Date.parse(start));
  
  $('input[name="MulticityTripTwo"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": aMinDate,
    "maxDate": maxLimitDate,
    "opens": "left",
    "locale": {
      format: 'DD MMM YYYY'
    }
  }, function(start, end) {
    $("#multiCityTripInputTwo").val(start.format('DD MMM YYYY'));
    $('#multiCityTripInputTwo').parent().parent().removeClass('has-error');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input class="form-control input-lg" id="multiCityTripInputOne" name="MulticityTripOne" />

<input class="form-control input-lg" id="multiCityTripInputTwo" name="MulticityTripTwo" />