web-dev-qa-db-fra.com

Comment formater la date en angularjs

Je veux formater la date comme mm/dd/yyyy. J'ai essayé ce qui suit et rien ne fonctionne pour moi. Est-ce que quelqu'un peut m'aider avec ça?

référence: i-date

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

<input type="date" ng-model="valueofdate" />
angularjsdateformatdate-formatdatefilter
137
user16

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 .

éditer :

Si vous essayez d’obtenir le bon format dans le sélecteur de date (vous ne savez pas clairement si vous utilisez Datepicker ou essayez simplement d’utiliser son formateur), les chaînes de format prises en charge sont les suivantes: https: //api.jqueryui. com/datepicker /

195
Jim Schubert

Si vous ne rencontrez pas de champ de saisie, mais souhaitez simplement afficher une date de chaîne avec une mise en forme appropriée, vous pouvez simplement rechercher:

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

Ceci convertira la date en chaîne en un nouvel objet 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 de format "2014-12-19 20:00:00" (transmise depuis un backend PHP), vous devez alors modifier le code de la manière suivante: un dans: https://stackoverflow.com/a/27616348/1904479

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

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

si vous avez déjà une date avec vous, 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, voir: https://docs.angularjs.org/api/ng/filter/date

93
Kailas

J'utilise ceci et cela fonctionne 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
25
Ravindra

Ce n'est pas vraiment ce que vous demandez - mais vous pouvez essayer de créer un champ de saisie de la date en HTML, par exemple:

<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 à un jour de congé):

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

Donc là vous l'avez. Pour tout voir fonctionner, voyez le lecteur suivant: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview . Nous vous souhaitons bonne chance!

17
drew_w

Cela fonctionnera:

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

REMARQUE: une fois que vous les aurez remplacés, la date et les millis restants seront convertis en données données.

10
Nitish Kumar

J'utilise filtre

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

ensuite

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

Passez simplement le format de date UTC du 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
3
Shivprasad P
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

1
Gopakumar AP

Après avoir examiné toutes les solutions ci-dessus, voici 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');
    };
});

Éditer: Vous devez également définir la date_date pour la saisie d'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
johan

J'ai eu le même problème et comme les commentaires ci-dessus, pensé qu'il doit y avoir une méthode native en 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 indique le zéro non significatif. 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, par exemple: '1999-3-3' et JavaScript analysera un objet avec le format correct 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_date_format.asp .

0
Juan José Campis

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 vos paramètres restants peuvent être laissés identiques

0
Jayant Rajwani

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

0
Selvam Annamalai

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 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 pouviez vous y attendre.

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

La solution flexible (recommandée):

De ici 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 voulez pas répéter cette procédure tout le temps, remplacez la valeur de uiDateConfig dans date.js par:

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