AngularJS - Daten in Controller konvertieren

114

Könnte mir bitte jemand vorschlagen, wie man ein Datum aus diesem 1387843200000Format in dieses konvertiert24/12/2013 in meinem Controller kann ?

Nur zu Ihrer Information, meine Daten werden auf diese Weise gespeichert und beim Binden zum Bearbeiten des Formulars mit input type="date" Feld überhaupt nicht ausgefüllt wird.

#Plunker Demo hier.

EditCtrl

app.controller("EditCtrl", [ "$scope", "$filter", "db" function ($scope, $filter, db){

    // this gets me an item object
    var item = db.readItem();

    // item date = 1387843200000
    // this returns undefined 
    item.date = $filter('date')(date[ item.date, "dd/MM/yyyy"]);

}]);

Edit.html - Vorlage

<form name="editForm" class="form-validate">

        <div class="form-group">
            <label for="date">Event date.</label>
            <input type="date" class="form-control" ng-model="event.date" id="date" required />
        </div>

        <a href="#/" class="btn btn-danger ">Cancel</a>
        <button id="addEvent" class="btn btn-primary pull-right" ng-disabled="isClean() || editForm.$invalid" ng-click="saveEvent()">Save event.</button>

    </form>
Iladarsda
quelle
1
Warum müssen Sie im Controller konvertieren? Mit dem Datumsfilter können Sie das Datum in Ihrer Ansicht formatieren, wenn Sie nur einen anzeigbaren Wert benötigen.
Justin Niessner
@ JustinNiessner - meine Daten werden auf diese Weise gespeichert und wenn die Bindung zum Bearbeiten des Formulars mit input type="date"Feld nicht
ausgefüllt
1
Sie können moment.js anglejs Datum Zeitfilter verwenden - github.com/urish/angular-moment
virender

Antworten:

212
item.date = $filter('date')(item.date, "dd/MM/yyyy"); // for conversion to string

http://docs.angularjs.org/api/ng.filter:date

Wenn Sie jedoch HTML5 type = "date" verwenden, MUSS das ISO-Format JJJJ-MM-TT verwendet werden.

item.dateAsString = $filter('date')(item.date, "yyyy-MM-dd");  // for type="date" binding


<input type="date" ng-model="item.dateAsString" value="{{ item.dateAsString }}" pattern="dd/MM/YYYY"/>

http://www.w3.org/TR/html-markup/input.date.html

HINWEIS: Die Verwendung von pattern = "" mit type = "date" sieht nicht standardmäßig aus, scheint jedoch in Chrome 31 wie erwartet zu funktionieren.

Darryl Miles
quelle
Hallo, ich habe versucht, wie vorgeschlagen zu implementieren, aber es funktioniert nicht für mich.
Mukun
Hallo, ich habe versucht, wie vorgeschlagen zu implementieren, aber es funktioniert nicht für mich. Meine Antwort vom Spring-Webservice lautet {"basicPersonalInfo": {"empNo": "04005001", "dob": 490645800000}, "CommunicationInfo": null}. Ich muss sie in meinem Eingabefeld für das Bootstrap / HTML5-Datum anzeigen. Ich habe den Filter in meinem Controller wie $ scope.basicInfo = BasicInformationService.query () verwendet. $ scope.basicInfo. $ versprechen.then (Funktion (Daten) {$ scope.basicInfo.basicPersonalInfo.dob = $ filter ('Datum') (data.basicPersonalInfo.dob, "yyyy-MM-dd");}); Jede Hilfe wird geschätzt
Mukun
1
ok Ich habe die Formatierung in meinem Controller so geändert und es scheint zu funktionieren, nicht sicher, ob es der richtige Weg ist. $ scope.basicInfo.basicPersonalInfo.dob = neues Datum ($ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd"));
Mukun
Mein Datum kommt so von API DateTime: "2017/12/15", aber dies {{M.DateTime | Datum: 'TT-MM-JJJJ'}} Datumsformat wird nicht geändert. Wie formatiere ich es innerhalb des Ausdrucks?
Vishal Singh
16

Erstellen Sie eine filter.js und Sie können diese als wiederverwendbar machen

angular.module('yourmodule').filter('date', function($filter)
{
    return function(input)
    {
        if(input == null){ return ""; }
        var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
        return _date.toUpperCase();
    };
});

Aussicht

<span>{{ d.time | date }}</span>

oder in der Steuerung

var filterdatetime = $filter('date')( yourdate );

Datumsfilterung und Formatierung in Angular js.

Prashobh
quelle
1
Es scheint, dass in AngularJS bereits ein Datumsfilter
integriert ist
1

Alle Lösungen hier binden das Modell nicht wirklich an die Eingabe, da Sie das dateAsStringzu speichernde Modell wie datein Ihrem Objekt zurücksetzen müssen (in der Steuerung, nachdem das Formular gesendet wurde).

Wenn Sie den Bindungseffekt nicht benötigen, sondern nur in der Eingabe anzeigen möchten,

ein einfaches könnte sein:

<input type="date" value="{{ item.date | date: 'yyyy-MM-dd' }}" id="item_date" />

Wenn Sie möchten, können Sie das Bearbeitungsdatum im Controller folgendermaßen speichern:

  $scope.item.date = new Date(document.getElementById('item_date').value).getTime();

Beachten Sie: In Ihrem Controller müssen Sie Ihre itemVariable als deklarieren $scope.item, damit dies funktioniert.

Dudi
quelle
1

Ich schlage in Javascript vor:

var item=1387843200000;
var date1=new Date(item);

und dann ist date1 ein Date.

BrianPando
quelle
Ja, Sie haben Recht, wo wir unseren Zeitstempel auf Datum
umstellen möchten