web-dev-qa-db-ja.com

フォーマット日付時刻

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です。

javascriptangularjsdatedatefilter
121
bsr

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

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

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

scope.v.Dt = Date.parse(scope.v.Dt);
62
David Souther

あなたのコードは、 this fiddle のように動作するはずです。

うまくいくためには、あなたのv.Dtが適切な Date オブジェクトであることを確認する必要があります。

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

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

{{dt | date:dateFormat }}
117
Gloopy

これは古い項目だと思いますが、他に検討すべき選択肢があると思いました。

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

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

それからあなたのマークアップで、あなたは一緒にフィルタをパイプ処理することができます：

{{item.myDateTimeString | asDate | date:'shortDate'}}
57
Jim Wooley

あなたはこのような '日付'フィルタを得ることができます：

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

これはあなたが望むフォーマットであなたに今日の日付を与えるでしょう。

56
CodeOverRide

これは日付文字列OR javascript Date（）オブジェクトをとる フィルタ です。 Moment.js を使用し、任意の Moment.js 変換関数を適用できます人気の「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);
  };
});

そう...

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

49
Charlie Martin

これがいくつかの一般的な例です。

<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>7/4/2014 12:01:59

22
James Lawruk

ドキュメント のWriting directives（short version）のセクションを見ましたか？

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

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

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

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

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

$scope.current_time = new Date();

step2-のようなHTMLページで表示

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

5
shani singh

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

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

5
Rajat-Systematix

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

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

3
Rubi saini

私はあなたがmoment.jsを使用することをお勧めしますそれはロケールに従って日付フォーマットのためのよいサポートを得ました。

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

0
Rahul Tokase

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

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