How to fix angular datepicker filter

Question

I'm trying to filter the date which where the FROM and TO will display the data,

but when the FROM and TO are the same it doesn't display the current date selected.

Example FROM: 08-01-2019 00:00:00 | To: 08-29-2019 13:00:00 it doesn't display the data 2019-08-28 12:36:01, but when I try to set the FROM: 06-14-2019 00:00:00 | TO: 08-29-2019 13:00:00 it displays all the data

templog.component.ts

columnDefs: any = [
    { headerName: 'Date Time', field: 'dateandtime' },
    { headerName: 'Location', field: 'sensor' },
    { headerName: 'Temperature', field: 'temperature' },
    { headerName: 'Humidity', field: 'humidity' }
  ];

submitForm(): void {
    this.rowData = record.default.records;

    const dateStart = format(this.validateForm.value.datePickerStart, 'YYYY-MM-DDTHH:mm:ss');
    const dateEnd = format(this.validateForm.value.datePickerEnd, 'YYYY-MM-DDTHH:mm:ss');
    
    for(let i = 0;i < this.rowData.length; i++){
      if (isBefore(this.rowData[i].dateandtime, dateStart) || 
        isAfter(this.rowData[i].dateandtime, dateEnd )) {  
          this.rowData = this.rowData.splice(i, 0);
      }
    }    
  }

templog.json

{
    "records": [
        {
            "dateandtime": "2018-06-14 01:38:02",
            "sensor": "Sewing Line1",
            "temperature": "25.8",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 01:36:01",
            "sensor": "Sewing Line1",
            "temperature": "25.8",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 01:36:01",
            "sensor": "Heat Seal Area",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2019-08-28 12:36:01",
            "sensor": "Heat Seal Area",
            "temperature": "25.9",
            "humidity": "99.9"
        }
    ]
}

When you need to remove multiple items in an array, you need to do it from the last index. If you do it from the front, once you removed an item, the next item will replace the current index. Or you can do i-- after removal. — Icycool
– Icycool, Commented Aug 29, 2019 at 12:56
@Icycool thank you sir. but I already tried on it. still it doesn't work. — ABC
– ABC, Commented Aug 29, 2019 at 13:37

Random · Accepted Answer · 2019-08-29 14:50:04Z

2

Your for loops can be simplified with a filter

export interface MyRecord {
    dateandtime: string,
    sensor: string,
    temperature: string,
    humidity: string
}

public rowData: MyRecord[] = [];

submitForm(): void {
  this.rowData = record.default.records;

  const dateStart = format(this.validateForm.value.datePickerStart, 'YYYY-MM-DDTHH:mm:ss');
  const dateEnd = format(this.validateForm.value.datePickerEnd, 'YYYY-MM-DDTHH:mm:ss');

  this.rowData = this.rowData.filter((data: MyRecord) => {
    // keep data which are not out of date-bound
    return !isBefore(data.dateandtime, dateStart) && !isAfter(data.dateandtime, dateEnd);
  });  
}

edited Aug 29, 2019 at 14:50

answered Aug 29, 2019 at 14:01

Random

3,2551 gold badge18 silver badges25 bronze badges

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

8 Comments

ABC Over a year ago

Parameter 'data' implicitly has an 'any' type.ts(7006) - should I set the data as any? or (data: { dateandtime: string | number | Date; })?

Random Over a year ago

is rowData typed ? If so, data has the same type (removing the array). If rowData: MySuperType[], then data: MySuperType.

ABC Over a year ago

because I set the rowData: any = []; then this.rowData = record.default.records; where it will get the data inside the templog.json.

ABC Over a year ago

(data: this.rowData) it doesn't work. it should get the data of rowData

Random Over a year ago

@ABC ok, I'll add how to use types too since you seem not to fully understand how it works

|

jithin john · Accepted Answer · 2019-08-30 07:42:18Z

0

Resolved

Earlier you were saying FROM: 08-29-2019 00:00:00 To: 08-29-2019 13:00:00 it doesn't display the data 2019-08-28 12:36:01 which is true. Because 2019-08-28 12:36:01 is not between those range.

And now since you have updated the question, if you want to filter mentioned date please follow below simple JavaScript solution, you can convert it to angular.

var data=[
    {
        "dateandtime": "2018-06-14 01:38:02",
        "sensor": "Sewing Line1",
        "temperature": "25.8",
        "humidity": "99.9"
    },
    {
        "dateandtime": "2018-06-14 01:36:01",
        "sensor": "Sewing Line1",
        "temperature": "25.8",
        "humidity": "99.9"
    },
    {
        "dateandtime": "2018-06-14 01:36:01",
        "sensor": "Heat Seal Area",
        "temperature": "25.9",
        "humidity": "99.9"
    },
    {
        "dateandtime": "2019-08-28 12:36:01",
        "sensor": "Heat Seal Area",
        "temperature": "25.9",
        "humidity": "99.9"
    }
]
data.filter(function(x){ 
                    if(new Date(x.dateandtime)> new Date('06-12-2019 00:00:00') 
                    && new Date(x.dateandtime)< new Date('08-28-2019 14:00:00')){ return x }
      })

edited Aug 30, 2019 at 7:42

answered Aug 29, 2019 at 14:32

jithin john

5724 silver badges12 bronze badges

5 Comments

Random Over a year ago

indeed, the error comes from the test, good catch. But please do not use function(x), use arrow functions (x =>) instead...

ABC Over a year ago

Sir I'm using isBefore and isAfter

ABC Over a year ago

ok sir. I already edit my question FROM: 08-01-2019 TO: 08-29-2019. sorry for mistake. but when i try it to run it doesn't show on my code

jithin john Over a year ago

@ABC I couldn't see you mentioned anything about moment.js. I belive isBefore and isAfter are moment.js functions. But anyways try testing with inbetween date range and see. It should work.

ABC Over a year ago

but it works when the range is june 14, 2018 - august 29,2019 the will display

Collectives™ on Stack Overflow

How to fix angular datepicker filter

2 Answers 2

8 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related