Add new format to Angular date filter?

Question

Is it possible to inject a new shorthand format into the Angular date filter?

For example, I can currently do this: {{ myScope.timestamp | date: 'shortDate' }}.

What I'd like to do is this: {{ myScope.timestamp | date: 'paddedShortDate' }}, which would force single-digit date parts to be padded with a leading 0.

I realize I can create my own filter to do this for me—I'm more curious if existing filters are extensive in any manner.

Whelp, took a few edits and re-reading a few things, but I found a way to do it. — Blue
– Blue, Commented Aug 3, 2016 at 23:05

Blue · Accepted Answer · 2016-08-04 17:15:59Z

2

Looking at the source code here, DATE_FORMATS is fetched from $locale. While I wouldn't recommend editing these (As $locale.DATE_FORMATS is a private API, and can change in the future), you should be able to do it via a run block:

app.run(['$locale', function($locale) {
    $locale.DATETIME_FORMATS.paddedShortDate = 'MM/dd/yy';
}]);

As you mentioned, you didn't want to create another filter, but that in my opinion would be the better way to go. A simple filter should work fine:

var MY_DATETIME_FILTERS = {
    'paddedShortDate': 'MM/dd/yy'
};

app.filter('myFormat', ['$filter', function($filter) {
    return function(format) {
        return $filter('date')(input, MY_DATETIME_FILTERS[format] || format);
    }
}]);

edited Aug 4, 2016 at 17:15

answered Aug 3, 2016 at 22:54

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

core Over a year ago

Small correction to answer for any future visitors to this page: return function(input, format) { return $filter('date')(input, MY_DATETIME_FILTERS[format] || format); }

Collectives™ on Stack Overflow

Add new format to Angular date filter?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related