jQuery UI Widgets Forums Grid Date Filter gets reversed

This topic contains 6 replies, has 3 voices, and was last updated by  Pietervk 8 hours, 40 minutes ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Date Filter gets reversed #106885

    Pietervk
    Participant

    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?

    Date Filter gets reversed #106918

    Peter Stoev
    Keymaster

    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

    Date Filter gets reversed #106952

    Pietervk
    Participant

    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

    Date Filter gets reversed #106997

    Peter Stoev
    Keymaster

    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

    Date Filter gets reversed #106998

    Pietervk
    Participant

    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

    Date Filter gets reversed #107005

    admin
    Keymaster

    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

    Date Filter gets reversed #107007

    Pietervk
    Participant

    Thanks Peter, I have subscribed to that issue.

    Pieter

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.