2

I am using a custom filter pipe in angular. When I am selecting the same dates in the start date and end date it's not showing the result although the record is available for that date.

I need to enter 1 day before or earlier in the start date to see the result. Please suggest what changes do I need to make in my filter.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "tableFilter"
})

export class TableFilterPipe implements PipeTransform {
  transform(list: any[], filters: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = (user: { [x: string]: any; }) =>
      keys.every(key => {
        if (key == "sdob") {
          return new Date(user["dob"]) >= new Date(filters[key]);
        } else if (key == "edob") {
          return new Date(filters[key]) >= new Date(user["dob"]);
        } else {
          return user[key] === filters[key];
        }
      });
    return keys.length ? list.filter(filterUser) : list;
  }
}
Kunal Vijan
  • 425
  • 2
  • 9
  • 28

3 Answers3

3

Change TableFilterPipe to this and check

if (key == "sdob") {
     return new Date(user["dob"]) >= new Date(new Date(filters[key]).setHours(0,0,0,0));
} else if (key == "edob") {
     return new Date(new Date(filters[key]).setHours(0,0,0,0)) >= new Date(user["dob"]);
}
Arun
  • 468
  • 3
  • 6
1

A very good approach when you are using Date() calculation or manipulation are milliseconds. So a fresh update to your date filter could be in the way of calculating datetime instead of date.

For a lot of people there is a confusion when dealing with date ranges. Let me give you an example: Some countries interpret 00:00:00 to 24:00:00, in logic is the same but in terms of usability is completely different.

Imagine you have a contest in your website and contestants must enter until a specific global time!... It maters both date and time! Here comes UTC in milliseconds.

  1. Store your date in form of datetime type. "2020-12-30 09:37:00" (ex. mySql datetime is always in milliseconds UTC)
  2. Every time you want to retrieve a datetime from DB you will get its millisecond equivalent "2020-12-30 09:40:00" = 1609314000000 milliseconds since epoch.
  3. When comes to compare datetime -to find even the same date range- you will have no problem because the comparison will be made with integer accuracy.

Of course the above can be altered to meet your country's datetime offset.

EXAMPLE OF DATA STRUCTURE AND LOGIC :

//dataset or Jason retrieved from your database
let dataset =[{user:'a',datetime:1609314000000},{user:'b',datetime:1609314000000}]

// When its time to compare inside your filter
// First find your record and extract its datetime
    let foundUser = dataset.filter(obj => obj.user === 'b');
    console.log(foundValue[0].datetime) // result: 1609314000000

// Now you can do whatever you want with any logic operator, >=, <=, == etc...

It is more space efficient to compare two long integers than to assign values to a new Date() object.

I hope to pin point a different approach to your case!

George Gotsidis
  • 426
  • 4
  • 15
0

I think inside the filter pipe, the way of comparison on the date objects is causing the problem. Instead of comparing like this, where the equal will most likely not working:

new Date(user["dob"]) >= new Date(filters[key])

you may use 'getTime()' method on the date objects and compare. Or use other methods showing in this thread: compare two dates

Joseph Wu
  • 4,786
  • 1
  • 21
  • 19