How can I add 1 day from the date selected? jQuery DatePicker

Question

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,

  });
});

Please have a look at my answer and let me know – DreamBold Dec 12 '22 at 08:00 — DreamBold, Dec 12 '22 at 08:00

score 0 · Answer 1 · answered Dec 12 '22 at 08:00

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

4b0 · Answer 2 · 2022-12-12T09:19:46.180

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

How can I add 1 day from the date selected? jQuery DatePicker

2 Answers2