Grid , Filterrow Date format

[antrax13Participant]

Hi, long story short. Filter is working on wrong format.

My data is formatted as “dd/MM/yyyy”, but the filter tries to process it in “MM/dd/yyyy” how can I tell filter to process them in that way?

I spent 2 hours and test all combinations with no result.

var source = {
                datatype: "json",
                dataField: [
                    {'name': 'raisedDate1', 'type' : 'date'},
                    {'name': 'raisedDate2', 'type' : 'date'},
                    {'name': 'raisedDate3', 'type' : 'date'},
                ],
                url: anomalyUrl
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            $('#grid').jqxGrid({
                width: '100%',
                source: dataAdapter,
                columnsresize: true,
                sortable: true,
                pageable: true,
                filterable: true,
                showfilterrow: true,
                selectionmode: 'singlerow',
                columnsresize: true,
                enablebrowserselection: true,
                theme: "bootstrap",
                columns: [
                    {
                        text: 'Raised Date 1',
                        dataField: 'raisedDate1',
                        width: '180px',
                        filtertype: 'range',
                    },
                    {
                        text: 'Raised Date 2',
                        dataField: 'raisedDate2',
                        width: '180px',
                        filtertype: 'range',
                        cellsformat: 'd/m/yyyy',
                    },
                    {
                        text: 'Raised Date 3',
                        dataField: 'raisedDate3',
                        width: '180px',
                        filtertype: 'range',
                        cellsformat: 'dd/MM/yyyy',
                    },
                ]
            });

Source

raisedDate1: "01/06/2020"
raisedDate2: "01/06/2020"
raisedDate3: "01/06/2020"

Thats 1st of June 2020

Raised Date 1 – picking 1st of June 2020 in calendar and in filterrow it will show “6/1/2020 – 6/1/2020” – No results found
Raised Date 1 – picking 6th of January 2020 in calendar and in filterrow it will show “1/6/2020 – 1/6/2020” – Results found

Raised Date 3 – picking 1st of June 2020 in calendar and in filterrow it will show “6/1/2020 – 6/1/2020” – No results found
Raised Date 3 – picking 6th of January 2020 in calendar and in filterrow it will show “1/6/2020 – 1/6/2020” – Results found

I have exactly this issue (https://www.jqwidgets.com/community/topic/jqxgrid-date-filter/) that is user kiluakun describing but answer from Peter Stoev is not fixing this issue or not providing solution

He is saying something to pass also H:i:s but then my grid is showing also time 00:00:00 and ignores cellsformat: ‘dd/MM/yyyy’

Any idea how to fix it?

[antrax13Participant]

Here is the link to fiddle: https://jsfiddle.net/69n78uxg/

[HristoParticipant]

Hello antrax13,

Please, try this example below:
https://jsfiddle.net/txhi/84yxowhj/
I would like to purpose your attention to the first column.
Meanwhile, I will create a work item for this case.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[antrax13Participant]

Thanks Hristo,

your solution works but what is so special with my case?

I would assume that this will work out of the box.

https://jsfiddle.net/w1hxevps/

I passed date in yyyy-MM-dd format
then in colums definition I will specify cellsformat to dd/MM/yyyy but grid still shows date in yyyy-MM-dd format and only filter row has been updated with a new format.

Seems strange to me

[adminKeymaster]

The format property of the dataSource object should match the format of the date in your datasource.
If your data is var data = ‘[{“raisedDate1″:”2020-06-01”}]’;
The format should be: format: “yyyy-MM-dd”.

Regards,
Peter

[antrax13Participant]

I dont accept this as an answer as I want to achieve following:

• have data in grid in dd/MM/yyyy format
• have a date in filter row in dd/MM/yyyy format

What Hristo post is working but I dont understand why I need to have

var dataAdapter = new $.jqx.dataAdapter(source, {
  autoBind: true,
  beforeLoadComplete: function (records) {
    for (i = 0; i < records.length; i++) {
      var element = records[i];
      var newDateArray = element.raisedDate1.split("/");
      var newDate = new Date(newDateArray[2], newDateArray[1] - 1, newDateArray[0]);
      element.raisedDate1 = newDate;
    }

    return records;
  }
});

if all this bit of code is doing is just changing dd/MM/yyyy to a date fair enough so in order to get rid of that unnecessary code I will pass date as yyyy-MM-dd format and in colums definition I will set cellsformat to “dd/MM/yyyy” why date in grid is still displayed as 2020-06-01 if I specified cellsformat? Looks like all it is setting is format of filter row date column and not the actual data in grid.

https://jsfiddle.net/t48msgew/

Very simple task that I want to achieve. Use dd/MM/yyyy in grid data, filter possibly sort to be based on dd/MM/yyyy. I am flexible on passing any date format in datasource to remove Hristo’s workaround.

[HristoParticipant]

Hello antrax13,

I already created a work item for this and also, I include the topic there.
Thank you for these details and for your patience.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[adminKeymaster]

Hi antrax13,

The DataGrid is not initialized correctly. dataField is set, but dataFields is expected. If dataFields is set it works as expected.

Best Regards,
Peter Stoev

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts