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

日付をの形式にしたいmm/dd/yyyy。私は以下を試しましたが、どれもうまくいきませんでした。誰かがこれを手伝ってくれる？

参照：ui-date

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

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

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

サポートされている日付形式は、日付フィルターのソースで確認できます。

編集：

datepickerで正しい形式を取得しようとしている場合（datepickerを使用しているのか、それともフォーマッターを使用しているのか不明）、サポートされている形式文字列は、https：//api.jqueryui.com/datepicker/です。

入力フィールドがなく、文字列の日付を適切なフォーマットで表示したい場合は、次のようにしてください：

<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バックエンドから渡される）の文字列日付を使用している場合は、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を参照して ください。

私はこれを使用していますが、問題なく動作しています。

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

これは本当にあなたが求めているものではありません-しかし、次のような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;
};

だからあなたはそれを持っています。全部の作業を確認するには、次のplunkerを参照してください。http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview .Best運の！

これは動作します：

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

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

Angular dateAPIを参照してください：AngularJS API：日付

使用法：

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}

例：

コード：

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>

結果：

10/29/2010

フィルターを使う

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

その後

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

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

以下の構文を使用-

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

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018

上記のすべてのソリューションを検討した後、以下が私にとって最も迅速なソリューションでした。アンギュラーマテリアルを使用している場合：

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

var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

ここでは、コントローラー名は「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

この問題は次の行から発生しているようです：
https : //github.com/angular-ui/ui-date/blob/master/src/date.js#L106。

実際、この行はjQuery UIとのバインディングであり、データ形式を挿入する場所です。

ご覧のとおり、ng-date-formatの値を持つvar optsプロパティはありません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"
    };
});

ハードコーディングされたソリューション：

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

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

同じ問題があり、上記のコメントのとおり、JavaScriptにはネイティブメソッドが必要だと考えました。事はnew Date(valueofdate)Dateオブジェクトを返すことです。

ただし、先行ゼロを示す部分であるhttp://www.w3schools.com/js/js_date_formats.aspを確認してください。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。

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

これを使うとうまくいくはずです。:) reviewDataフィールドとdateValueフィールドは、パラメータの残りをそのままにすることができるため、変更することができます

{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';

// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>