如何在angularjs中格式化date
我想将date格式设置为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有一个内置的datefilter。
演示
// 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
您可以在datefilter的源代码中看到支持的date格式。
编辑 :
如果你想在dateselect器中得到正确的格式(不清楚是否使用datepicker或只是使用它的格式化程序),那些支持的格式string在这里: https : //api.jqueryui.com/datepicker/
如果您没有input字段,而只是想以正确的格式显示stringdate,则可以简单地使用:
<label ng-bind="formatDate(date) | date:'MM/dd/yyyy'"></label>
并在js文件中使用:
// @Function // Description : Triggered while displaying expiry date in Customer Details screen. $scope.formatDate = function(date){ var dateOut = new Date(date); return dateOut; };
这会将string中的date转换为JavaScript中的新date对象,并以MM / dd / yyyy格式显示date。
产出: 12/15/2014
编辑
如果您使用格式为“2014-12-19 20:00:00”的string格式(从PHP后端传递),则应该将代码修改为以下格式: https : //stackoverflow.com/一个/一百九十零万四千四百七十九分之二千七百六十一万六千三百四十八
进一步添加
从JavaScript你可以设置代码为:
$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');
这是为了防止你已经和你有约会,否则你可以使用下面的代码来获得当前的系统date:
$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');
有关date格式的更多详细信息,请参阅: 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中创build一个dateinput字段,如:
<input type="date" ng-model="myDate" />
然后打印这个页面上你会使用:
<span ng-bind="convertToDate(myDate) | date:'medium'"></span>
最后,在我的控制器中,我声明了一个方法,它根据input值创build一个date(在chrome中显然是parsing为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。祝你好运!
这将工作:
{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}
注:一旦你更换这些剩余的date/毫米将被转换为给定的方法。
请参阅angular度date
api: AngularJS API:date
Angular – date
filter:
用法:
{{ date_expression | date [: 'format'] [: 'timezone' ] }}
Exampe:
码:
<span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>
结果:
10/29/2010
看完所有上述解决scheme后,以下是我最快的解决scheme。 如果您正在使用angular材料:
<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键入date(从这个答案改变格式的angular度材料中的MD – datepicker )
$mdDateLocaleProvider.parseDate = function(dateString) { var m = moment(dateString, 'DD/MM/YYYY', true); return m.isValid() ? m.toDate() : new Date(NaN); };
好吧,似乎来自这一行的问题:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 。
实际上,这行是与jQuery UI的绑定,它应该是注入数据格式的地方。
正如你可以看到var opts
没有财产dateFormat
ng-date-format的值,你可以看到。
无论如何,该指令有一个名为uiDateConfig
常量添加属性opts
。
灵活的解决scheme(推荐):
从这里你可以看到你可以插入一些选项在指令中注入一个控制器variables与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" }; });
硬编码解决scheme:
如果您不想重复此过程,则始终将uiDateConfig
中的uiDateConfig的值更改为:
.constant('uiDateConfig', { dateFormat: "dd-M-yy" })
我有同样的问题和上面的评论,认为必须在JavaScript中的本地方法。 事情是new Date(valueofdate)
返回一个date对象。
但是,检查在http://www.w3schools.com/js/js_date_formats.asp ,部分说,领先的零。 来自String的date,例如来自PHP的回应,必须如下所示:
$valueofdate = date('Yn-j',strtotime('theStringFromQuery'));
这将传递一个string,例如: '1999-3-3'
和JavaScript将parsing到一个对象与正确的格式
$scope.valueofdate = new Date(valueofdate); <input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> <input type="date" ng-model="valueofdate" />
链接到PHP的date格式: http : //www.w3schools.com/php/func_date_date_format.asp 。
ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"
使用这应该工作得很好。 🙂 reviewData和dateValue字段可以改变,因为你的参数可以保持相同
// $scope.dateField="value" in ctrl <div ng-bind="dateField | date:'MM/dd/yyyy'"></div>