在AngularJS中使用ng-model格式化日期

ng-model指令用于将输入字段的值绑定到控制器中的属性。格式化程序用于将输入值从一种纹理表示形式转换为另一种所需的表示形式。当需要根据国家/地区指定的格式在各个位置更新日期时，用于日期格式的格式化程序将很有用。

语法：必须在HTML标记内添加以下属性，如下例所示。

input type = “date” id = “exampleInput” name = “input” ng_model = “example.value”

用法：

input type = ” date ”
ng-model = ” string ”
[ name = ” string ” ]
[ min = ” string ” ]
[ max = ” string ” ]
[ ng-min = ” ” ]
[ ng-max = ” ” ]
[ required = ” string ” ]
[ ng-required = ” string ” ]
[ ng-change = ” string ” ]

上述参数用作ng模块中的输入组件。在下面的示例中，我们将看到如何使用其中的一些参数。

示例1：第一个示例显示如何更改日期格式。这是一个简单的HTML代码，其中您的国家/地区格式日期的ng-model值更改为其他国家/地区格式日期。

  

    
    
        Format a Date using 
        ng-model in AngularJS
    
  
    
    

  

    
        
            angular.module('gfg', [])
  
                .controller('dateCtrl', function ($scope) {
                    $scope.firstDate = new Date();
                    $scope.secondDate = "2020-05-20";
                })
                .directive('date', function (dateFilter) {
                    return {
                        require: 'ngModel',
                        link: function (scope, 
                                       elm, attrs, ctrl) {
  
                            var dateFormat =
                                attrs['date'] || 'yyyy-MM-dd';
  
                            ctrl.$formatters.unshift(
                                    function (modelValue) {
                                return dateFilter(
                                    modelValue, dateFormat);
                            });
                        }
                    };
                })
  
        
        
            
                
                    GeeksforGeeks
                
  
                
                    Standard format for India 
                
  
                
  
                
                    
                        Standard format for Korea
                    
                
                {{secondDate}}
            
        
    

  

输出：

示例2：在下面的HTML代码段中，显示了如何从日期选择器菜单中输入日期，然后以给定格式yyyy-mm-dd表示。此外，还提供了验证检查，以检查用户给定的日期是否跨越程序所需的范围。对于最小和最大日期值，我们使用了“ min”和“ max”参数，如下所示：min =“ {{minDate | date：’yyyy-MM-dd’}}“和max =” {{maxDate |日期：’yyyy-MM-dd’}}”。另外，如果未输入值，则“ required”参数将设置所需的验证错误密钥。

  

    
    
        Format a Date using 
        ng-model in AngularJS
    
  
    
    


  
    
        
            angular.module('dateInputExample', [])
                .controller(
                    'DateController', ['$scope',
                            function ($scope) {
                        $scope.example = {
                            value: new Date(2020, 4, 25)
                        };
                    }]);
        
        
  
            
                GeeksforGeeks
            
  
            
                Pick a date in 2020:
            
  
            
  
            
                
                    Required!
                
  
                
                    Not a valid date!
                
            
  
            
                value = {{example.value | 
                    date: "yyyy-MM-dd"}}
            
  
            
                Is valid date = 
                {{myForm.input.$valid}}
            
        
    
  

输出：

参考： https://docs.angularjs.org/api/ng/input/input%5Bdate%5D