I currently have been making a leave request form. However, I am having a hard time adding 1 day to the end date of a user's leave end date. I tried e.date 1 and also e.date 1d but neither of them works.

Code:

  $(function(){

var myDate = new Date();

  $('#leaveEndDateFunc').datepicker({
        title: 'Leave End Date',
        format: 'dd/mm/yyyy',
        todayHighlight: true,
        autoclose: true,
        clearBtn: true,
        endDate: " 3M",         
  }).on("changeDate", function (e) {
   $('#dateOfReturn').datepicker('setStartDate', e.date);
  });
});

 $(function(){

var myDate = new Date();

  $('#dateOfReturn').datepicker({
        title: 'Date Of Return',
        format: 'dd/mm/yyyy',
        todayHighlight: false,
        autoclose: true,
        clearBtn: true,
                     
  });
 });  

CodePudding user response：

You can try this function, addDays, to add the days you need.

function addDays(date, days) {
  const dateCopy = new Date(date);
  dateCopy.setDate(date.getDate()   days);
  return dateCopy;
}

const date = new Date('2022-05-15T00:00:00.000Z');

const newDate = addDays(date, 5);

console.log("New Date: ", newDate); // 2022-05-20T00:00:00.000Z

console.log("Original Date", date); // 2022-05-15T00:00:00.000Z

CodePudding user response：

Use onSelect. Inside the function use setDate on #dateOfReturn input.

onSelect: function(dateText, inst) {
        var endate = $('#leaveEndDateFunc').datepicker('getDate');
        endate.setDate(endate.getDate()   1);
        $('#dateOfReturn').datepicker('setDate', endate);
      }

Working Example:

$('#leaveEndDateFunc').datepicker({
  title: 'Leave End Date',
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
  clearBtn: true,
  endDate: " 3M",
  onSelect: function() {
    var endate = $('#leaveEndDateFunc').datepicker('getDate');
    endate.setDate(endate.getDate()   1);
    $('#dateOfReturn').datepicker('setDate', endate);
  }
});

var myDate = new Date();
$('#dateOfReturn').datepicker({
  title: 'Date Of Return',
  format: 'dd/mm/yyyy',
  todayHighlight: false,
  autoclose: true,
  clearBtn: true,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<input type="text" id="leaveEndDateFunc" />
<input type="text" id="dateOfReturn" />