0

I have the following fields on my html page: enter image description here

When I click save I refer to each field and create a new date as shown here:

var dob = new Date(this.editProfileForm.value['year'], this.editProfileForm.value['month'], this.editProfileForm.value['day']

When displays:

Mon Jan 23 1989 00:00:00 GMT+1100

Which as you can see is incorrect, how is it getting January? my html markup for my select list month is:

 <select name="month" id="month" class="form-control" formControlName="month">
    <option value="" selected>Please Select</option>
    <option value=01>January</option>
    <option value=02>February</option>
    <option value=03>March</option>
    <option value=04>April</option>
    <option value=05>May</option>
    <option value=06>June</option>
    <option value=07>July</option>
    <option value=08>August</option>
    <option value=09>September</option>
    <option value=10>October</option>
    <option value=11>November</option>
    <option value=12>December</option>
</select>

When I change this to start with 00 for January all the way to 11 for December it works... but that doesn't seem correct to me?

But it also does the same for the Year too... which is dynamically built: 

<option _ngcontent-c2="" value="1999" ng-reflect-value="1999">1999</option>
<option _ngcontent-c2="" value="1998" ng-reflect-value="1998">1998</option>
<option _ngcontent-c2="" value="1997" ng-reflect-value="1997">1997</option>

All the way down to 1939...

Can someone shed some light into why this might be happening regarding the month and year?

I've just noticed it's also decreasing the day by 1 every time I save it.

Code Ratchet
  • 5,758
  • 18
  • 77
  • 141

2 Answers2

0

Problem is with your value attribute for months. When instantiating Date() month is calculated from 0 to 11. so January is 0 etc. In your case going with 12 value will jump to first month.

So correction in code is:

<select name="month" id="month" class="form-control" formControlName="month">
    <option value="" selected>Please Select</option>
    <option value=0>January</option>
    <option value=1>February</option>
    <option value=2>March</option>
    <option value=3>April</option>
    <option value=4>May</option>
    <option value=5>June</option>
    <option value=6>July</option>
    <option value=7>August</option>
    <option value=8>September</option>
    <option value=9>October</option>
    <option value=10>November</option>
    <option value=11>December</option>
</select>
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
0

Because the month parameter is zero indexed, ie it starts counting from 0 not 1, by adding an extra month (ie 12 instead of 11) you rolled over to the 1st month of the following year which is why it incremented from 1988 to 1989.

Further reading: Zero-based month numbering

Community
  • 1
  • 1
andrew
  • 9,313
  • 7
  • 30
  • 61
  • I see, would this be the case for `day` too? because I have noticed the same behaviour. – Code Ratchet May 16 '17 at 11:24
  • No, this is a case only for months. Also for day in a week. 0-6 Mon-Sun – Mario Petrovic May 16 '17 at 11:26
  • nope, just month, :/ Welcome to the wonderful world of javascript – andrew May 16 '17 at 11:26
  • although, it would happen if the number of days were too high, eg if you entered 32'nd of December, you'd roll over to the 1st of Jan of the following year – andrew May 16 '17 at 11:28
  • I entered 29/09/1988 but for some reason it's getting saved as 28.. now this could be to do with my back end, I'm using Mongodb but I'll investigate that and go from there. – Code Ratchet May 16 '17 at 11:30
  • And with no comment either...., I should study the question linked in my answer, I found it informative – andrew May 16 '17 at 11:36
  • @andrew seems to be when I create the date it gets changed from 29/09/1988 to 28/09/1988 – Code Ratchet May 16 '17 at 12:01
  • can you setup a js fiddle to show the issue? i know you're saving the date to the back end but you could just console.log the date that would be sent – andrew May 16 '17 at 12:05