So formatieren Sie das Datum in AngularJS

143

Ich möchte das Datum als formatieren mm/dd/yyyy. Ich habe folgendes versucht und nichts davon funktioniert für mich. Kann mir jemand dabei helfen?

Referenz: UI-Datum

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

<input type="date" ng-model="valueofdate" />
user16
quelle
1
Haben Sie versucht, ui-date-format="mm/dd/yyyy"ganz zu entfernen ? Es sieht so aus, als ob das Standardverhalten ohne diese Option das ist, was Sie wollen.
Lukas
Haben Sie moment.js ausprobiert?
Cétia
Nein, ich habe moment.js nicht ausprobiert. Mein Server gibt mir den Json-String 20140313T00: 00: 00 zurück. Ich habe versucht, in beide Richtungen HTML5-Eingabetyp Datum und UI-Datum-Format. Wenn Sie das UI-Datumsformat entfernen, wird angegeben, dass es sich um eine Zeichenfolge handelt. Geben Sie ihm ein Format.
Benutzer16
Die Verwendung von $formattersund $parsersgemäß dieser Antwort löste mein ähnliches Problem.
Ross Rogers
Sie können Filter sowohl in HTML als auch in Javascript verwenden. Weitere Informationen finden
Kailas

Antworten:

204

Angular.js verfügt über einen integrierten Datumsfilter.

Demo

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

Sie können die unterstützten Datumsformate in der Quelle für den Datumsfilter anzeigen .

bearbeiten :

Wenn Sie versuchen, das richtige Format im Datepicker zu erhalten (nicht klar, ob Sie den Datepicker verwenden oder nur den Formatierer verwenden), finden Sie diese unterstützten Formatzeichenfolgen hier: https://api.jqueryui.com/datepicker/

Jim Schubert
quelle
1
Der Server gibt mir '20140313T00: 00: 00' zurück und ich möchte in einer Eingabe wie dieser im Format MM / TT / JJJJ anzeigen - <input type = date "ng-model =" mydate ">
user16
Ich bin mir nicht sicher, warum meine Antwort abgelehnt wurde. Diese Antwort stammt fast wörtlich aus Angulars Dokumenten. Die Erwähnung von Zeichenfolgen im jQueryUI-Datepicker-Format erfolgt, weil das in der Frage verwendete Modul ui-date ist und von jQuery und jQueryUI abhängig ist. Die Antwort enthält nichts Falsches oder Irreführendes.
Jim Schubert
Ich denke nicht, dass der Link zur jQuery-Benutzeroberfläche für Formatzeichenfolgen korrekt ist. docs.angularjs.org/api/ng/filter/date scheint genauer zu sein.
TrueWill
@TrueWill OP fragt speziell nach ui-date, das jQuery datepicker verwendet. Der erste Link in meinem Beitrag verweist auf den Quellcode, dessen Formatzeichenfolgen von Angular unterstützt werden.
Jim Schubert
@ JimSchubert Dies ist meine Datumszeichenfolge '2013-11-11 00:00:00' und sie wird nicht konvertiert | Datum: 'Longdate', irgendwelche Vorschläge?
Alphapilgrim
97

Wenn Sie kein Eingabefeld haben, sondern nur ein Zeichenfolgendatum mit einer geeigneten Formatierung anzeigen möchten, können Sie einfach Folgendes auswählen:

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

und in der js-Datei verwenden Sie:

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

Dadurch wird das Datum in der Zeichenfolge in ein neues Datumsobjekt in Javascript konvertiert und das Datum im Format MM / TT / JJJJ angezeigt.

Ausgabe: 15.12.2014

Bearbeiten
Wenn Sie ein Zeichenfolgendatum im Format "2014-12-19 20:00:00" verwenden (von einem PHP-Backend übergeben), sollten Sie den Code in den folgenden Code ändern: https://stackoverflow.com / a / 27616348/1904479

Weiteres Hinzufügen
von Javascript können Sie den Code wie folgt einstellen:

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

Wenn Sie bereits ein Datum bei sich haben, können Sie den folgenden Code verwenden, um das aktuelle Systemdatum abzurufen:

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

Weitere Informationen zu Datumsformaten finden Sie unter: https://docs.angularjs.org/api/ng/filter/date

Kailas
quelle
27

Ich benutze dies und es funktioniert gut.

{{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
Ravindra
quelle
Dies funktioniert bei mir nicht, wenn ich ein JS Date-Objekt übergebe. irgendwelche Vorschläge warum?
Panshul
Es sollte nur für das Datumsformat funktionieren, bei dem das Datum in Millisekunden angegeben ist, und in Ihrem Fall ist das Datum im Datumsformat. Folgen Sie: w3schools.com/js/js_date_formats.asp
Ravindra
18

Dies ist nicht genau das, wonach Sie fragen - aber Sie könnten versuchen, ein Datumseingabefeld in HTML zu erstellen, etwa:

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

Um dies dann auf der Seite zu drucken, die Sie verwenden würden:

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

Schließlich habe ich in meinem Controller eine Methode deklariert, die aus dem Eingabewert ein Datum erstellt (das in Chrome anscheinend 1 Tag später analysiert wird):

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

Da haben Sie es also. Um zu sehen, wie das Ganze funktioniert, sehen Sie den folgenden Plunker: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview. Viel Glück!

zog_w
quelle
11

Das wird funktionieren:

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

HINWEIS: Sobald Sie diese ersetzen, wird das verbleibende Datum / Millis in das angegebene Forum konvertiert.

Nitish Kumar
quelle
Aus irgendeinem Grund hat mein Feld dieses Format / Datum (99999) / bis. Weißt du warum?
Antonio Correia
9

siehe Winkel dateapi: AngularJS API: Datum


Der Winkelfilter date:

Verwendung:

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


Beispiel:

Code:

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

Ergebnis:

10/29/2010
Eddy
quelle
7

Ich benutze Filter

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

dann

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

Übergeben Sie einfach das UTC-Datumsformat von Ihrem serverseitigen Code an die clientseitige

und verwenden Sie die folgende Syntax -

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

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

Nachdem ich mir alle oben genannten Lösungen angesehen hatte, war das Folgende die schnellste Lösung für mich. Wenn Sie eckiges Material verwenden:

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

So stellen Sie das Format ein:

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

Bearbeiten: Sie müssen auch das ParseDate für die Eingabe eines Datums festlegen (aus dieser Antwort ändern Sie das Format von md-datepicker in Angular Material ).

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};
Johan
quelle
1
var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

Hier lautet der Controller-Name "myController" und der App-Name "myApp".

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

            </li>

        </ul>
    </div>

Das Ergebnis sieht folgendermaßen aus: - * 29.10.2010 * 01.03.2013

Gopakumar AP
quelle
0

Ok, das Problem scheint aus dieser Zeile zu stammen:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 .

Eigentlich ist diese Zeile die Bindung mit der jQuery-Benutzeroberfläche, an der das Datenformat eingefügt werden soll.

Wie Sie sehen können, var optsgibt es keine Eigenschaft dateFormatmit dem Wert aus dem ng-date-Format, wie Sie es sich vorstellen können.

Auf jeden Fall hat die Direktive eine Konstante, die aufgerufen wird uiDateConfig, um Eigenschaften hinzuzufügen opts.

Die flexible Lösung (empfohlen):

Von hier aus können Sie sehen, dass Sie einige Optionen einfügen können, die in die Direktive eine Controller-Variable mit den Optionen jquery ui einfügen.

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

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

Die fest codierte Lösung:

Wenn Sie diesen Vorgang nicht ständig wiederholen möchten, ändern Sie den Wert von uiDateConfigin date.js in:

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

Ich hatte das gleiche Problem und dachte wie in den obigen Kommentaren, dass es eine native Methode in JavaScript geben muss. Die Sache ist, new Date(valueofdate)ein Date-Objekt zurückzugeben.

Überprüfen Sie jedoch http://www.w3schools.com/js/js_date_formats.asp , den Teil, in dem die führende Null steht. Ein Datum aus einem String, zum Beispiel ein Echo aus PHP, muss wie folgt aussehen:

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

Dies übergibt zum Beispiel einen String: '1999-3-3'und JavaScript analysiert ein Objekt mit dem richtigen Format mit

$scope.valueofdate = new Date(valueofdate);

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

Link zu PHP für Datumsformate: http://www.w3schools.com/php/func_date_date_format.asp .

Juan José Campis
quelle
0

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

Verwenden Sie dies sollte gut funktionieren. :) Die Felder reviewData und dateValue können geändert werden, da Ihr Parameter rest gleich bleiben kann

Jayant Rajwani
quelle
0
{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';
Selvam Annamalai
quelle
1
Warum postest du einen Kommentar mit derselben Zeile wie in deiner Antwort? Und Ihre Antwort ist nur ein Code, überhaupt keine Erklärung.
Pochmurnik
-1
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
Siddhartha
quelle