Add 2 days from an arrival calendar to a departure calendar

Question

I am currently using HTML 5 date type that pulls down a calendar for a person to select and arrival date. I want to be able to add two days to the departure calendar which is the next field over in my form. Dates are in format mm/dd/yyyy.

To be a bit more clear if someone selects lets say 07/03/2015 from the arrival calendar form field, then I want the next departure field to have 07/05/2015 already in there for them. Hope that makes sense and

Thank you for any help on this.

Sure here is the code: <div class="col-md-4"> <label>Arrival Date *</label> <input type="date" value="" maxlength="10" class="form-control" name="arrival" id="arrival" required> </div> <div class="col-md-4"> <label>Departure Date *</label> <input type="date" value="" maxlength="10" class="form-control" name="depart" id="depart" required> </div>

assumes that a calendar will even show up. Not all browsers do. Would use datepicker plugin for this myself and use the API to set second date — charlietfl, Apr 06 '15 at 16:20
Yup am using a jquery one for browsers that do not support the format - good tip — Dave Nugent, Apr 07 '15 at 17:12

score 0 · Accepted Answer · edited May 23 '17 at 12:28

You need to parse the value of the date input field into a date object then add two days to that date object.

var departure = document.getElementById('departure').value;
var arrivalTime = Date.parse(departure) + (1000 * 60 * 60 * 24 * 2);
var arrivalDate = new Date(arrivalTime);
// set the value on the input
document.getElementById('arrival').value = arrivalDate.toString('yyyy-MM-dd');

You'll need to get the date into that format or HTML5 will not work. This thread will guide you in the right direction (e.g. useful libraries)

How to format a JavaScript date

score 0 · Answer 2 · edited Oct 07 '21 at 06:31

You can get the current date and just add two day's worth of milliseconds to it. You must handle converting from your desired format to the RFC 3339 date format (YYYY-MM-DD).

input type=date – date input control

"A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0."

Grammar for Date input value

You can view it here (RFC3339 5.6).

date-fullyear   = 4DIGIT
date-month      = 2DIGIT  ; 01-12
date-mday       = 2DIGIT  ; 01-28, 01-29, 01-30, 01-31 based on
                         ; month/year

full-date       = date-fullyear "-" date-month "-" date-mday

Code

$(function() {
  function parseDate(dateString) {
    var parts = dateString.split('/');
    return new Date(parts[2], parts[0] - 1, parts[1]);
  }
  
  function getFormattedDate(date) {
    return date.toISOString().substring(0, 10);
  }
  
  function addTime(date, ms) {
    return new Date(date.getTime() + ms);
  }

  var MS_SEC = 1000;
  var MS_MIN = MS_SEC * 60;
  var MS_HOUR = MS_MIN * 60;
  var MS_DAY = MS_HOUR * 24;
  
  var date = parseDate('07/03/2015');

  $('#arrival').val(getFormattedDate(date));
  $('#departure').val(getFormattedDate(addTime(date, MS_DAY * 2)));
});

label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="arrival">Arrival: </label>
<input type=date id="arrival" />
<br />
<label for="departure">Departure: </label>
<input type=date id="departure" />

score 0 · Answer 3 · answered Apr 06 '15 at 16:54

0

var date1 = Date.parse('07/05/2015');
date1.setDate(date1.getDate()+2);

now date1 will give 07/05/2015

answered Apr 06 '15 at 16:54

Arjun

577
6
13

Add 2 days from an arrival calendar to a departure calendar

3 Answers3

`input type=date – date input control`

Grammar for Date input value

Code