Working with unix/epoch timestamps

[webifi]

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?

[paramvir]

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.

[webifi]

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]
                            })
                        }
                }]
            }




[paramvir]

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

[webifi]

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.

[webifi]

I should add:

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

[paramvir]

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