Question

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

选择器工作正常 - 但我们要求的行为是mindate MultiCityTripTwo应该是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的位置。

＆＃13;

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');
  });

});

＆＃13;

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

＆＃13;

DateRangePicker - 以第一个输入选择值开始的第二个输入的minDate

1 个答案: