Question 14903 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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,

  });
});
Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0

    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" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search