So formatieren Sie das Datum in AngularJS

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

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/

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

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

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!

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.

siehe Winkel dateapi: AngularJS API: Datum

Verwendung:

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

Beispiel:

Code:

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

Ergebnis:

10/29/2010

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

Ü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

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

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

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

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 .

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

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

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