Comparing dates in angular2

Question

In my Angular program, I'm trying to filter an array based on if each of the dates are between 2 set dates. I have the dates set to be the first and the last of the current month:

StartDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1); EndDate = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0);

I have the user choose which days they would like to see the results of the array for:

<div class="col-sm-12" style="padding-left: 0px; text-align: center; padding-bottom: 10px;">
     <label class="col-sm-5" style="text-align: right;">Start Date</label>
     <div class="col-sm-7">
         <input class="form-control" type="date" id="StartDate" [ngModel]="StartDate | date: 'yyyy-MM-dd'" (ngModelChange)="StartDate=$event" name="StartDate" />
      </div>
 </div>
 <div class="col-sm-12" style="padding-left: 0px; text-align: center;">
      <label class="col-sm-5" style="text-align: right;">End Date</label>
      <div class="col-sm-7">
            <input class="form-control" type="date" id="EndDate" [ngModel]="EndDate | date: 'yyyy-MM-dd'" (ngModelChange)="EndDate=$event" name="EndDate" />
       </div>
     </div>
 </div>

and then, I call a function that filters the array based on those dates:

setValues(): void {
    this.datePTO = this.ptoData.filter(pto => pto.date > this.StartDate && pto.date < this.EndDate);
}

If the user keeps the dates the same and then tries to see the array, it won't have anything in it. Whereas, if they change the dates at all, the array will fill with what should be in it. I've found out that whenever the user changes the dates, they change to string and then are compared somehow. How can I fix this so that they can just hit the button if the date range they want is the default one shown?

@mTv it's a date and whenever the user enters a date in the input box for the variables startDate and endDate, they become strings, are compared with pto.date and the correct array is printed. It just doesn't work for the default values for some reason. I tried converting them to strings and then comparing but I get an error where it says I can't compare a date (pto.date) to a string (startDate or endDate) — rcarcia02
– rcarcia02, Commented Jul 20, 2017 at 15:25
Hm. Are you sure pto.date is a Date? Have you tried printing typeof pto.date? Seems really wierd that it works when the user sets the date(as a String), but not when you convert them initially. Its also weird that the between comparison works with string and date types. Date is converted to number before comparison(.valueOf()), and a string compared to a number(<, >, ==, ===) always returns false. — mTv
– mTv, Commented Jul 20, 2017 at 15:34
@mTv damn, nevermind. Okay so in my model, it's declared as a date, but i just looped through and did a console.log and they all printed out as strings. But, if I change my filter to be this.datePTO = this.ptoData.filter(pto => pto.date > this.StartDate.toDateString() or .toString, it says "Operator '>' cannot be applied to types 'Date' and 'string'." — rcarcia02
– rcarcia02, Commented Jul 20, 2017 at 15:41
Good at least it makes some sense then:P. try doing .toISOString() when you first declare StartDate and EndDate. Wait, why does give that error with the .toString() on? does that mean the compiler think pto.date is a Date but it actually isn't? Or maybe I'm just confusing myself atm. — mTv
– mTv, Commented Jul 20, 2017 at 15:57

mTv · Accepted Answer · 2017-07-20 15:51:30Z

1

This sounds like a type issue.

When you compare Date types, they are converted to number through the function valueOf(). Comparing a String to a number seems to always return false. This is probably why it doesn't work until you set the dates again so that the StartDate and EndDate becomes String types.

I suggest either just sticking to strings as long as its in the yyyy-mm-dd format. By that i mean, declare StartDate and EndDate as strings initally instead of dates.

Or you can parse the dates in your input and/or in the setValues function using something like this:

parseDate(dateString: string): Date {
    if (dateString) {
        return new Date(dateString);
    } else {
        return null;
    }
}

answered Jul 20, 2017 at 15:51

mTv

1,4955 gold badges24 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Comparing dates in angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related