angularjs日期格式化如何自定义显示

教程大全 2026-01-22 19:59:38 浏览次

AngularJS通过内置的过滤器，支持对get="_blank">日期对象的格式化输出，该过滤器基于标准的日期格式字符串，允许开发者灵活地定义显示样式。 {{ dateVariable | date:'yyyy-MM-dd' }} 会将日期格式化为“年-月-日”的形式。

内置过滤器详解

过滤器的语法为 {{ expression | date[:format[:timezone]] }} ，其中 expression 可以是日期字符串、时间戳或对象，为可选的格式字符串，用于指定时区。

常用格式化符号 ：

示例：

在实际开发中,常需要将用户输入的字符串转换为对象，或将对象转换为字符串存储，AngularJS提供了过滤器的反向操作，即通过或手动解析实现。

$scope.dateString = '2023-10-01';$scope.parsedDate = new Date($scope.dateString);

$scope.dateString = $scope.currentDate.toISOString(); // ISO格式字符串

app.filter('chineseDate', function() {return function(date) {if (!date) return '';var d = new Date(date);return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日';};});

使用方式： {{ currentDate | chineseDate }}

$scope.date1 = new Date('2023-01-01');$scope.date2 = new Date('2023-10-01');$scope.diffDays = Math.floor((($scope.date2 - $scope.date1) / (1000 * 60 * 60 * 24)));

国际化与本地化处理

app.config(function($localeProvider) {$localeProvider.identities['zh-cn'] = {DATETIME_FORMATS: {'shortDate': 'yyyy/MM/dd','mediumDate': 'yyyy年MM月dd日','longDate': 'yyyy年MM月dd日 HH:mm:ss'}};});

常见问题与解决方案

最佳实践

AngularJS的日期处理功能虽然简单,但通过合理使用内置过滤器和自定义方法，可以满足大多数业务场景，开发者需注意格式化规范、时区问题和性能优化，并结合实际需求选择合适的解决方案，随着AngularJS逐渐被Angular取代，建议在新项目中优先使用Angular更强大的日期管道（），但在维护旧项目时，掌握AngularJS的日期处理仍具有重要意义。

如何设置时间显示有星期几？

点击“开始→设置→控制面板”，找到并双击“区域与语言选项”图标，然后，在弹出的设置窗口中点击“区域选项→自定义”按钮，接着点击“自定义区域选项”窗口中的“日期”标签，在最下面的“长日期格式”后面加上字母“dddd”。最后点击“确定”按钮退回到控制面板。此时再将鼠标悬停到时钟上时，就可以提示当天的星期了。 DDDD可以放在前面，也可以放在后。放在什么地方，星期几就显示在什么位置上。