angularjs - AngularJS - convert dates in controller

Question

Could anyone please suggest me how to convert date from this 1387843200000 format into this 24/12/2013 inside my controller?

Just FYI my dates are stored in this way & when binding to edit form with input type="date" field is not being populated at all.

#Plunker demo here.

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

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

Answer 1

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 中以预期的方式工作。

Answer 2

创建一个 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 中的日期过滤和格式化。

Answer 3

我建议在 Javascript 中：

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

然后 date1 是一个日期。

Answer 4

这里的所有解决方案并没有真正将模型绑定到输入，因为您必须将其更改回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才能使其正常工作。