AngularJSで日付時刻をフォーマットする

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

v.DtはおそらくDate（）オブジェクトではありません。

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

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

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

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

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

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

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

{{dt | date:dateFormat }}

これは古いアイテムであることは知っていますが、別のオプションを検討する必要があると思いました。

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

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

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

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

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

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

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

次に、日付文字列または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

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

<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

ドキュメントの書き込みディレクティブ（ショートバージョン）のセクションを見ましたか？

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

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

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

「Jan 30、2017 4:31:20 PM」のように出力する場合は、簡単な手順に従ってください。

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

$scope.current_time = new Date();

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

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

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

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

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

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

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

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

ロケールに応じた日付フォーマットのサポートが充実しているmoment.jsを使用することをお勧めします。

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