CODEWITHSUNDEEP
javascripthtmldatefilteringwebix
Loj
Loj

Reputation: 437

How to change the filtering pattern of the Webix dateFilter?

How to specify the format of the dateFilter in Webix datatable?

I have a grid where dates are formatted to "%d.%m.%Y":

columns:[
  { id:"date", header:[{ content:"dateFilter" }], width:160, format:myFormat }
]

where myFormat is webix.Date.dateToStr("%d.%m.%Y"); The result is dd.mm.yyyy

Here's a snippet with the similar grid: http://webix.com/snippet/1ec86aa8

The point is that the dateFilter still requires the full dates as %m-%d-%Y (mm-dd-yyyy)

pattern of the Webix date filter

So I'm looking for a way to change this predefined pattern. Any suggestion are appreciated.

Upvotes: 0

Views: 596

Answers (1)

fabien-michel
fabien-michel

Reputation: 2182

dateFilter convert user entered date from str to date using webix.i18n.dateFormatDate

By the way, it does more thing. For exemple you can enter "<1996" and so it will not convert using the above method date but extract the year.

Then it convert the guessed date to an interger and perform an interger comparison with data's dates

Sadly "webix.i18n.dateFormatDate" use the webix.i18n.dateFormat which depend the locale to convert string to date. and there is no way to customize the format used by dateFilter.

A solution for you is to create a custom filter which do the same job as dateFilter but using your own date convertion :

Here is a modified webix code of dateFilter :

webix.ui.datafilter.myDateFilter = webix.extend({
    format:function(value){
        if (value === "") return "";
        var date = new Date();

        if (value.indexOf("today") != -1){
            date = webix.Date.dayStart(date);
        } else if (value.indexOf("now") == -1){
            var parts = value.match(/[0-9]+/g);
            if (!parts||!parts.length) return "";
            if (parts.length < 3){
                parts.reverse();
                date = new Date(parts[0], (parts[1]||1)-1, 1);
            } else
                // Change here
                date = webix.Date.strToDate("%d.%m.%Y")(value.replace(/^[>< =]+/,""));

        }

        return date.valueOf();
    }
}, webix.ui.datafilter.numberFilter);

Updated snippet : http://webix.com/snippet/20c0175a

Upvotes: 1

Related Questions