AngularJS - konwertuje daty w kontrolerze

114

Czy ktoś mógłby mi zasugerować, jak przekonwertować datę z tego 1387843200000formatu na ten 24/12/2013 wewnątrz mojego kontrolera ?

Po prostu do Twojej wiadomości moje daty są przechowywane w ten sposób i gdy wiążący formularz edycji z input type="date"polem nie jest w ogóle wypełniany.

#Plunker demo tutaj.

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

<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
źródło
1
Dlaczego potrzebujesz konwersji w kontrolerze? Możesz użyć filtru daty, aby sformatować datę w widoku, jeśli potrzebujesz tylko wartości, którą można wyświetlić.
Justin Niessner
@JustinNiessner - moje daty są przechowywane w ten sposób i kiedy wiązanie z formularzem edycji z input type="date"polem nie jest wypełniane
Iladarsda
1
Można użyć moment.js angularjs filtr czasowy data - github.com/urish/angular-moment
virender

Odpowiedzi:

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

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

Ale jeśli używasz HTML5 type = "date", MUSISZ użyć formatu ISO yyyy-MM-dd.

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

UWAGA: użycie wzorca = "" z typem = "date" wygląda niestandardowo, ale wygląda na to, że działa w oczekiwany sposób w Chrome 31.

Darryl Miles
źródło
Witam, próbowałem zaimplementować zgodnie z sugestią, ale u mnie nie działa.
Mukun
Witam, próbowałem zaimplementować zgodnie z sugestią, ale u mnie nie działa. moja odpowiedź z Spring Webservice to {"basicPersonalInfo": {"empNo": "04005001", "dob": 490645800000}, "communicationInfo": null}. Muszę wyświetlić ją w polu wprowadzania daty bootstrap / HTML5. Użyłem filtra w moim kontrolerze, takiego jak $ scope.basicInfo = BasicInformationService.query (); $ scope.basicInfo. $ promise.then (function (data) {$ scope.basicInfo.basicPersonalInfo.dob = $ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd");}); każda pomoc jest doceniana
Mukun
1
ok zmieniłem formatowanie w moim kontrolerze w ten sposób i wydaje się, że działa, nie jestem pewien, czy to jest właściwy sposób. $ scope.basicInfo.basicPersonalInfo.dob = new Date ($ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd"));
Mukun
Moja data pochodzi z API DateTime: "2017/12/15", ale robię to {{M.DateTime | date: 'dd-MM-yyyy'}} nie zmienia formatu daty.Jak sformatować ją wewnątrz wyrażenia?
Vishal Singh
16

utwórz filter.js i możesz to uczynić jako wielokrotnego użytku

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

widok

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

lub w kontrolerze

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

Filtrowanie i formatowanie dat w Angular js.

Prashobh
źródło
1
Wygląda na to, że w AngularJS jest już wbudowany filtr daty: docs.angularjs.org/api/ng/filter/date
AlikElzin-kilaka
1

Wszystkie rozwiązania tutaj tak naprawdę nie wiążą modelu z danymi wejściowymi, ponieważ będziesz musiał zmienić z powrotem, dateAsStringaby został zapisany, jak datew twoim obiekcie (w kontrolerze po przesłaniu formularza).

Jeśli nie potrzebujesz efektu wiązania, ale po prostu pokazujesz go na wejściu,

prostym może być:

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

Następnie, jeśli chcesz, w kontrolerze możesz zapisać edytowaną datę w ten sposób:

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

uwaga: w kontrolerze musisz zadeklarować itemzmienną jako $scope.item, aby to zadziałało.

Dudi
źródło
1

sugeruję w Javascript:

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

a data1 to data.

BrianPando
źródło
Tak, masz prawo, gdzie chcemy przekonwertować nasz znacznik czasu do daty
macha devendher