0

I am having the hardest time trying to code what should be a straight forward piece of logic. I have searched stackoverflow and the "interconnect pipes" but all the solutions don't seem to work for me. I am using Angular 8 and Visual Studio Code for development. I have a document in Firestore with a timestamp field:

firestore document

In my model file I have the startDate declared as a Date

export interface Fundraiser {
  fundId: string;
  name: string;
  startDate: Date;
  endDate: Date;
  imagePath: string;
  fundsRaised: number;
  items: Product[];
}

in my component.ts file I retrieve the document from firestore

  ngOnInit() {
    this.fundraiserService.getFundraisers().subscribe(fundraisers => {
      this.fundraisers = fundraisers;
      console.log('Fundraiser ', this.fundraisers);
    });
  }

In my HTML I have a typical for loop *ngFor="let fundraiser of fundraisers". Then I call a method to check if the start and end dates are within a range, passing in the timestamps as parameters.

                <h5 class="list-group-item-heading text-success" *ngIf="isActive(fundraiser.startDate, fundraiser.endDate)">Currently active</h5>
                <h5 class="list-group-item-heading text-secondary" *ngIf="!isActive() && !isStaged()">Finished</h5>

So now for my method isActive():

isActive(startDate: Date, endDate: Date) {
    if (startDate <  new Date().getTime() && endDate > new Date().getTime()) {
      return true;
    }
    return false;
  }

The code does not compile. The error is:

"Operator '<' cannot be applied to types 'Date' and 'number'."

I have also tried using the toDate() method with no luck.

  isActive(startDate: Date, endDate: Date) {
    if (startDate.toDate() <  new Date() && endDate.toDate() > new Date()) {
      return true;
    }
    return false;
  }

This compiles, but the I get an error in the HTML

ERROR TypeError: Cannot read property 'toDate' of undefined at FundraiserListComponent.isActive (fundraiser-list.component.ts:36)

When I first tried to use the method toDate() I received a typescript error, I had to add it to the "properties" (via quick fix) to get the code to compile. I have also tried numerous other solutions, to many to list here.

Any help would be great. I have been struggling with this for a couple of days now.

Improve this question

2 Answers 2

Reset to default
1

Can you try changing 

isActive(startDate: Date, endDate: Date) {
    if (startDate.toDate() <  new Date() && endDate.toDate() > new Date()) {
      return true;
    }
    return false;
  }

to 

isActive(startDate: any, endDate: any) {
    if (startDate.toDate() <  new Date() && endDate.toDate() > new Date()) {
      return true;
    }
    return false;
  }

Even though you are storing them as Date they are still Timestamps. But since you are passing them as Date type you cannot convert them to Date with using toDate().

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

implementing this solution, gives me clean typescript code - no errors. However, in my browser I get the error "TypeError: Cannot read property 'toDate of undefined at the line of code --- if (startDate.toDate() < new Date() && endDate.toDate() > new Date())
then it's probably because html is calling the method before this.fundraiserService.getFundraisers() is finished. Can you try with adding an *ngIf="fundraiser" to your html? For example put all the elements which is using fundraiser object inside a div and <div *ngIf="fundraiser">
also, have you initialized this.fundraisers before assigning a value to it? this.fundraisers = []
yes I have done both. I have fixed browser errors. But "if" check is not working. I'll keep working on it
which error you are getting now? still toDate of undefined?
|
1

Are you using the firebase server timestamp in your code? If that's the case you can access the seconds property on the timestamp as

startDate.seconds

this might throw an error since you declared the property as a Date you should change your model to 

import { Timestamp } from '@firebase/firestore-types';
    export interface Fundraiser {
      fundId: string;
      name: string;
      startDate: Timestamp | Date;
      endDate: Timestamp | Date;
      imagePath: string;
      fundsRaised: number;
      items: Product[];
    }
Improve this answer

2 Comments

after implementing your answer, startDate.seconds in my isActive(startDate: Date, endDate: Date) method returns an error of "Property 'seconds' does not exist on type 'Date' in my typescript code.
if you want types in your function your method should look like this: isActive(startDate: Timestamp, endDate: Timestamp) or just use any

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.