How to detect month change in javascript?

Question

I am using javascript to get current date and next coming 7 days. Now I am trying a way to find to detect the month change in between this. I mean if current date is 31st December, day after this will be January. Than how to get new month, and display both in my view.
Update: Now I find the way to get new month. Now I need to add this month exactly after the end of month date.
I mean: Dec Tue 30, Wed 31, Jan Thu 1, Fri 2 ....
Fiddle: http://jsfiddle.net/HB7LU/9763/
JS:

 function GetDates(startDate, daysToAdd) {
        var aryDates = [];
        for(var i = 0; i <= daysToAdd; i++) {
            var currentDate = new Date();
            $scope.currentMonth= MonthAsString(currentDate.getMonth());
            currentDate.setDate(startDate.getDate() + i);
            aryDates.push(DayAsString(currentDate.getDay()) + " " + currentDate.getDate() + " " );
        }

        return aryDates;
    }


    function MonthAsString(monthIndex) {
        var d=new Date();
        var month=new Array();
        month[0]="Jan";
        month[1]="Feb";
        month[2]="March";
        month[3]="April";
        month[4]="May";
        month[5]="June";
        month[6]="July";
        month[7]="Aug";
        month[8]="Sep";
        month[9]="Oct";
        month[10]="Nov";
        month[11]="Dec";

        return month[monthIndex];
    }

    function DayAsString(dayIndex) {
        var weekdays = new Array(7);
        weekdays[0] = "SUN";
        weekdays[1] = "MON";
        weekdays[2] = "TUE";
        weekdays[3] = "WED";
        weekdays[4] = "THU";
        weekdays[5] = "FRI ";
        weekdays[6] = "SAT";

        return weekdays[dayIndex];
    }

    var startDate = new Date();
    var aryDates = GetDates(startDate, 7);
    console.log(aryDates);
    $scope.totalDays = aryDates;

HTML:

 <div class="row" style="text-align:center;background-color: #930d14; color: white; height: 55px;">
            <div class="col" style="border-right: solid 1px #820d13;">
                <p style="transform: rotate(270deg);margin-top: 8px;font-size: 10px;font-weight: 600;text-transform: uppercase;">
                    {{currentMonth}}</p>
                <p ng-if="newMonth" style="transform: rotate(270deg);margin-top: 8px;font-size: 10px;font-weight: 600;text-transform: uppercase;">
                    {{newMonth}}</p>
            </div>

As an aside, an easier way to create your `month` and `weekdays` arrays is using array literal syntax: `var month = ["Jan", "Feb", "March", "April", "Etc."];` — nnnnnn, Jan 05 '15 at 07:51
If you are ok with using library for that, check http://momentjs.com/ — nacholibre, Jan 05 '15 at 09:27

score 1 · Accepted Answer · edited May 23 '17 at 10:27

This answer should get you halfway there:

function addDays(theDate, days) {
    return new Date(theDate.getTime() + days*24*60*60*1000);
}

var newDate = addDays(new Date(), 5);

Then you could instantiate two different days, and compare the months:

var today = new Date();
var newDate = addDays(new Date(), 7);

function addDays(theDate, days) {
    return new Date(today.getTime() + days*24*60*60*1000);
}

var monthChange = (today.getMonth() < newDate.getMonth()) 
    || (today.getMonth() === 12 && newDate.getMonth() === 1)

console.log(monthChange);

From there, you'll want to make your dates human-readable. For this, you can format the dates as UTC using .toUTCString(), or use a library, or roll your own method. It looks like AngularJS has built-in filters to format dates.

Moment.js is really useful, too.

How to detect month change in javascript?

1 Answers1