web-dev-qa-db-fra.com

Définir un format de filtre de date AngularJS à utiliser par toutes les références au filtre de date?

Plutôt que de devoir définir un format personnalisé pour chaque appel du filtre date, existe-t-il un moyen de définir globalement un format par défaut (autre que 'medium')?

Je souhaite que le format soit défini dans un fichier plutôt que partout dans mon code (le format de la date pourrait éventuellement être modifié à l'avenir et une modification dans un fichier serait beaucoup plus agréable que de devoir modifier plusieurs fichiers. ).

Voici ce que je suis en train de faire (définir le format de la date à chaque fois):

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

Je pensais créer un filtre personnalisé (appelons-le myDate), qui agirait comme un wrapper puis transmettrait la chaîne de date au filtre Angular date avec mon format personnalisé. Mon code pourrait alors ressembler à ce:

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

Cependant, je ne vois pas comment faire en sorte que le filtre myDate pointe sur le filtre Angular date.

Merci de votre aide.

angularjsangularjs-filter
18
Kabb5

Sur la base de quelques recherches supplémentaires et en tenant compte du commentaire de moderndegree, j’ai constaté que le filtre myDate suivant fonctionnera:

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

Essaye ça

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 de filtrage et de formatage dans Angular js.

5
Prashobh

Utilisez un décorateur,

Ce n'est pas ce que vous avez explicitement demandé, utilisez un décorator . il est construit en forme angulaire et conçu pour patcher services, directives, filters etc ... 

dans votre cas, si le filtre de date n'est pas fourni, vous devez utiliser votre format de date personnalisé. 

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;
        };
    })
});
4
Jossef Harush

La valeur par défaut de format est mediumDate si aucune n'est fournie. Il n'y a rien d'intégré pour qu'il soit remplacé par autre chose.

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

2
Hector Virgen

Si vous travaillez avec des pages .aspx et que le format de date est stocké dans un fichier de configuration ...

  1. A partir du fichier .aspx qui injecte votre page Angular, définissez une variable globale avec le format de date web.config.

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

  2. Définir un filtre global à utiliser avec votre application

yourModule.filter('myDateFormat', function ($filter) {
        return function (input) {
            if (input == null) { return ""; }
            var formattedDate = $filter('date')(new Date(input), _settingsDateFormat);
            return formattedDate;
        };
});
  1. Ajoutez simplement le filtre personnalisé à vos dates

       Effective {{row.StartDate|myDateFormat}} - {{row.StopDate|myDateFormat}}
0
Sebastian Castaldi