ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: mac on May 23, 2014, 12:00:47 pm

Title: Date format
Post by: mac on May 23, 2014, 12:00:47 pm

Hello,

There any method to change the format of the data in the grid?

The problem is that I had to filter and show the date with dd/mm/yy format.

Thanks

Title: Re: Date format
Post by: paramvir on May 23, 2014, 12:17:50 pm

Please use $.datepicker.formatDate in the column.render callback function e.g.,

return $.datepicker.formatDate('dd/mm/yy', new Date(ui.cellData));

Title: Re: Date format
Post by: mac on May 23, 2014, 01:37:02 pm

Well, that works to recover data date in mm/dd/yy format and if I don't change the filter format it works too.

But filtering does not work if the date is on this format: dd/mm/yyyy.

Okay, let's see a example code, this is my DatePicker, if I don't change the format (commented line) it works but when I use dd/mm/yyyy format filter doesn't work.

I want to display in filter the same format that on the row.

Code: [Select]

function pqDatePicker(ui) {
        var $this = $(this);
        $this
            .css({ zIndex: 3, position: "relative" })
            .datepicker({
                changeYear: true,
                changeMonth: true,
//dateFormat: "yy-mm-dd",
                onClose: function (evt, ui) {
                    $(this).focus();
                }
            });
    }

Title: Re: Date format
Post by: paramvir on May 23, 2014, 04:08:25 pm

I couldn't get what you mean by filter format.

you have to keep the date in mm/dd/yyyy format in the data for filtering to work while you can present ( view ) the data in grid in any format using render callback.

And datepicker editor has no relation to the filtering.

Title: Re: Date format
Post by: mac on May 23, 2014, 04:40:22 pm

I mean by filter format, the dataFormat on datapicker, was my mistake.

I know that datepicker editor has no relation to the filtering, but if I want to display the same dateFormat on the filter input I can't.

I have this colModel, I keep the date in mm/dd/yyyy format in the data:

Code: [Select]

{ title: "Fecha de carga", width: 200, dataType: "date", resizable:true,
render:function( ui ){
return $.datepicker.formatDate('dd/mm/yy', new Date(ui.cellData));
}



Example images:

Image1: the data on the grid.

(http://s8.postimg.org/76e4z724l/image.png)

Image2: filtered data. With dateFormat default on datepicker.

(http://s27.postimg.org/9fxk9dtcz/image.png)

Image3: no rows with dateFormat:'dd/mm/yy' on datepicker.

(http://s16.postimg.org/prdasfonp/image.png)

Title: Re: Date format
Post by: paramvir on May 23, 2014, 07:48:20 pm

ok, I see what you mean

Its solution is to implement your own filter.listener instead of using the inbuilt listener i.e., listeners : [ 'change' ].

Code: [Select]

listeners: [{ 'change': function (evt, ui) {
        //debugger;
                        ui.value =  change format into mm/dd/yyyy from ui.value
                        ui.value2 = change format into mm/dd/yyyy from ui.value2
        var $grid = $(this).closest(".pq-grid");
        $grid.pqGrid("filter", {
            oper: 'add',
            data: [ui]
        });
}
}]


Title: Re: Date format
Post by: mac on May 26, 2014, 12:40:27 pm

Ok, thanks a lot, now filter does the work that I want.

Maybe in the future you can implement this on pqgrid, can be very useful for people that's not using mm/dd/yy format :D

For change the date I splited the date like this:

Code: [Select]

var d1 = ui.value.split('/');
var d2 = ui.value2.split('/');
ui.value = d1[1]+'/'+d1[0]+'/'+d1[2];
ui.value2 = d2[1]+'/'+d2[0]+'/'+d2[2];

Title: Re: Date format
Post by: paramvir on August 05, 2015, 08:25:15 pm

Thanks mac

A complete example for custom date format has been posted here: http://paramquery.com/pro/demos/filter_date