Comment formater la date en angularjs

angulaire.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 pour le filtre de date .

modifier :

Si vous essayez d'avoir le bon format dans le datepicker (pas clair si vous utilisez datepicker ou juste essayer de l'utiliser du formateur), ceux pris en charge les chaînes de format sont ici: https://api.jqueryui.com/datepicker /

si vous n'avez pas de champ d'entrée, plutôt que de vouloir afficher une date de chaîne avec un formatage approprié, vous pouvez simplement aller pour:

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

et dans le fichier js utiliser:

    // @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 de caractères en un nouvel objet date en javascript et affichera la date au format MM/JJ/AAAA.

sortie: 12/15/2014

Edit

si vous utilisez une chaîne de caractères date de format "2014-12-19 20:00: 00" format de chaîne de caractères (passé à partir D'un backend PHP), alors vous devriez modifier le code à celui dans: https://stackoverflow.com/a/27616348/1904479

ajout de

À partir de javascript, vous pouvez définir le code comme suit:

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

qui est dans le cas où vous avez déjà une date avec vous, sinon vous pouvez utiliser le code suivant pour obtenir la date du système actuel:

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

pour plus de détails sur les formats de date, voir: 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 pourriez essayer de créer un champ date input en html quelque chose comme:

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

ensuite, pour imprimer ceci sur la page que vous utilisez:

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

enfin, dans mon controller j'ai déclaré une méthode qui crée une date à partir de la valeur d'entrée (qui dans chrome est apparemment parsé 1 jour de repos):

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

Alors voilà. Pour voir la chose entière de travail voir le piston suivant: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview .Bonne chance!

Cela va fonctionner:

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

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

voir angulaire date api: AngularJS API: date

utilisation:

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

exemple:

Code:

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

résultat:

10/29/2010

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

 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 suivante a été la solution 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');
    };
});

modifier: vous devez également définir le parseDate pour dactylographier dans une date (à partir de cette réponse changer le format de md-datepicker dans le matériau angulaire )

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

Ok le problème semble venir 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 pour injecter le format de données.

comme vous pouvez le voir dans var opts il n'y a pas de propriété dateFormat avec la valeur de ng-date-format comme vous pourriez l'imaginer.

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

La solution flexible (recommandé):

à Partir de ici vous pouvez le voir, vous pouvez insérer des options de l'injection dans la directive, un contrôleur de variable avec le jquery ui options.

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

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

codé en dur solution:

si vous ne voulez pas répéter cette procédure tout le temps changer la valeur de uiDateConfig dans la date.js à:

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

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

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

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

cela passera une chaîne de caractères, par exemple: '1999-3-3' et JavaScript fera 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 ceci devrait bien fonctionner. :) Les champs "reviewData" et "dateValue" peuvent être modifiés en fonction de vos paramètres rest peut rester inchangé

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>

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

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