Excel grid filter not working with dates

[Angel Peraza]

Hi! I'm having trouble filtering dates with data grids. I don't know if I need to input the date in a specific format, but I'm doing the following:

I get a date similar to this: "2019-01-04 11:50:53." I'm using Excel filter, but when I open the filter popup, it looks like it's loading. I try removing the column formatting and the popup displays correctly, but when I apply the filter, the data isn't displayed. Here is an example similar to the code I am applying:

<template>

<div id="app">

<ejs-grid

ref="grid"

:dataSource="gridData"

height="315px"

:filterSettings="filterOptions"

:pageSettings="pageConfig"

:allowFiltering="true"

:allowPaging="true"

>

<e-columns>

<e-column

v-for="column in columns"

:field="column.COLUMN_NAME"

:headerText="column.headerText"

:textAlign="column.textAlign"

:type="column.type"

:width="column.width"

:format="column.format"

:allowFiltering="true"

></e-column>

</e-columns>

</ejs-grid>

</div>

</template>

<script>

import {

GridComponent,

ColumnsDirective,

ColumnDirective,

Filter,

Page,

} from '@syncfusion/ej2-vue-grids';

import { data } from './datasource.js';

export default {

name: 'App',

components: {

'ejs-grid': GridComponent,

'e-columns': ColumnsDirective,

'e-column': ColumnDirective,

},

data() {

return {

data: data,

columns: [

{

COLUMN_NAME: 'created_at',

headerText: 'Created At',

textAlign: 'Right',

type: 'date',

width: 80,

format: 'MM/dd/yyyy',

},

{

COLUMN_NAME: 'hash',

headerText: 'Hash',

textAlign: 'Left',

type: 'string',

width: 80,

format: null,

},

],

gridData: [

{

id: 609,

hash: 'HiJi...',

created_at: '2019-01-04 11:50:53',

test_date: '2025-10-02 16:00:24',

},

{

id: 617,

hash: '4xG...',

created_at: '2019-01-14 10:41:04',

test_date: '2025-10-02 16:00:24',

},

{

id: 628,

hash: '8cS...',

created_at: '2019-01-14 10:41:04',

test_date: '2025-10-02 16:00:24',

},

{

id: 636,

hash: 'R2SC...',

created_at: '2020-07-08 11:50:53',

test_date: '2025-10-02 16:00:24',

},

{

id: 639,

hash: 'PW2c...',

created_at: '2020-07-08 11:50:53',

test_date: '2025-10-02 16:00:24',

},

],

filterOptions: { type: 'Excel' },

pageConfig: { pageSize: 2 },

};

},

provide: {

grid: [Filter, Page],

},

};

</script>

<style></style>

[Aishwarya Rameshbabu]

Hi Angel Peraza,

Greetings from Syncfusion support.

Based on the information provided, it has been observed that you are encountering an issue when attempting to open the filter dialog for date-type columns in the Syncfusion Grid. The data bound to your Grid includes date values as custom datetime strings. However, the Grid requires actual JavaScript Date objects for date-type columns to properly display the filter UI and execute filtering operations correctly.

Therefore, we recommend parsing the data before binding it to the Grid. Please refer to the code example and sample below, which demonstrates parsing the data and assigning it as the Grid data source.

App.vue

  

// Convert date strings to Date objects

  const parsedData = gridData.map(item => ({

    ...item,

    created_at: new Date(item.created_at),

    test_date: new Date(item.test_date),

  }));

Sample: https://stackblitz.com/edit/wgkvkf9b-namzbwyw?file=src%2FApp.vue

Screenshot:

 If you need any other assistance or have addition questions, please feel free to reach out us.

 

Regards,

Aishwarya R

[Angel Peraza]

Thanks for your reply, I just have one more question.

We have a very large data set, and I was wondering if parsing the field of the entire data set would be the best option.

[Aishwarya Rameshbabu]

Hi Angel Peraza,

We acknowledge your concern regarding the parsing of a very large dataset and its effect on performance.

When working with large datasets in the Syncfusion Grid,  it remains essential to convert date strings into JavaScript Date objects for columns of date type to facilitate accurate filtering. However, there are methods to optimize this process and reduce performance impact.

Rather than parsing the entire dataset on the frontend after receiving it, consider converting the date strings into Date objects at the data source or during data retrieval. For instance, if your data originates from a server, adjust the backend API to provide dates in a format that JavaScript can directly interpret as Date objects. This approach significantly reduces the parsing workload on the client side and improves overall performance.

Please let us know more about your data source or integration setup, and we will be happy to suggest a tailored solution.

Regards,

Aishwarya R

[Angel Peraza]

Sure! We use Laravel PHP to manage our backend and receive data from the database using a stored procedure. So, we get something like this on our frontend:

{

    "result": [

        {

            "hash": "*******",

            "score": null,

            "created_at": "2019-01-04 11:50:53",

        },

        {

            "hash": "********",

            "score": null,

            "created_at": "2019-01-14 10:41:04",

        },

        {

            "hash": "*********",

            "score": null,

            "created_at": "2019-01-14 16:13:16"

        },

    ]

}

We were looking to filter by the date field but we have that Issue

[Aishwarya Rameshbabu]

Hi Angel Peraza,

Thank you for providing the details about your setup.

 

Based on the information shared, it has been observed that you are using local data binding in the Syncfusion Grid with date strings retrieved from a Laravel PHP backend via a stored procedure. To enable proper filtering for date-type columns in the Grid, it is necessary to convert the date strings into JavaScript Date objects before binding the data to the Grid. This ensures that filtering and other data operations work correctly. We understand your concern regarding the performance impact of handling large datasets. However, this conversion remains essential for the Grid to interpret and process date values correctly.

 

Regards,

Aishwarya R

[Crew Elis]

@stickman hook,  this problem sounds be the same with yours. Can you give him some your experience?