0

Time zone seems to be the issue.

I've changed, will test thoroughly tomorrow: 

var estimate = new Date(date+" 12:00:00 GMT-0500 (Eastern Standard Time)");

to 

var estimate = new Date(date+" 00:00:00 GMT-0500 (Eastern Standard Time)");

=============================================

https://github.com/extant1/estimated-time/blob/master/estimated_time.html

I'm having some trouble with a little thing I made for work to estimate 14 weeks from a specific date, it's just vanilla JS and HTML5.

Using html5 and the chrome browser for the drop down date selector) the date is passed as the current date however once I pass a date through the date() function it subtracts a day. If I do the same thing on Firefox (the date drop down box doesn't work, so you have to enter the date manually) it works just fine.

Edit: When you manually add a date in chrome and select update, not when the page loads.

reddit link

<html>
<head>
<title>estimate</title>
<style>
.current {
    background-color: lightblue; 
    width: 260px;
}
.estimate {
    background-color: lightcoral;
    width: 260px;
}
#expTimeinWeeks {
    width: 200px;
}
#date {
    width: 200px;
}
#update {
    width: 100%;
    background-color: lightgreen;
}
.container {
    background-color: gainsboro;
    width: 260px;
}
</style>
</head>

<body>
<div class="container">
    <table>
        <tr>
            <th class="current">Today</th>
        </tr>
        <tr>
            <td class="current"><div id="today"></div></td>
        </tr>
    </table>
    <br>
    <form name="estimatedTime">
    <table>
    <tr>
        <td>Weeks:</td>
        <td><input type="text" maxlength=2 id="expTimeinWeeks" name="expTimeinWeeks" value=14></td>
    </tr>
    <tr>
        <td>Date:</td>
        <td><input type="date" name="date" id="date"></td>
    </tr>
    <table>
        <input id="update" type="button" onclick="estimateDate(weeks=expTimeinWeeks.value, date=date.value);  console.log('Form: ' + date.value);" value="Update"><br>
    </form>
    <br>
    <table>
        <tr>
            <th class="estimate">Estimate</th>
        </tr>
        <tr>
            <td class="estimate"><div id="expTime"></div></td>
        </tr>
    </table>
</div>
<script>
    // Create function to change date.
    function estimateDate(weeks=14, date=now) {
    console.log("Input:  " + date);
        // create new variable 'estimate' with current date
        var estimate = new Date(date);
        console.log("Estimate:  " + estimate);
        // Convert to days
        var inDays = weeks * 7
        // Modify variable 'now' to be (current date time)+(expWeeks variable * 7)
        estimate.setDate(estimate.getDate()+inDays);
        console.log("Modified:  " + estimate);

        // Modify DOM 'expTime' with the updated date and return it.
        return document.getElementById("expTime").innerHTML = estimate.toDateString(); 
    };
    // Set variable 'now' to the current date and time.
    var now = new Date();
    // Set variable 'expWeeks' to the time (in weeks) for an estimate from the text input "expTimeinWeeks"
    var expWeeks = document.getElementById('expTimeinWeeks').value;
    // Modify DOM 'today' with the current date and time.
    document.getElementById("today").innerHTML = now.toDateString();
    estimateDate(expWeeks, now);
</script>
</body>
</html>

Console log from page load:

Input:  Wed Dec 28 2016 00:12:08 GMT-0500 (Eastern Standard Time)
estimated_time.html:76 Estimate:  Wed Dec 28 2016 00:12:08 GMT-0500 (Eastern Standard Time)
estimated_time.html:83 Modified:  Wed Apr 05 2017 00:12:08 GMT-0400 (Eastern Daylight Time)
estimated_time.html:72

Console log from form update of manual date:

Input:  2016-12-28
estimated_time.html:76 Estimate:  Tue Dec 27 2016 19:00:00 GMT-0500 (Eastern Standard Time)
estimated_time.html:83 Modified:  Tue Apr 04 2017 19:00:00 GMT-0400 (Eastern Daylight Time)
estimated_time.html:57
Form: 2016-12-28
Scott
  • 1
  • 2
  • Post all relevant code in the question itself as per [mcve]. Questions should be self contained and we shouldn't have to go off site to multiple links to try to figure your issue out – charlietfl Dec 28 '16 at 00:34
  • I get the same result in all browsers. JSFiddle: https://jsfiddle.net/n5qm9pmh/ – EugeneZ Dec 28 '16 at 02:30
  • @charlietfl updated the post to include the code. – Scott Dec 28 '16 at 05:10
  • @EugeneZ on page load it works fine, its only when trying to pass the date through the function and selecting update. Also the update function doesn't work on jsfiddle. – Scott Dec 28 '16 at 05:11
  • Duplicate of [*Why does Date.parse give incorrect results?*](http://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results), noting that the *Date* constructor and *Date.parse* are equivalent for parsing and that Date inputs return the value in ISO 8601 format. – RobG Dec 28 '16 at 06:44

1 Answers1

0

You're having a time zone inconsistency problem. The initial date new Date('2016-12-27') becomes 12/27/16 at midnight UTC, or sometime in the evening the night before, for the USA. That's where you lose a day.

andi
  • 6,442
  • 1
  • 18
  • 43