JavaScript Date Increment from a certain date

Question

<div id="date">
    <script>
        newDate();
    </script>
</div>
<div id="date">
    <script>
        newDate() + 1;
    </script>
</div>
<div id="date">
    <script>
        newDate() + 2;
    </script>
</div>

Above is the HTML that I want to apply the script to.

function newDate() {
    var _date = new Date("April 10");
    document.getElementById("date").innerHTML = _date;
}

Essentially, what I'm trying to do is write a script that will show the date in the format "Friday, April 10th" and when I go to the next div and do the script it will produce "Saturday, April 11th". But right now I can't even get it to post the date. Could someone point me in a direction that would simplify and help me out?

"I can't even it get to post the date" --- what does it mean? Btw, do you really have 3 divs with the same `id`? — zerkms, Apr 11 '15 at 23:13
Date() won't recognize "April 10" because it's not specific enough. you can use a more forgiving parser like moment.js. you are also trying to add something to a function return, but you never do anything with the modified values, and the function doesn't return a value to modify. you probably want to pass the days to newDate like `newDate(2)`, and then define a formap parameter in newDate() to use to offset the new Date. — dandavis, Apr 11 '15 at 23:14
Your function doesn’t return anything, so the implicit return value will just be `undefined` … and trying to add a number to that will only result in `NaN` (Not a Number) — CBroe, Apr 11 '15 at 23:23
As for how to add a certain period of time to a date in JavaScript, start your research(!) here: http://stackoverflow.com/search?q=javascript+add+date — CBroe, Apr 11 '15 at 23:25

score 1 · Answer 1 · edited May 23 '17 at 12:14

I hope this helps you to get started on the correct path. I used Jquery to make things a little bit simpler.

What is going on here

Basically I iterate through each date div by using

.each()

I initialize the date of today. And I create a function that will create a day object from the current date. Then I extract the correct parts using

.getDay()
.getMonth()

What you need to do

Now all you need to take care of is dealing with end of the month. To do this create variables.

var currentmonth=
var currentyear=

Get the last date of the month and if you reach the end of the month increment things in a logical way. This will help you to solve that problem.

Get first and last date of current month with javascript or jquery

Starter code:

https://jsfiddle.net/mughdmvn/

Let me know if you have any other questions

var current = 5;
var create = function(){
    return new Date(2015, 4, current);
}
var monthNames = ["January", "February", "March", "April", "May", "June",
       "July", "August", "September", "October", "November", "December"];

$(".date").each(function(){
    init = create();
    $(this).text(""+ monthNames[init.getMonth() - 1] + ", " +             init.getDate());
    current++;
})

Moishe Lipsker · Answer 2 · 2015-04-11T23:45:41.630

You can give each div a separate id and iterate through them using a for loop.

<div id="date1">
</div>
<div id="date2">
</div>
<div id="date3">
</div>
<script type="text/javascript">
    var thisDate = new Date(2015, 4, 9);
    for(var i = 1; i <= 3; i ++) {
        var thisDate = thisDate.setDate(thisDate.getDate() + 1);
        var dateDiv = document.getElementById("date" + i);
        dateDiv.innerHTML = thisDate.toDateString();
    }
</script>

Note that the toDateString() function returns the day of the week, followed by month, day of month, and then year.

For example:

Fri Apr 10 2015

JavaScript Date Increment from a certain date

2 Answers2