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

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

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

HTML模板绑定：在这种方法中，我们使用管道(|)运算符。该管道运算符有助于按照所需格式(包括–角度标准格式和用户定义格式)转换日期对象，数字。在角度格式中，可以使用此运算符根据任何格式，语言环境和时区来修改日期对象。它仅以可读格式格式化日期。

句法：

{{ 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");

示例：在这里，我们使用角度控制器来更改日期格式。通过字符串$ date和$ 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