AngularJS-コントローラーで日付を変換する


114

私のコントローラ内でこの1387843200000形式からこれに日付を変換する方法を誰かが私に提案してくれませんか?24/12/2013

ちなみに私の日付はこのように保存され、input type="date"フィールドを含む編集フォームにバインドすると、まったく入力されません。

#Plunkerのデモはこちら。

EditCtrl

app.controller("EditCtrl", [ "$scope", "$filter", "db" function ($scope, $filter, db){

    // this gets me an item object
    var item = db.readItem();

    // item date = 1387843200000
    // this returns undefined 
    item.date = $filter('date')(date[ item.date, "dd/MM/yyyy"]);

}]);

Edit.html-テンプレート

<form name="editForm" class="form-validate">

        <div class="form-group">
            <label for="date">Event date.</label>
            <input type="date" class="form-control" ng-model="event.date" id="date" required />
        </div>

        <a href="#/" class="btn btn-danger ">Cancel</a>
        <button id="addEvent" class="btn btn-primary pull-right" ng-disabled="isClean() || editForm.$invalid" ng-click="saveEvent()">Save event.</button>

    </form>

1
なぜコントローラーで変換する必要があるのですか?表示可能な値だけが必要な場合は、日付フィルターを使用してビューの日付をフォーマットできます。
Justin Niessner、2013年

@JustinNiessner-私の日付はこのように保存され、input type="date"フィールドを使用して編集フォームにバインドすると入力されません
Iladarsda

1
あなたはmoment.js angularjs日時フィルタを使用することができます- github.com/urish/angular-moment
ヴィレン

回答:


212
item.date = $filter('date')(item.date, "dd/MM/yyyy"); // for conversion to string

http://docs.angularjs.org/api/ng.filter:date

ただし、HTML5 type = "date"を使用している場合は、ISO形式yyyy-MM-ddを使用する必要があります。

item.dateAsString = $filter('date')(item.date, "yyyy-MM-dd");  // for type="date" binding


<input type="date" ng-model="item.dateAsString" value="{{ item.dateAsString }}" pattern="dd/MM/YYYY"/>

http://www.w3.org/TR/html-markup/input.date.html

注:pattern = ""とtype = "date"を一緒に使用すると標準的ではないように見えますが、Chrome 31では予想どおりに動作するようです。


こんにちは、私は提案されたように実装しようとしましたが、私にとってはうまくいきません。
ムクン、2014

こんにちは、私は提案されたように実装しようとしましたが、私にとってはうまくいきません。春のウェブサービスからの私の応答は{"basicPersonalInfo":{"empNo": "04005001"、 "dob":490645800000}、 "communicationInfo":null}です。それを私のブートストラップ/HTML5日付入力フィールドに表示する必要があります。$ scope.basicInfo = BasicInformationService.query();のように、コントローラーでフィルターを使用しました。$ scope.basicInfo。$ promise.then(function(data){$ scope.basicInfo.basicPersonalInfo.dob = $ filter( 'date')(data.basicPersonalInfo.dob、 "yyyy-MM-dd");}); 助けて
いただければ幸い

1
わかりました私はこのように私のコントローラーのフォーマットを変更しました、そしてそれはうまくいくようです、それが正しい方法であるかどうかわかりません。$ scope.basicInfo.basicPersonalInfo.dob = new Date($ filter( 'date')(data.basicPersonalInfo.dob、 "yyyy-MM-dd"));
Mukun、2014

私の日付は、API DateTime: "2017/12/15"のようになっていますが、これを実行しています{{M.DateTime | 日付: 'dd-MM-yyyy'}}は日付形式を変更しません。式の中でそれをどのように書式設定しますか?
Vishal Singh

16

filter.jsを作成し、これを再利用可能にすることができます

angular.module('yourmodule').filter('date', function($filter)
{
    return function(input)
    {
        if(input == null){ return ""; }
        var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
        return _date.toUpperCase();
    };
});

見る

<span>{{ d.time | date }}</span>

またはコントローラーで

var filterdatetime = $filter('date')( yourdate );

Angular jsでの日付のフィルタリングとフォーマット。


1
AngularJSには既に日付フィルターが組み込まれているようです:docs.angularjs.org/api/ng/filter/date
AlikElzin-kilaka

1

ここでのすべてのソリューションは、モデルを入力に実際にバインドするわけではありません。なぜなら、フォームを送信した後、オブジェクト内dateAsStringに保存されるようにを変更する必要があるためですdate

バインド効果が必要ない場合は、入力に表示するだけで、

簡単なものは:

<input type="date" value="{{ item.date | date: 'yyyy-MM-dd' }}" id="item_date" />

次に、必要に応じて、コントローラで、次のように編集した日付を保存できます。

  $scope.item.date = new Date(document.getElementById('item_date').value).getTime();

注意:これを機能させるには、コントローラーでitem変数を宣言する必要があります$scope.item


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.