date.getDate is not a function Typescript

Question

I have 3 input controls two date type and one is number, what i wanna to do is get the date from 1st control and no. of days from other controls add them both and assign it to third date control in typescript. but i gives me error here is my code:

activeFrom: Date;
activeNoDays: number;

    //UpdateExpiry Function is called by textbox event
        updateExpiry=():void =>{
             this.gDetailDS = this.gDetailForm.value;
            console.log("Expiry days:"+this.gDetailDS.activeNoDays);
            console.log (this.addDays(this.gDetailDS.activeFrom,this.gDetailDS.activeNoDays))
          }

          addDays(date: Date, days: number): Date {
            console.log('adding ' + days + ' days');
            console.log(date);
            date.setDate(date.getDate() + days);
            console.log(date);
            return date;
          }

Here is HTML Controls:

<input
     id="txtActivateFrom"
     type ="date"
     min="rdMinDate"
     formControlName="activeFrom"
     class="form-control"
     value="{{ this.gDetailDS.activeFrom | date:'yyyy-MM-dd' }}"
     displayFormat="yyyy-MM-dd"
     useValueAsDate />

<input  type="number"
        formControlName="activeNoDays" class="form-control"
        (change)="updateExpiry()"/>

console Messages:

Expiry days:25
adding 25 days
2019-07-12

I have tried everthing but still getting this issue :

ERROR TypeError: date.getDate is not a function

link: screenshot of error appear on browser console

Solution 1

I once had a similar problem when getting dates from a web API. I solved it by creating a new Date object.

So your function call could look like this:

this.addDays(new Date(this.gDetailDS.activeFrom),this.gDetailDS.activeNoDays)

Solution 2

You need to create the Date object before trying to pass it into the addDays function. Input.value of type="date" will return a string representation and not a date object.

If this is received over the wire via JSON you will also still need to create the date object when doing JSON.Parse()

fiddle: https://jsfiddle.net/o7y6u2zL/4/

let date = document.getElementById("start");
console.log(date.value);
console.log(typeof date.value);
let realDateObject = new Date(date.value);
console.log(typeof realDateObject)

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

Comments

[JWallace]

Although this is a correct answer it doesn't actually explain why. Sometimes when we do operations on dates they get converted back into a number in JavaScript. We simply must make sure these are converted back to Date before passing them to another function