125

AngularJSで日付と時刻を正しく表示するにはどうすればよいですか？

以下の出力は、AngularJS日付フィルターがある場合とない場合の入力と出力の両方を示しています。

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

これは印刷します：

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

希望する表示形式は 2010-10-28 23:40:23 0400または2010-10-28 23:40:23 EST

4

13 に答える 13

122

このフィドルを見ると、コードは機能するはずです。

v.Dtただし、それが機能するには、自分が適切なDateオブジェクトであることを確認する必要があります。

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

または、dateFormatがスコープでdateFormat ='yyyy-MM-dd HH：mm：ss Z'として定義されている場合：

{{dt | date:dateFormat }}
于 2012-10-16T18:20:14.393 に答える
63

v.DtはDate（）オブジェクトではない可能性があります。

http://jsfiddle.net/southerd/xG2t8/を参照してください

しかし、あなたのコントローラーでは：

scope.v.Dt = Date.parse(scope.v.Dt);
于 2012-10-16T18:27:02.640 に答える
60

私はこれが古いアイテムであることを知っています、しかし私が考慮すべき別のオプションを投げると思いました。

元の文字列には「T」マーカーが含まれていないため、Angularのデフォルトの実装では日付として認識されません。新しい日付を使用して強制することもできますが、それは配列にとって少し面倒です。フィルタを一緒にパイプできるので、フィルタを使用して入力を日付に変換してから、変換された日付にdate：filterを適用できる場合があります。次のように新しいカスタムフィルターを作成します。

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

次に、マークアップで、フィルターを一緒にパイプできます。

{{item.myDateTimeString | asDate | date:'shortDate'}}
于 2014-05-05T18:32:18.960 に答える
56

次のような「日付」フィルターを取得できます。

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

これにより、今日の日付が希望の形式で表示されます。

于 2014-04-11T16:44:32.743 に答える
49

これは、日付文字列またはjavascript Date（）オブジェクトを受け取るフィルターです。Moment.jsを使用し、人気のある「fromNow」などのMoment.js変換関数を適用できます。

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

それで...

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

2014年11月11日を表示します

{{ anyDateObjectOrString | moment: 'fromNow' }}

10分前に表示されます

複数のモーメント関数を呼び出す必要がある場合は、それらを連鎖させることができます。これはUTCに変換されてからフォーマットされます...

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

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

于 2014-11-11T05:16:03.323 に答える
23

ここにいくつかの人気のある例があります：

<div>{{myDate | date:'M/d/yyyy'}}</div> 2014年7月4日

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

<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div> 2014年7月4日12:01:59

于 2015-04-29T12:26:08.527 に答える
15

ドキュメントのWritingdirectives（ショートバージョン）セクションを見たことがありますか？

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';
}
于 2012-10-16T18:19:26.260 に答える
6

コントローラ内では、$filterを挿入することでフォーマットをフィルタリングできます。

var date = $filter('date')(new Date(),'MMM dd, yyyy');
于 2015-06-05T03:25:24.763 に答える
5

「2017年1月30日16:31:20」のように出力したい場合は、簡単な手順に従ってください。

step1-jsコントローラーで次の変数を宣言します

$scope.current_time = new Date();

step2-のようなhtmlページに表示する

{{current_time | 日付：'中'}}

于 2017-01-30T11:05:20.760 に答える
5

ビュー側の日付を角度でフォーマットするのは非常に簡単です....以下の例を確認してください：

{{dt | 日付： "dd-MM-yyyy"}}

于 2017-04-17T07:20:11.450 に答える
3

を使用momentjsして、angularjsに日時フィルターを実装できます。例えば：

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

日付はタイムスタンプ形式です。

于 2015-07-28T05:21:03.237 に答える
1

$filterコントローラに依存関係を追加します。

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')
于 2016-11-22T09:44:05.487 に答える
0

ロケールに応じた日付の書式設定が適切にサポートされているmoment.jsを使用することをお勧めします。

日付のフォーマットにmoment.jsメソッドを内部的に使用するフィルターを作成します。

于 2017-01-11T03:51:40.940 に答える