Set an AngularJS date filter format to be used by all references to the date filter?

Question

Rather that having to define a custom format for each call to the date filter, is there a way to globally define a default format (other than 'medium')?

I would like to have the format set in one file rather than all over the place in my code (the date format may end up being changed in the future and a modification in one file would be much nicer than having to make changes in many files).

This is what I am doing now (defining date format each time):

{{systemTime | date:'dd MMMM @ HH:mm:ss'}}
{{modifiedTime | date:'dd MMMM @ HH:mm:ss'}}
{{getShippedTime() | date:'dd MMMM @ HH:mm:ss'}}
   etc.

I was thinking of creating a custom filter (let's call it myDate), which would act as a wrapper and then pass off the date string to the Angular date filter with my custom format, so then my code could just look like this:

{{systemTime | myDate}}
{{modifiedTime | myDate}}
{{getShippedTime() | myDate}}
   etc.

However, I can't figure out how to make the myDate filter point to the Angular date filter.

Thanks for your help.

possible duplicate: http://stackoverflow.com/questions/12236905/how-to-extend-or-override-existing-filters-in-angularjs — Brian Lewis, Aug 22 '13 at 19:32
http://angulartutorial.blogspot.in/2014/04/date-filtering-and-formatting-in.html — Prashobh, Apr 08 '14 at 10:02

Kabb5 · Accepted Answer · 2013-08-23T12:23:19.833

41

Based on some more research and then considering the comment by moderndegree, I have found that the following myDate filter will work:

.filter('myDate', function($filter) {    
    var angularDateFilter = $filter('date');
    return function(theDate) {
       return angularDateFilter(theDate, 'dd MMMM @ HH:mm:ss');
    }
});

edited Aug 23 '13 at 12:23

answered Aug 23 '13 at 12:16

Kabb5

3,760
2
33
55

2

You can also include 'dateFilter' instead of including '$filter' and grabbing the date filter from that by name. 'fooFilter' is automatically available as a dependency name when you define a 'foo' filter. – Ates Goral May 14 '15 at 14:29

Prashobh · Answer 2 · 2015-10-28T11:56:08.547

6

Try this

angular.module('yourmodule').filter('myDate', function($filter)
{
    return function(input)
    {
        if(input == null){ return ""; }
        var _date = $filter('date')(new Date(input), 'dd MMMM @ HH:mm:ss');
        return _date.toUpperCase();
    };
});

Html

{{systemTime | myDate}}

Date filtering and formatting in Angular js.

edited Oct 28 '15 at 11:56

answered Apr 08 '14 at 10:01

Prashobh

9,216
15
61
91

score 5 · Answer 3 · answered Mar 07 '16 at 15:53

5

Use a decorator,

It's not what you explicitly asked for, use a decorator. it's built in angular and designed to patch services, directives, filters etc ...

in your case, if the date filter is not provided, you should use your custom date format.

app.config(function ($provide) {
    $provide.decorator('dateFilter', function ($delegate) {
        return function () {

            // Check if the date format argument is not provided
            if (!arguments[1]) { 
                arguments[1] = 'dd MMMM @ HH:mm:ss';
            }

            var value = $delegate.apply(null, arguments);
            return value;
        };
    })
});

answered Mar 07 '16 at 15:53

Jossef Harush Kadouri

32,361
10
130
129

I like this answer, but beware that arguments cant be updated directly, you need to do something like `var args = Array.prototype.splice.call(arguments)` before checking and updating it. – Pete Apr 12 '16 at 15:56
Very elegant - I think it is better than declaring another a custom filter. – Tomer Cagan Jan 10 '17 at 13:08

score 2 · Answer 4 · answered Aug 23 '13 at 00:13

2

The format defaults to mediumDate if none is provided. There is nothing built in to have it default to something else.

https://github.com/angular/angular.js/blob/master/src/ng/filter/filters.js#L382

answered Aug 23 '13 at 00:13

Hector Virgen

169
8

Sebastian Castaldi · Answer 5 · 2015-12-11T16:43:05.720

In case you are working with .aspx pages and have the date format stored in a configuration file...

From the .aspx that injects your Angular page, set a global variable with the web.config date format

var _settingsDateFormat = '<%=appSettings.DateFormat%>';
Set a global filter to be used through your app

yourModule.filter('myDateFormat', function ($filter) {
        return function (input) {
            if (input == null) { return ""; }
            var formattedDate = $filter('date')(new Date(input), _settingsDateFormat);
            return formattedDate;
        };
});

Just add the custom filter to your dates


       Effective {{row.StartDate|myDateFormat}} - {{row.StopDate|myDateFormat}}

Set an AngularJS date filter format to be used by all references to the date filter?

5 Answers5

Use a decorator,

Linked