Formatowanie daty i godziny w AngularJS

Jak poprawnie wyświetlić datę i godzinę w AngularJS?

Poniższe dane wyjściowe pokazują zarówno dane wejściowe, jak i wyjściowe, z filtrem daty AngularJS i bez niego:

In: {{v.Dt}}  
AngularJS: {{v.Dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

To drukuje:

In: 2012-10-16T17:57:28.556094Z 
AngularJS: 2012-10-16T17:57:28.556094Z

Żądany format wyświetlania to 2010-10-28 23:40:23 0400lub2010-10-28 23:40:23 EST

v.Dt prawdopodobnie nie jest obiektem Date ().

Zobacz http://jsfiddle.net/southerd/xG2t8/

ale w kontrolerze:

scope.v.Dt = Date.parse(scope.v.Dt);

Twój kod powinien działać tak, jak go masz, zobacz to skrzypce .

Musisz jednak upewnić się, że v.Dtjest to odpowiedni obiekt Date , aby działał.

{{dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

lub jeśli dateFormat jest zdefiniowany w zakresie jako dateFormat = 'yyyy-MM-dd HH: mm: ss Z':

{{dt | date:dateFormat }}

Wiem, że to stary przedmiot, ale pomyślałem, że wrzuciłbym inną opcję do rozważenia.

Ponieważ oryginalny ciąg nie zawiera demarkera „T”, domyślna implementacja w Angular nie rozpoznaje go jako daty. Możesz wymusić to za pomocą nowej daty, ale jest to trochę uciążliwe dla tablicy. Ponieważ filtry można potokować razem, można użyć filtru, aby przekonwertować dane wejściowe na datę, a następnie zastosować datę: filtruj do przekonwertowanej daty. Utwórz nowy filtr niestandardowy w następujący sposób:

app
.filter("asDate", function () {
    return function (input) {
        return new Date(input);
    }
});

Następnie w swoim znaczniku możesz połączyć filtry ze sobą:

{{item.myDateTimeString | asDate | date:'shortDate'}}

możesz pobrać filtr „daty” w ten sposób:

var today = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss Z');

W ten sposób otrzymasz dzisiejszą datę w wybranym formacie.

Oto filtr , który przyjmie ciąg znaków daty LUB obiekt Date () javascript. Używa Moment.js i może zastosować dowolną funkcję transformacji Moment.js , taką jak popularna funkcja „fromNow”

angular.module('myModule').filter('moment', function () {
  return function (input, momentFn /*, param1, param2, ...param n */) {
    var args = Array.prototype.slice.call(arguments, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);
  };
});

Więc...

{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}

wyświetli się 11 listopada 2014 r

{{ anyDateObjectOrString | moment: 'fromNow' }}

wyświetli się 10 minut temu

Jeśli chcesz wywołać wiele funkcji momentowych, możesz je połączyć. To konwertuje do UTC, a następnie formatuje ...

{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}

https://gist.github.com/cmmartin/341b017194bac09ffa1a

Oto kilka popularnych przykładów:

<div>{{myDate | date:'M/d/yyyy'}}</div> 04.07.2014

<div>{{myDate | date:'yyyy-MM-dd'}}</div> 2014-07-04

<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div> 04.07.2014 12:01:59

Czy widziałeś sekcję o dyrektywach pisania (wersja skrócona) w dokumentacji ?

HTML

<div ng-controller="Ctrl2">
      Date format: <input ng-model="format"> <hr/>
      Current time is: <span my-current-time="format"></span>
</div> 

JS

function Ctrl2($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}

Wewnątrz kontrolera format można filtrować, wprowadzając $ filter.

var date = $filter('date')(new Date(),'MMM dd, yyyy');

Po prostu, jeśli chcesz wydrukować w stylu „30 stycznia 2017 16:31:20”, wykonaj proste czynności

step1 - Zadeklaruj następującą zmienną w kontrolerze js

$scope.current_time = new Date();

step2 - wyświetlanie na stronie html, takiej jak

{{current_time | data: 'średni'}}

możemy sformatować datę w widoku kątowym, jest bardzo łatwe .... sprawdź poniższy przykład:

{{dt | data: "dd-MM-rrrr"}}

Możesz użyć momentjsdo zaimplementowania filtra daty i godziny w angularjs. Na przykład:

angular.module('myApp')
 .filter('formatDateTime', function ($filter) {
    return function (date, format) {
        if (date) {
            return moment(Number(date)).format(format || "DD/MM/YYYY h:mm A");
        }
        else
            return "";
    };
});

Gdzie data jest w formacie znacznika czasu.

Dodaj $filterzależność w kontrolerze.

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')

Sugerowałbym użycie momentu.js, który ma dobre wsparcie dla formatowania daty zgodnie z lokalizacjami.

utwórz filtr, który wewnętrznie używa metody moment.js do formatowania daty.