Comment formater la date dans angularjs


143

Je souhaite mettre en forme la date au format mm/dd/yyyy. J'ai essayé ce qui suit et rien de tout cela ne fonctionne pour moi. Est-ce que quelqu'un peut m'aider avec ça?

référence: ui-date

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />

1
Avez-vous essayé de supprimer ui-date-format="mm/dd/yyyy"complètement? Il semble que le comportement par défaut sans cette option soit ce que vous voulez.
Lukas

Avez-vous essayé moment.js?
Cétia

Non, je n'ai pas essayé moment.js. Mon serveur me renvoie la chaîne Json 20140313T00: 00: 00. J'ai essayé à la fois la date de type d'entrée html5 et le format ui-date-format. La suppression du format ui-date-format indique que c'est une chaîne, donnez-lui un format.
user16

Utiliser $formatterset $parserspar cette réponse a résolu mon problème similaire.
Ross Rogers

vous pouvez utiliser des filtres en html ainsi qu'en javascript, veuillez vous référer à: stackoverflow.com/a/27615392/1904479
Kailas

Réponses:


204

Angular.js a un filtre de date intégré.

démo

// in your controller:
$scope.date = '20140313T00:00:00';

// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

// produces
03/13/2014

Vous pouvez voir les formats de date pris en charge dans la source du filtre de date .

modifier :

Si vous essayez d'obtenir le bon format dans le sélecteur de date (pas clair si vous utilisez le sélecteur de date ou essayez simplement d'utiliser son formateur), ces chaînes de format prises en charge sont ici: https://api.jqueryui.com/datepicker/


1
le serveur me renvoie '20140313T00: 00: 00 et je veux afficher au format mm / jj / aaaa dans une entrée comme celle-ci - <input type = date "ng-model =" mydate ">
user16

Je ne sais pas pourquoi ma réponse a été rejetée. Cette réponse est tirée presque textuellement de la documentation d'Angular. La mention des chaînes de format jQueryUI datepicker est due au fait que le module utilisé dans la question est ui-date qui a une dépendance sur jQuery et jQueryUI. Il n'y a rien d'incorrect ou de trompeur dans la réponse.
Jim Schubert

Je ne pense pas que le lien jQuery UI soit correct pour les chaînes de format. docs.angularjs.org/api/ng/filter/date semble être plus précis.
TrueWill

@TrueWill OP pose spécifiquement des questions sur ui-date, qui utilise jQuery datepicker. Le premier lien dans mon article renvoie au code source dont les chaînes de format sont prises en charge par angular.
Jim Schubert

@JimSchubert ceci est ma chaîne de date '2013-11-11 00:00:00' et elle ne sera pas convertie | date: 'longdate', des suggestions?
alphapilgrim

97

Si vous n'avez pas de champ de saisie, mais souhaitez simplement afficher une date de chaîne avec un formatage approprié, vous pouvez simplement opter pour:

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

et dans le fichier js, utilisez:

    // @Function
    // Description  : Triggered while displaying expiry date
    $scope.formatDate = function(date){
          var dateOut = new Date(date);
          return dateOut;
    };

Cela convertira la date sous forme de chaîne en un nouvel objet de date en javascript et affichera la date au format MM / jj / aaaa.

Sortie: 15/12/2014

Edit
Si vous utilisez une chaîne de date au format "2014-12-19 20:00:00" (transmise par un backend PHP), vous devez alors modifier le code en celui de: https://stackoverflow.com / a / 27616348/1904479

Ajout d'autres éléments
De javascript, vous pouvez définir le code comme:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');

c'est-à-dire au cas où vous auriez déjà une date avec vous, sinon vous pouvez utiliser le code suivant pour obtenir la date système actuelle:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');

Pour plus de détails sur les formats de date, consultez: https://docs.angularjs.org/api/ng/filter/date


27

J'utilise ceci et cela fonctionne très bien.

{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM

cela ne fonctionne pas pour moi, si je passe un objet JS Date. des suggestions pourquoi?
Panshul

Cela ne devrait fonctionner que pour le format de date où la date est en millisecondes et dans votre cas, la date est au format de date. Suivez: w3schools.com/js/js_date_formats.asp
Ravindra

18

Ce n'est pas vraiment ce que vous demandez - mais vous pouvez essayer de créer un champ de saisie de date en html quelque chose comme:

<input type="date" ng-model="myDate" />

Ensuite, pour imprimer ceci sur la page que vous utiliseriez:

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

Enfin, dans mon contrôleur, j'ai déclaré une méthode qui crée une date à partir de la valeur d'entrée (qui dans Chrome est apparemment analysée 1 jour de congé):

$scope.convertToDate = function (stringDate){
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
};

Alors là vous l'avez. Pour voir le tout fonctionner, consultez le plunker suivant: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview. Bonne chance!


11

Cela fonctionnera:

{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

REMARQUE: une fois que vous les remplacez, les dates / millis restants seront convertis en foramt donné.


pour une raison quelconque, mon champ est dans ce format / Date (99999) / à, savez-vous pourquoi?
Antonio Correia

9

voir dateapi angulaire : API AngularJS: date


Le datefiltre angulaire :

Usage:

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}


Exemple:

Code:

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>

Résultat:

10/29/2010

7

J'utilise le filtre

.filter('toDate', function() {
  return function(items) {
    return new Date(items);
  };
});

puis

{{'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'}}

3

Passez simplement le format de date UTC de votre code côté serveur au côté client

et utilisez la syntaxe ci-dessous -

 {{dateUTCField  +'Z' | date : 'mm/dd/yyyy'}}

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018

1

Après avoir examiné toutes les solutions ci-dessus, la solution suivante a été la plus rapide pour moi. Si vous utilisez un matériau angulaire:

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

Pour définir le format:

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        // Requires Moment.js OR enter your own formatting code here....
        return moment(date).format('DD-MM-YYYY');
    };
});

Edit: Vous devez également définir le parseDate pour taper une date (à partir de cette réponse Changer le format de md-datepicker dans Angular Material )

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

1
var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

Ici, le nom du contrôleur est "myController" et le nom de l'application est "myApp".

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

Le résultat ressemblera à ceci: - * 10-29-2010 * 01-03-2013


0

Ok, le problème semble provenir de cette ligne:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 .

En fait, cette ligne est la liaison avec jQuery UI qui devrait être l'endroit où injecter le format de données.

Comme vous pouvez le voir, var optsil n'y a pas de propriété dateFormatavec la valeur de ng-date-format comme vous pourriez l'espérer.

Quoi qu'il en soit, la directive a une constante appelée uiDateConfigà laquelle ajouter des propriétés opts.

La solution flexible (recommandée):

De là, vous pouvez voir que vous pouvez insérer des options en injectant dans la directive une variable de contrôleur avec les options jquery ui.

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) {
    $scope.dateOptions = {
        dateFormat: "dd-M-yy"
    };
});

La solution codée en dur:

Si vous ne souhaitez pas répéter cette procédure tout le temps, changez la valeur de uiDateConfigin date.js en:

.constant('uiDateConfig', { dateFormat: "dd-M-yy" })

0

J'ai eu le même problème et comme les commentaires ci-dessus, j'ai pensé qu'il devait y avoir une méthode native en JavaScript. La chose new Date(valueofdate)retourne un objet Date.

Mais, vérifiez http://www.w3schools.com/js/js_date_formats.asp , la partie qui dit zéro non significatif. Une date d'une chaîne, par exemple un écho de PHP, doit être comme:

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

Cela passera une chaîne, par exemple: '1999-3-3'et JavaScript effectuera l'analyse d'un objet avec le bon format avec

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

Lien vers PHP pour les formats de date: http://www.w3schools.com/php/func_date_date_format.asp .


0

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

Utilisez cela devrait bien fonctionner. :) Les champs reviewData et dateValue peuvent être modifiés selon votre paramètre reste peut être laissé le même


0
{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';

1
Pourquoi postez-vous un commentaire avec la même ligne que dans votre réponse? Et votre réponse n'est qu'un code, aucune explication.
Pochmurnik

-1
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.