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\'

Answer 1

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;
        };
    })
});

Answer 2

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');
    }
});

Answer 3

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

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

   var _settingsDateFormat = '<%=appSettings.DateFormat%>';

2. 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;
        };
});

3. Just add the custom filter to your dates

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

Answer 4

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.

Answer 5

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