ParamQuery grid support forum

General Category => ParamQuery Pro Evaluation Support => Topic started by: webifi on December 05, 2014, 03:18:01 am

Title: Working with unix/epoch timestamps
Post by: webifi on December 05, 2014, 03:18:01 am

I'm working with date columns that are in unix time stamps (ms since epoch).

Getting them to display as string/formatted dates is easy enough with a render function, but I'm having trouble creating a local header filter using a datePicker.

Other than using a string/formatted date, what options do I have?

Title: Re: Working with unix/epoch timestamps
Post by: paramvir on December 06, 2014, 09:12:40 am

Solution to your use case is similar to the post here:

http://paramquery.com/forum/index.php?topic=678.msg3814#msg3814

you need to implement custom filter listener.

Please let know if you need further assistance.

Title: Re: Working with unix/epoch timestamps
Post by: webifi on December 11, 2014, 09:04:25 pm

Thanks.

One issue I'm having is that the text dates in the filter fields disappear after sorting the column (clicking on the column titles to change the sort order).  The filter still stays in place, but the textual representation of them disappears from the filter text boxes.

Code: [Select]

var _pqDateFilter = function(ui) {
        var $this = $(this);
        $this.css({zindex:9999,position:"relative"}).datepicker({changeYear:true, changeMonth: true, onClose:function(evt,ui){$(this).focus()}});
        $this.filter(".pq-from").datepicker("option","defaultDate", new Date("01/01/2001"));
        $this.filter(".pq-to").datepicker("option","defaultDate", new Date());
    }   

filter: {
                type: 'textbox',
                condition: 'between',
                init: _pqDateFilter,
                listeners: [{
                        'change':function(evt, ui){
                            ui.value = new Date(ui.value).getTime();
                            ui.value2 = new Date(ui.value2).getTime();
                            var $grid = $(this).closest('.pq-grid');
                            $grid.pqGrid("filter", {
                                oper: 'add',
                                data: [ui]
                            })
                        }
                }]
            }




Title: Re: Working with unix/epoch timestamps
Post by: paramvir on December 12, 2014, 05:22:00 pm

Could you please post a small example of the issue faced by you in jsfiddle.

Title: Re: Working with unix/epoch timestamps
Post by: webifi on December 12, 2014, 09:38:17 pm

See:
http://jsfiddle.net/b6b710mz/27/

- Set date filter to 01/01/2013 through  12/31/2014.
- Notice the filtered results.
- Now click the header for any column to sort the grid.
- Notice the data is still filtered, as expected, but the date filter text boxes are now empty.

Title: Re: Working with unix/epoch timestamps
Post by: webifi on December 12, 2014, 09:41:25 pm

I should add:

I also can't figure out an easy way to clear the custom date filter once set.

Title: Re: Working with unix/epoch timestamps
Post by: paramvir on December 15, 2014, 11:45:19 pm

In your case, date is being stored as timestamp in the filter values, you need to reformat the date as mm/dd/yy or yy-mm-dd in column.filter.init before applying defaultDate option of datepicker ( otherwise datepicker clears the textbox values ) as

Code: [Select]


               var filter = ui.column.filter,
                   value = filter.value,
                   value = $.datepicker.formatDate('mm/dd/yy', new Date(value)),
                   value2 = filter.value2,
                   value2 = $.datepicker.formatDate('mm/dd/yy', new Date(value2));

               $this.filter(".pq-from")
                   .val(value) //change the value in 1st textbox
                   .datepicker("option", "defaultDate", new Date("01/01/2010"));

               $this.filter(".pq-to")
                   .val(value2) //change the value in 2nd textbox
                   .datepicker("option", "defaultDate", new Date());


corrected jsfiddle:

http://jsfiddle.net/b6b710mz/28/


Any filter value can be cleared by use of filter API { oper: 'replace' } or directly manipulating JSON data column.filter.value or column.filter.value2