Add one day to date string in javascript

Question

I am setting the min of checkOut as the value of checkIn. My problem comes that i need to add one day to firstdate. (Should not be able to check out on or before the check in day.)

<script>
function updatedate() {
var firstdate = document.getElementById("checkIn").value;
document.getElementById("checkOut").value = "";
document.getElementById("checkOut").setAttribute("min",firstdate);
}  
</script>

Check In
<input type="date" id="checkIn" onchange="updatedate();" name="checkin">

Check out
<input type="date" id="checkOut" min="" name="checkout">

The marked duplicate is not that helpful. The OP has a date input, not a Date object, so needs to parse the string, add a day, then convert it back. Note that an ISO 8601 date string is treated as local by the date input, but UTC by the Date constructor. Where's the help with that? — RobG, Aug 16 '16 at 01:15

score 2 · Accepted Answer · answered Aug 16 '16 at 01:22

2

It's sort of do-able but it only works in Chrome since that's the only browser that supports a date input at the moment. Oh, and this solution uses momentjs because parsing a date and correctly adding 1 day to it is way harder that it sounds.

function updatedate() {
  var checkin = document.getElementById("checkIn").value;
  checkin = moment(checkin);
  var checkout = checkin.add(1, 'd');
  document.getElementById("checkOut").setAttribute("min", checkout.format('YYYY-MM-DD'));
}

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div class="container">
  Check In
  <input type="date" id="checkIn" onchange="updatedate();" name="checkin">Check out
  <input type="date" id="checkOut" min="" name="checkout">
</div>

answered Aug 16 '16 at 01:22

Will

3,201
1
19
17

Parsing a date and adding a day is actually very simple and certainly doesn't need a library as big as moment.js, though a small parsing and formatting library might be helpful. – RobG Aug 16 '16 at 02:02
Add 1 day to August 31st and what do you get? How about Feb 28 on a leap year? It's not impossible but it certainly isn't 'very simple'. – Will Aug 16 '16 at 02:52
I think I see what RobG was getting at. Adding the day in milliseconds and using the date constructor makes the JavaScript engine deal with the edge cases. I feel kinda silly for not remembering that sooner. – Will Aug 16 '16 at 05:31

score 0 · Answer 2 · answered Aug 16 '16 at 01:25

A momentless solution is to parse the checkinDate into a JS date and and then create a new date whilst adding one day to the checkinDate. Though yeah, momentJS is the goto library when dealing with dates.

JSfiddle here:

https://jsfiddle.net/xugajae5/

There was a bit of a hack in getting the min format that the input expected:

var checkoutDateFormat = checkoutDate.toISOString().split('T')[0];

score 0 · Answer 3 · answered Aug 16 '16 at 01:53

Not all browsers in use support input type date, so you'll need to deal with that to start with.

Then, you can convert the value of firstdate to a Date object, add a day, then get back a date in the required format. Your issue however is that the value of the date input (which is an ISO 8601 format date string) is treated as local, but the Date constructor will treat it as UTC.

So you need to parse the string as a local date, then add the day, then get back a string in the right format. The code below is just an example, you may wish to use a library for the date manipulation. Just remember not to parse the date string with the Date constructor.

function getTomorrow(el) {
  var form = el.form;
  var start = parseISOAsLocal(form.start.value);
  // Check if input date was valid
  if (!start.getTime()) {
    form.tomorrow.value = '';
    form.start.value = 'Invalid date';
    return;
  }
  start.setDate(start.getDate() + 1);
  form.tomorrow.value = formatISODate(start);
}

function parseISOAsLocal(s) {
  var b = s.split(/\D/);
  var d = new Date(b[0], --b[1], b[2]);
  return d && d.getMonth() == b[1]? d : new Date(NaN);
}

function formatISODate(date) {
  return ('000' + date.getFullYear()).slice(-4) + '-' +
         ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
         ('0' + date.getDate()).slice(-2);
}

<form>
  Start (yyyy-mm-dd):
  <input type="date" name="start" value="2016-08-31"><br>
  Tomorrow: <input type="date" name="tomorrow" readonly><br>
  <input type="button" onclick="getTomorrow(this)"
         value="Show tomorrow">
</form>

score 0 · Answer 4 · answered Aug 16 '16 at 02:05

<script>
    function updatedate(){
        var checkInValue = document.getElementById("checkIn").value;
        var checkInDate = Date.parse(checkInValue);
        var minDate = new Date(checkInDate + 24 * 3600 * 1000);
        document.getElementById("checkOut").setAttribute("min", minDate.toDateString());
     }
</script>

Add one day to date string in javascript

4 Answers4