CODEWITHSUNDEEP
javascriptangular
ABC
ABC

Reputation: 832

How to fix angular datepicker filter

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"
        }
    ]
}

Upvotes: 3

Views: 280

Answers (2)

jithin john
jithin john

Reputation: 572

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 }
      })

Upvotes: 0

Random
Random

Reputation: 3236

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);
  });  
}

Upvotes: 2

Related Questions