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
– RobG, Commented Aug 16, 2016 at 1:15

Will · Accepted Answer · 2016-08-16 01:22:30Z

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, 2016 at 1:22

Will

3,2411 gold badge20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RobG Over a year ago

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.

Will Over a year ago

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 Over a year ago

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.

derp · Accepted Answer · 2016-08-16 01:25:19Z

0

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];

answered Aug 16, 2016 at 1:25

derp

2,30815 silver badges20 bronze badges

Comments

RobG · Accepted Answer · 2016-08-16 01:53:38Z

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>

YonF · Accepted Answer · 2016-08-16 02:05:46Z

0

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

answered Aug 16, 2016 at 2:05

YonF

6516 silver badges20 bronze badges

Collectives™ on Stack Overflow

Add one day to date string in javascript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related