Comment formater la date en angularjs

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' 
 // produces 03/13/2014 

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

éditer :

Si vous essayez d’obtenir le format correct dans le facteur de date (pas clair si vous utilisez datepicker ou que vous essayez simplement d’utiliser son formateur), les chaînes de format sockets en charge sont ici: https://api.jqueryui.com/datepicker/

Si vous ne possédez pas de champ de saisie, si vous souhaitez simplement afficher une date de chaîne avec un format correct, vous pouvez simplement opter pour:

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 en chaîne en un nouvel object de date en javascript et affichera la date au format MM / jj / aaaa.

Sortie: 15/12/2014

modifier
Si vous utilisez une date de chaîne au format “2014-12-19 20:00:00”, format de chaîne (passé depuis un backend PHP), vous devez alors modifier le code dans celui-ci: https://stackoverflow.com/ a / 27616348/1904479

Ajout de plus
À partir de JavaScript, vous pouvez définir le code comme suit:

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

c’est dans le cas où vous avez 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, reportez-vous à: https://docs.angularjs.org/api/ng/filter/date

J’utilise ceci et ça marche 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 

Ce n’est pas exactement ce que vous demandez – mais vous pouvez essayer de créer un champ de saisie de date en HTML, par exemple:

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

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, en chrome, est apparemment analysée avec un jour de congé):

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

Alors voilà Pour voir tout cela, consultez le plunker suivant: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview .

Cela fonctionnera:

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

NOTE: une fois que vous les avez remplacés, la date / millis restante sera convertie en foramt donné.

voir date angular api: AngularJS API: date

Le filtre angular – date :

Usage:

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

Exampe:

Code:

  {{ '1288323623006' | date:'MM/dd/yyyy' }} 

Résultat:

 10/29/2010 

Il suffit de transmettre le format de date UTC de votre code côté serveur au côté client

et utiliser la syntaxe ci-dessous –

  {{dateUTCField +'Z' | date : 'mm/dd/yyyy'}} eg dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018 

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

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 saisir une date (à partir de cette réponse Modifier le format de md-datepicker dans Angular Material )

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

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 l’interface utilisateur de jQuery, qui devrait être l’endroit idéal pour injecter le format de données.

Comme vous pouvez le voir dans var opts dateFormat il n’y a pas de propriété dateFormat avec la valeur de ng-date-format comme vous pouvez vous en douter.

Quoi qu’il en soit, la directive a une constante appelée uiDateConfig pour append des propriétés à uiDateConfig .

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 de jquery ui.

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

La solution codée en dur:

Si vous ne voulez pas répéter cette procédure, changez la valeur de uiDateConfig dans date.js pour:

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

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 est new Date(valueofdate) renvoie un object Date.

Mais, vérifiez dans http://www.w3schools.com/js/js_date_formats.asp , la partie qui indique zéro. Une date d’une chaîne, par exemple un écho de PHP, doit ressembler à:

 $valueofdate = date('Yn-j',strtotime('theSsortingngFromQuery')); 

Cela passera une chaîne, par exemple: '1999-3-3' et JavaScript effectuera l’parsing vers un object au format correct avec

 $scope.valueofdate = new Date(valueofdate);   

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

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 que votre paramètre rest peut être laissé identique

 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”.

 
 
 
 {{x | date:'mm-dd-yyyy'}} 
 
  

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

 // $scope.dateField="value" in ctrl