DateRange Filtering

Webix JS
1

Hi,

I have created this snipped to make dateRange filtering.

http://webix.com/snippet/0674b51e

which is not working on purpose.

I have seen in documentation that I have to add new Date ()
like this

   var data = [
			{ id:1, title:"Create snippets for Alan", date:new Date(2016, 07, 07, 14, 55)},
			{ id:2, title:"Call Barbara for license", date:new Date(2015, 07, 08, 18, 20)},
			{ id:3, title:"Check newbie's code", date:new Date(2016, 05, 04, 11, 08)},
			{ id:4, title:"Fix bugs with multi selection", date:new Date(2016, 01, 06, 15, 26)},
			{ id:5, title:"Answer support letters", date:new Date(2016, 11, 23, 22, 17)},
			{ id:6, title:"Implement secret functionality", date:new Date(2016, 04, 16, 16, 40)}
		];

The thing is that the dates comes from PHP and I have to declare foreach date

 scheme:{
	$init:function(obj){
	    	obj.due_date = new Date(obj.due_date)
	},

but I have 30 datatables with a lot different date columns and I would not like to declare them all in $init.

How can I do it better ?

2

I think the best solution is this

 format:function(value){ 
        value = $.datepicker.formatDate('yy-mm-dd', new Date(value)); // new Date(value);
        return value; 
    }

and this is added in each column you want of datatable in column definition

3

The problem is that now the date filter does not work.

Posted snippet http://webix.com/snippet/ee5a67dd

Need some help

4

One more snippet with timestamps but the date filter looks that not works

http://webix.com/snippet/cc29acd7

5

Please note that the format affects only visual representation (as well as the template), while filters and editors work with the real data.

>the dates comes from PHP

In this case, you can define a custom proxy for the data loading/saving and modify needed data during the loading:

http://webix.com/snippet/af8ac0d5

Another option is a data mapping.

columns: [                                               
  { 
     id: "year", width: 150, 
     header:["Date", { content:"dateRangeFilter"}],
     map:"(date)"
  }
]
6

Good morning,

I think this with map could work fine

7

One other thing I would like to mention is that to work with dateFIlter I sould add as an example the filter as =mm/dd/yyyy (07/17/2025).

If I have format %d.%m.%Y and I want to add the filter based on the format it will not work

http://webix.com/snippet/418f9c95

There is any build solution ?

Thanks

8

Also the dates in data MUST have only the format Y m d to render the right values and make the filter after

 data:[
{title:"title1", date:"2016-01-25"},
{title:"title1", date:"2016-02-25"},
{title:"title1", date:"2016-03-25"},
{title:"title1", date:"2016-04-25"},
{title:"title1", date:"2016-05-25"}
9

dateFilter works according to the current locale. For the "en-US" the default date format is mm-dd-yyyy. You can redefine it as follows:

webix.i18n.dateFormat = "%d.%m.%Y";
webix.i18n.setLocale();

As for the data mapping, it is based on the standard data parsing pattern parseFormat, which is also applied globally.

Actually, you can change it, but note that it will affect the entire app, i.e. all dates will be translated accordingly:

http://webix.com/snippet/121ef137