Jquery UI DateTimePicker add 3 days to current date and disable the future dates in datePickerStart and datePickerEnd date with dp.change method

Question

So, After searching a lot on stack overflow, I have not found any better solution for my code below. My actual question is, I have datetimepicker, and I want to add 3 days to the datePickerStart and disable it's past dates, also with dp.change I want those 3 days with current date to be shown in next datetimepicker which is datePickerEnd and to disable it's past and future dates except the 3 days added. I mean to say only to show 3 days in next picker. For example, if user select 12 date then it should show 12 to 14 dates in next picker, if user select 21st date then it should show 21 to 23 dates in next picker and so on. Following the code I have written which works fine but not with the above functionality.

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

Any help would be appreciated. Thanks in advance.

Answer 1

Hope this helps!

$(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