Date Filter gets reversed

[PietervkParticipant]

Hi,
I have applied a datefilter to the date columns in my grid. This works, and I can filter the data as expected. However, when clicking again on the menu icon, the date in the text box is reversed.

` var source = {
datatype: “json”,
datafields: [
{ name: ‘ClientLabel’, type: ‘string’ },
{ name: ‘TestId’, type: ‘string’ },
{ name: ‘DtSession’, type: ‘date’, format: ‘yyyy-MM-dd’ }
],
async: true,
id: ‘Id’,
etc`

columnsd = [
        { text: $('.ClientLabel').text(), dataField: 'ClientLabel', pinned: true, width: 180 },
        { text: $('.TestId').text(), dataField: 'PromisName', width: 147 },
        { text: $('.dtSession').text(), dataField: 'DtSession', filtertype: 'date',cellsformat: 'dd-MM-yyyy', width: 85 },
 ];
     
$("#jqxgrid").jqxGrid(
        {
            source: dataAdapter,
            width: StWidth,
            pageable: true,
            pagesize: pagesize,
            sortable: true,
            filterable: true,
            autoshowfiltericon: true,
            enabletooltips: true,
            selectionmode: 'multiplerowsextended',
            columnsresize: true,
            columnsautoresize: true,
            pagesizeoptions: ['5', '10', '20', '30'],
            autoshowloadelement: false,
            autoheight: true,
            theme: 'energyblue',
            columns: columnsd,
            virtualmode: true,
            rendergridrows: function (params) {
                return params.data;
            }

        })

So the date filter can be filled according to the cellsformat: ‘dd-MM-yyyy’. But when you click again on the filter, it is reversed to ‘MM-dd-yyyy’. So 4-10-2019 becomes 10-4-2019. When you filter on 30-9-2019, I get the correct filter, but when clicking on the filter again it becomes NaN-NaN-NaN, I assume this is because the 9th of the 30th month is not valid.

Did I miss a setting somewhere?

[Peter StoevKeymaster]

Hi Pietervk,

The Grid is in virtual mode, i.e filtering is by the server’s custom filtering code here, right? Is the filtering applied through a TextBox or DateTimeInput components? Have you tried changing the format by handling the createfilterwidget callback function? By using it, you can customize what’s displayed in the filter.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[PietervkParticipant]

Hi Peter,
thanks for your help. The filtering is executed on the server. But the problem is in the filtering datetimeinput of the grid itself. Pressing the hamburger menu of the grid datetime column, and selecting a date, to filter works. But when I click it again to change the date, it shows the date in US notation, so with month and day reversed compared to NL notation.

I have modified a demo to show the effect here: https://jsfiddle.net/petitbarzun/L8f5m6ru/
Filter on the order date. When you sort descending, and then filter on less than 3-9-2019, notice you get the dates as expected. When you click on the hamburger menu on the column again, notice that the date has changed to 9-3-2019. If you now click filter again, notice that the new date gets applied as the filter. If you select a day > 12, for example 21-9-2019, filter and click the menu again, you now get NaN-NaN-0NaN as date.

Kind regards

Pieter

[Peter StoevKeymaster]

Hi Pieter,

I can’t see a reference to globalize.js in the project. Could you add it? It is required for datetimeinput and calendar components.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[PietervkParticipant]

Hi Peter,
Yes it has: <script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js”></script>

This is the list I use in my own project.
“jq/jqxcore.js”,
“jq/jqxbuttons.js”,
“jq/jqxdropdownlist.js”,
“jq/jqxdatetimeinput.js”,
“jq/jqxcalendar.js”,
“jq/jqxgrid.js”,
“jq/jqxgrid.pager.js”,
“jq/jqxgrid.selection.js”,
“jq/jqxgrid.sort.js”,
“jq/jqxgrid.filter.js”,
“jq/jqxgrid.columnsresize.js”,
“jq/jqxdata.js”,
“jq/jqxcheckbox.js”,
“jq/jqxmenu.js”,
“jq/jqxlistbox.js”,
“jq/jqxscrollbar.js”,
“jq/jqxtooltip.js”,
“jq/jqxtabs.js”,
“jq/jqxexpander.js”,
“jq/jqxdragdrop.js”,
“jq/jqxcombobox.js”,
“jq/globalize.js”,
“jq/globalize.culture.nl-NL.js”

Thanks,
Pieter

[adminKeymaster]

Hi Pieter,

We will need to fix this. We added a work item: https://github.com/jqwidgets/jQWidgets/issues/198

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[PietervkParticipant]

Thanks Peter, I have subscribed to that issue.

Pieter

[Peter StoevKeymaster]

Hi Pieter,

The issue will be resolved in the next update of jQWidgets.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[PietervkParticipant]

Thanks, it works!

[Author]

Posts