web-dev-qa-db-ja.com

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

誰かが私のコントローラの中でこの1387843200000フォーマットからこの24/12/2013に日付を変換する方法を私に教えてください？

ちなみに私の日付はこのようにして保存されていますinput type="date"フィールドでeditフォームにバインドすることが全く実装されていないとき。

＃ここで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>
angularjsdatedatetimedatetime-formatng-controller
108
Iladarsda
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

注：type = "date"を指定したpattern = ""の使用は標準的ではないように見えますが、Chrome 31では期待通りに動作するようです。

203
Darryl Miles

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の日付のフィルタリングと書式設定

16
Prashobh

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として宣言する必要があります。

1
Dudi

私はJavascriptで提案します：

var item=1387843200000;
var date1=new Date(item);

そしてdate1はDateです。

1
BrianPando