Comment formater la date dans angularjs

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" />

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/

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

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

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!

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

voir dateapi angulaire : API AngularJS: date

Usage:

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

Exemple:

Code:

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

Résultat:

10/29/2010

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

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

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

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

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

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 .

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

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

// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>