DateRangePicker - 从第一个输入选定值开始的第二个输入的 minDate

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