防止选择日期范围介于中间的无效日期

时间:2019-06-14 08:56:11

标签: javascript jquery daterangepicker

我正在使用daterangepicker选择日期范围。一旦范围之间存在无效日期,就不应再将它们移到另一个日期。

类似于this question的事物,但是它使用Bootstrap daterangepicker,而我正在使用DateRangePicker

var dateRanges = [{
    'start': moment('2019-06-28'),
    'end': moment('2019-07-5')
  },
];

$('input[name="daterange"]').daterangepicker({
  autoUpdateInput: false,
  autoApply: true,
  opens: 'left',
  setStartDate: new Date(),
  minDate: moment().startOf('day').add(2, 'day'),
  locale: {
    "format": "DD/MM/YYYY",
  },
  isInvalidDate: function(date) {
    return dateRanges.reduce(function(bool, range) {
      return bool || (date >= range.start && date <= range.end);
    }, false);
  },
});

$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
  $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
    'DD/MM/YYYY'));
})
input {
  width: 400px;
  height: 50px;
}
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<input type="text" name="daterange" readonly="true" readonly value="">

0 个答案:

没有答案