Jquery UI DateTimePicker 使用 dp.change 方法将 3 天添加到当前日期并禁用 datePickerStart 和 datePickerEnd 日期中的未来日期

Question

所以，在对堆栈溢出进行了大量搜索之后，我没有找到适合我的代码的更好解决方案。我的实际问题是，我有 datetimepicker，我想向 datePickerStart 添加 3 天并禁用它的过去日期，还有 dp.change 我希望在下一个 datetimepicker 中显示当前日期的 3 天这是 datePickerEnd 并禁用它的过去和未来日期，除了添加的 3 天。我的意思是只在下一个选择器中显示 3 天。例如，如果用户 select 12 date 那么它应该在下一个选择器中显示 12 到 14 个日期，如果用户 select 21st date 那么它应该在下一个选择器中显示 21 到 23 日期等等。按照我编写的代码，它工作正常但不具备上述功能。

$('.datePickerStart').datetimepicker({
    format: 'DD-MM-YYYY',
    minDate: new Date()
}).on('dp.change', function(e){
    var parent = $($(this).parents('.row')[0]),
        endDate = parent.find('.datePickerEnd');
    endDate.data("DateTimePicker").minDate(e.date).show();
});

$('.datePickerEnd').datetimepicker({
    format: 'DD-MM-YYYY',
    minDate: new Date(),
    useCurrent: false
}).on('dp.change', function(e){
    var parent = $($(this).parents('.row')[0]),
        startDate = parent.find('.datePickerStart');
    startDate.data("DateTimePicker").maxDate(e.date);
});

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

希望对您有所帮助！

$(function() {
  $('.datePickerStart').datetimepicker({
  minDate: new Date()
  });
  $('.datePickerEnd').datetimepicker();
  $(".datePickerStart").on("dp.change", function(e) {
    $('.datePickerEnd').data("DateTimePicker").minDate(e.date);
      var dt = new Date(e.date);
      dt.setDate(dt.getDate() + 2);
      $('.datePickerEnd').data("DateTimePicker").maxDate(dt);
  });
});

Fiddle