Author Topic: Date format  (Read 11495 times)

mac

  • Pro Economy
  • Newbie
  • *
  • Posts: 9
    • View Profile
Date format
« 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

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6092
    • View Profile
Re: Date format
« Reply #1 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));

mac

  • Pro Economy
  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Date format
« Reply #2 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();
                }
            });
    }

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6092
    • View Profile
Re: Date format
« Reply #3 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.
« Last Edit: May 23, 2014, 04:17:47 pm by paramquery »

mac

  • Pro Economy
  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Date format
« Reply #4 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.



Image2: filtered data. With dateFormat default on datepicker.



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


paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6092
    • View Profile
Re: Date format
« Reply #5 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]
        });
}
}]

mac

  • Pro Economy
  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Date format
« Reply #6 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];

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6092
    • View Profile
Re: Date format
« Reply #7 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