如何使用 AngularJS 更改日期格式？

AngularJS 提供了两种不同的方式来改变日期的格式。可以通过以下方法实现：

• 使用 HTML 模板绑定
• 使用 JavaScript

HTML 模板绑定：在此方法中，我们使用管道 (|)运算符。此管道运算符有助于根据所需格式（包括角度标准格式和用户定义格式）转换日期对象、数字。在 angular 中，可以使用此运算符根据任何格式、区域设置和时区修改日期对象。它仅以可读格式格式化日期。

句法：

{{ dateVariable | date [ : format [ : timezone [ : locale ] ] ] }}

属性说明：

Attribute	Description
Format	Both predefined as well as user defined formats can be used in this attribute. The default value of this parameter is – ‘mediumDate’. Optional Parameter
TimeZone	The default value of timezone is – user’s local system timezone. We can provide value as offset (‘0530’) or standard UTC/GMT (IST) or continental US timezone abbreviation. Optional Parameter
Locale	The default value for locale is – ‘undefined’. For example, we can set it as – ‘en_US’.Optional Parameter

示例：在此示例中，我们将当前日期更改为不同的格式。此日期格式包括标准格式和用户定义格式。

  

    
    

  

    
        
            Formatted Date with default parameters:
            {{ dateValue | date }}
        
  
        
            Formatted Date with standard filter (ShortDate):
            {{ dateValue | date:'shortDate' }}
        
  
        
            Formatted Date with standard filter (FullDate):
            {{ dateValue | date:'fullDate' }}
        
  
        
            Formatted date with user defined format:
            {{ dateValue | date : "'today is ' MMMM d, y" }}
        
    
  
    
        var app = angular.module('myApp', []);
        app.controller('datCtrl', function ($scope) {
            $scope.dateValue = new Date();
        });
    

  

当我们运行代码时，它将以不同的格式提供当前日期。

Input Current Date: 24th March 2020

输出：

Formatted Date with default parameters: Mar 24, 2020 
Formatted Date with standard filter (ShortDate): 3/24/20
Formatted Date with standard filter (FullDate): Tuesday, March 24, 2020
Formatted date with user defined format:today is March 24, 2020

正如我们所见，使用这个管道运算符非常容易。现在我们来看看第二种方法。

使用 JavaScript 控制器：如果您有一个字符串格式的日期，这种方法会很有帮助。

句法：

$scope.dateVariable = $filter('date')("dateString", "dateformat");

示例：在这里，我们使用角度控制器来更改日期格式。日期作为字符串传递并使用 $filter 过滤器，它用于过滤对象元素和数组。它为您提供指定格式的原始数组的子集。

  

    
    
  
    
        How to change the date format using AngularJS ?
    

  

    
        
            Input Date in String Format: {{myDate}}
            Output Date : {{myDateFiltered}}
        
    
  
    
        var app = angular.module('MyApp', []);
  
        app.controller('MyCtrl', ['$scope', '$filter', 
                function ($scope, $filter) {
            $scope.myDate = new Date('2013/07/21');
              
            $scope.myDateFiltered = $filter('date')
                    ($scope.myDate, 'dd/MM/yy');
        }]);
    

  

输出：

Input Date in String Format: "2013-07-20T18:30:00.000Z"
Output Date : 21/07/13