web-dev-qa-db-ja.com

Angularjsで日付をフォーマットする方法

Dateをmm/dd/yyyyとしてフォーマットしたいです。私は次のことを試しましたが、どれも私にはうまくいきません。誰かが私をこれで手伝ってくれる？

参照： ui-date

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />
angularjsdateformatdate-formatdatefilter
134
user16

Angular.jsには組み込みの日付フィルタがあります。

デモ

// in your controller:
$scope.date = '20140313T00:00:00';

// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

// produces
03/13/2014

サポートされている日付フォーマット を日付フィルタのソースで見ることができます 。

編集 ：

日付ピッカーで正しいフォーマットを取得しようとしている場合（日付ピッカーを使用しているのか、それともフォーマッタを使用しようとしているのかは不明）、サポートされているフォーマット文字列は次のとおりです。 https://api.jqueryui.com/デートピッカー/

193
Jim Schubert

あなたが入力フィールドを持っていないのではなく、単に正しいフォーマットで文字列の日付を表示したいのなら、あなたは単に行くことができます：

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

そしてjsファイルでは、

    // @Function
    // Description  : Triggered while displaying expiry date
    $scope.formatDate = function(date){
          var dateOut = new Date(date);
          return dateOut;
    };

これは文字列の日付をjavascriptの新しい日付オブジェクトに変換し、MM/dd/yyyyの形式で日付を表示します。

出力： 12/15/2014

編集
文字列フォーマット "2014-12-19 20:00:00"（PHPバックエンドから渡される）の文字列日付を使用している場合、コードを内の1つ： https://stackoverflow.com/a/27616348/1904479

さらに追加する
JavaScriptからコードを次のように設定できます。

$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');

それはあなたがすでにあなたと日付を持っている場合のためです、さもなければあなたは現在のシステム日付を得るために次のコードを使うことができます：

$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');

日付フォーマットの詳細については、 https://docs.angularjs.org/api/ng/filter/date を参照してください。

92
Kailas

私はこれを使っています、そしてそれはうまく働いています。

{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM
24
Ravindra

これは実際にあなたが求めているものではありません - しかし、あなたはhtmlで何かのように日付入力フィールドを作成しようとすることができました：

<input type="date" ng-model="myDate" />

それからあなたが使用するページにこれを印刷するために：

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

最後に、私のコントローラでは、入力値から日付を作成するメソッドを宣言しました（クロムでは明らかに1日休みです）。

$scope.convertToDate = function (stringDate){
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
};

それであなたはそれを持っています。すべての動作を確認するには、次のプランカーを参照してください。 http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview 幸運を祈ります。

17
drew_w

これは動作します：

{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

注：これらを置き換えると、残りの日付/ミリ秒は指定の形式に変換されます。

10
Nitish Kumar

filter を使います

.filter('toDate', function() {
  return function(items) {
    return new Date(items);
  };
});

それから

{{'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'}}
4
Hamza BENDALI BRAHAM

サーバー側のコードからクライアント側にUTCの日付形式を渡すだけです。

以下の構文を使用します - 

 {{dateUTCField  +'Z' | date : 'mm/dd/yyyy'}}

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018
3
Shivprasad P
var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

ここではController名は "myController"、アプリ名は "myApp"です。

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

結果は次のようになります。 - * 10-29-2010 * 01-03-2013

1
Gopakumar AP

上記のすべての解決策を見た後、次のものが私にとって最も早い解決策でした。角材を使用している場合：

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

フォーマットを設定するには：

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        // Requires Moment.js OR enter your own formatting code here....
        return moment(date).format('DD-MM-YYYY');
    };
});

編集：あなたはまた、日付を入力するためのparseDateを設定する必要があります（この答えから Angular Material のmd-datepickerのフォーマットを変更する）

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};
1
johan

私は同じ問題を抱えていて、上記のコメントと同じように、JavaScriptにはネイティブメソッドがなければならないと考えました。 new Date(valueofdate)はDateオブジェクトを返します。

しかし、 http://www.w3schools.com/js/js_date_formats.asp をチェックしてください。 Stringからの日付、たとえばPHPからのエコーは、次のようになります。

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

これは文字列を渡します。例えば、'1999-3-3'とJavaScriptは正しいフォーマットのオブジェクトへの解析を行います。

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

日付フォーマットのPHPへのリンク： http://www.w3schools.com/php/func_date_date_format.asp 。

0
Juan José Campis

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

これを使うとうまくいくはずです。 :) reviewDataおよびdateValueフィールドは、パラメータの残りの部分を変更しないでおくことができます

0
Jayant Rajwani

{{convertToDate |日付：dateformat}}
$ rootScope.dateFormat = 'MM/dd/yyyy';

0
Selvam Annamalai

問題は、この行から来ているようです。
https://github.com/angular-ui/ui-date/blob/master/src/date.js＃L106 。

実際にはこの行はjQuery UIとの結びつきであり、データ形式を挿入する場所であるべきです。

var optsに見られるように、あなたが想像できるようにng-date-formatからの値を持つプロパティdateFormatはありません。

とにかくディレクティブはuiDateConfigにプロパティを追加するためにoptsと呼ばれる定数を持っています。

柔軟な解決策（推奨）：

ここ から、jqueryのuiオプションを使って、ディレクティブにコントローラー変数を注入するオプションをいくつか挿入できることがわかります。

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) {
    $scope.dateOptions = {
        dateFormat: "dd-M-yy"
    };
});

ハードコーディングされた解決策：

この手順をずっと繰り返したくない場合は、date.jsのuiDateConfigの値を次のように変更します。

.constant('uiDateConfig', { dateFormat: "dd-M-yy" })
0
borracciaBlu