AngularJS-在控制器中转换日期


114

有人可以建议我如何将日期从这种1387843200000格式转换为24/12/2013 控制器中的日期吗?

仅供参考,我的日期将以这种方式存储,input type="date"并且完全不填充绑定到带有字段的编辑表单时。

#Plunker演示在这里。

编辑Ctrl

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

@JustinNiessner-我的日期以这种方式存储,当input type="date"未填充具有字段的编辑表单的绑定时
Iladarsda

1
您可以使用moment.js angularjs日期时间过滤器-github.com/urish/angular-moment
virender 2015年

Answers:


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


嗨,我尝试按照建议实施,但对我来说不起作用。
Mukun 2014年

嗨,我尝试按照建议实施,但对我来说不起作用。我来自spring webservice的响应是{“ basicPersonalInfo”:{“ empNo”:“ 04005001”,“ dob”:490645800000},“ communicationInfo”:null},我需要在bootstrap / HTML5日期输入字段中显示它。我在控制器中使用了过滤器,例如$ scope.basicInfo = BasicInformationService.query();。$ scope.basicInfo。$ promise.then(function(data){$ scope.basicInfo.basicPersonalInfo.dob = $ filter('date')(data.basicPersonalInfo.dob,“ yyyy-MM-dd”);}); 任何帮助表示赞赏
Mukun

1
好的,我像这样更改了控制器中的格式,它似乎可以正常工作,不确定是否正确。$ scope.basicInfo.basicPersonalInfo.dob =新日期($ filter('date')(data.basicPersonalInfo.dob,“ yyyy-MM-dd”));
Mukun 2014年

我的日期是从API DateTime来的:“ 2017/12/15”,但是这样做{{M.DateTime | date:'dd-MM-yyyy'}}不更改日期格式。如何在表达式中设置日期格式?
维沙尔·辛格

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,这样才能正常工作。


1

我建议用Javascript:

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

然后date1是一个Date。


是的,您的权利是我们希望将时间戳转换为日期的权利
macha devendher
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.