日期对象的行为不符合预期

Question

I have a control that shows the current month and year at the start of my application. It has 2 buttons that will add or subtract 1 from the current month. I use the same function to add/subtract to initialize the date by calling it with 0. Here is the function:

$scope.SetDateMonth = function (modifier) {
        if (modifier === 0) {
            //initialize the current date, only called on load
            $scope.CurrentDate = new Date();

        } else {
            //alter the currentdate
            $scope.CurrentDate.setMonth($scope.CurrentDate.getMonth() + modifier);
        }
        /*
        $scope.StartOfRange = new Date($scope.CurrentDate.getFullYear(), $scope.CurrentDate.getMonth());
        alert($scope.StartOfRange.getDate());
        $scope.StartOfRange.setDate(1);
        alert($scope.StartOfRange.getDate());
        //$scope.StartOfRange.setDate(1);
        $scope.EndOfRange = new Date($scope.CurrentDate.getFullYear(), $scope.CurrentDate.getMonth()+1);
        $scope.EndOfRange.setDate($scope.EndOfRange.getDate() - 1);
       */

        //set startofrange to first day of month
        $scope.StartOfRange = new Date($scope.CurrentDate.getFullYear(), $scope.CurrentDate.getMonth(), 1);
        //this sets the date to the last day of the previous month. Bc. we add 1 to the month, this will result in the last day of CurrentMonth
        $scope.StartOfRange = new Date($scope.CurrentDate.getFullYear(), $scope.CurrentDate.getMonth()+1, 0); 

        console.log("Start");
        console.log($scope.StartOfRange);
        console.log("End");
        console.log($scope.EndOfRange);

        //.setHours(0,0,0,0)

        //$scope.DateChanged();
    }

I want to add 2 global variables to this. Start/EndOfRange. They have to store the first and last day of the month. You can see that quite a bit of code has been commented out, I've been trying a lot of diffrent examples I found online. I'm stuck on the setDate() (maybe its not in the code I provided anymore, I did try to use it but couldn't get it to work) function. If I call it with param 1, it sets the date to 30. I've tried UTC times aswell.

The odd thing is that when I use an alert, it shows 1 as supposed. When I use console.log, it does not. I tried all values from 1 to 30, they all give vague unexpected results.

Reading from w3 ( https://www.w3schools.com/jsref/jsref_obj_date.asp ) I'm calling it correctly. I did manage to get the correct date out of it by constructing a new date object with day(or date, bit confusing, 3rd parameter) set to -29. Seems to consistently set the date to 1 but deffinitly not a long term solution.

Answer 1

You can use the following two functions to find the first day and last day of the current month.

$scope.StartOfRange = $scope.getFirstDay();    
$scope.EndOfRange = $scope.getLastDay();
$scope.getFirstDay = function ()
{
    var currDate = new Date();     
    year = currDate.getFullYear();
    month = currDate.getMonth();
    day = currDate.getDate();
    var lastMonth = month - 1;
    if (month == 0) {
        year--;
        lastMonth = 11;
    }
    lastDay = 28;
    var previousMonthDate = new Date(year, lastMonth,lastDay);

    while (previousMonthDate < currDate)
    {
        previousMonthDate = new Date(year, lastMonth, lastDay++);
        var curMonth = previousMonthDate.getMonth();
        if (curMonth == month)
        {
            console.log("First Day :" + previousMonthDate);
            return previousMonthDate;
        }
    }
}
$scope.getLastDay = function () {
    var currDate = new Date();
    year = currDate.getFullYear();
    var nextYear = year;
    month = currDate.getMonth();
    day = currDate.getDate();
    var nextMonth = month + 1;
    if (month == 11) {
        nextYear++;
        nextMonth = 0;
    }
    lastDay = 28;
    var currentMonthDate = new Date(year, month, lastDay);
    var nextMonthDate = new Date(nextYear, nextMonth, 1);
    while (currentMonthDate < nextMonthDate) {
        var finalDate = currentMonthDate;
        currentMonthDate = new Date(year, month, lastDay++);
        var curMonth = currentMonthDate.getMonth();
        if (curMonth == nextMonth) {
            console.log("LastDay :" + finalDate);
            return finalDate;
        }
    }
}

Answer 2

Using this code:

$scope.SetDateMonth = function (modifier) {
        if (modifier === 0) {
            //initialize the current date, only called on load
            $scope.CurrentDate = new Date();

        } else {
            //alter the currentdate
            $scope.CurrentDate.setMonth($scope.CurrentDate.getMonth() + modifier);
        }

        //set startofrange to first day of month
        $scope.StartOfRange = new Date($scope.CurrentDate.getFullYear(), $scope.CurrentDate.getMonth(), 1);
        //this sets the date to the last day of the previous month. Bc. we add 1 to the month, this will result in the last day of CurrentMonth
        $scope.EndOfRange = new Date($scope.CurrentDate.getFullYear(), $scope.CurrentDate.getMonth()+1, 0); 
        console.log("Start");
        console.log($scope.StartOfRange);
        console.log("End");
        console.log($scope.EndOfRange);
   }

Checking the console output in both firefox and internet explorer. Since the current date is 4-5-2017, StartOfRange should be 1-5-2017, EndOfRange should be 31-5-2017.

FireFox:

Start
Date 2017-04-30T22:00:00.000Z
End
Date 2017-05-30T22:00:00.000Z

IE:

Start
[date] Mon May 01 2017 00:00:00 GMT+0200
End
[date] Wed May 31 2017 00:00:00 GMT+0200

Will edit if I get firefox working with the same code.

edit 1: added this code:

var test = $scope.CurrentDate;
test.setDate(1);
console.log("test:");
console.log(test);

This works as expected for some reason. However, it doesn't only set test's date, because its a reference to CurrentDate. I don't see why this would work but setting date to 1 in the constructor wouldn't..