Is it possible to extend existing "standard" filters (date
, number
, lowercase
etc)?
In my case I need to parse date from YYYYMMDDhhmmss format so I'd like to extend (or override) date
filter instead of writing my own.
2 Answers
I prefer to implement the decorator pattern, which is very easy in AngularJS.
If we take @pkozlowski.opensource example, we can change it to something like:
myApp.config(['$provide', function($provide) {
$provide.decorator('dateFilter', ['$delegate', function($delegate) {
var srcFilter = $delegate;
var extendsFilter = function() {
var res = srcFilter.apply(this, arguments);
return arguments[2] ? res + arguments[2] : res;
}
return extendsFilter;
}])
}])
And then in your views, you can use both.. the standard output and the extended behavior.
with the same filter
<p>Standard output : {{ now | date:'yyyyMMddhhmmss' }}</p>
<p>External behavior : {{ now | date:'yyyyMMddhhmmss': ' My suffix' }}</p>
Here is a working fiddle illustrating both techniques: http://jsfiddle.net/ar8m/9dg0hLho/

- 9,334
- 4
- 37
- 40
-
8This is absolutely 100% exactly what I needed. I'd up vote you three times if I could. – iwalkbarefoot Sep 16 '15 at 23:33
-
3This the correct answer. But remember that you have to append ```Filter``` for filters to get them. Recreating a filter with the same name is also fine by me, as they're usually (always?) a single function, you're going to change any way. – hugo der hungrige Nov 06 '15 at 00:49
-
Great approach. q: first param of `srcFilter.apply(...)` is `this`, however i saw other examples that the first param is `null`. what's it's purpose? – Jossef Harush Kadouri Mar 07 '16 at 15:34
-
@JossefHarush "The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)." https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Syntax for reasoning, some good answers here https://stackoverflow.com/questions/33640079/why-would-you-pass-null-to-apply-or-call – JesseDahl Sep 25 '18 at 20:08
-
YES. I used this to provide an alternate formatting for Korean currency (I guess the format used by AngularJS using angular-locale is wrong) and then fall back to the original filter for other cultures. – dmbaughman Nov 19 '18 at 19:42
I'm not sure if I understand your question correctly, but if you would like to extend functionality of existing filters you could create a new filter that decorates an existing one. Example:
myApp.filter('customDate', function($filter) {
var standardDateFilterFn = $filter('date');
return function(dateToFormat) {
return 'prefix ' + standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss');
};
});
and then, in your template:
{{now | customDate}}
Having said the above, if you simply want to format a date according to a given format this can be done with the existing date filter:
{{now | date:'yyyyMMddhhmmss'}}
Here is the working jsFiddle illustrating both techniques: http://jsfiddle.net/pkozlowski_opensource/zVdJd/2/
Please note that if a format is not specified AngularJS will assume that this is 'medium' format (the exact format depends on a locale). Check http://docs.angularjs.org/api/ng.filter:date for more.
The last remark: I'm a bit confused about the 'parse from' part of your question. The thing is that filters are used to parse an object (date in this case) to string and not vice verse. If you are after parsing strings (from an input) representing dates you would have to look into NgModelController#$parsers (check the "Custom Validation" part in http://docs.angularjs.org/guide/forms).

- 1,272
- 1
- 11
- 23

- 117,202
- 60
- 326
- 286
-
3According to documentation date filter can accept dates as ISO 8601 formated strings. In my case input format is 'yyyyMMddHHmmss' so standard filter `date` can't parse it. – coxx Sep 02 '12 at 21:39