将模型值格式化为日期angularjs

时间:2019-04-25 20:29:46

标签: angularjs date format

我正在改进和自动化旧版Web应用程序中的某些功能。日期格式是其中之一。以前,我们使用jquery函数来处理这些问题,现在我们使用angularjs进行处理。

对于输入,我们使用指令,它可以完美地工作。当不使用它,不执行指令并且模型的值没有适当的值时,就会出现问题。

指令:

app.directive('formatDate', function($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {            
            // format text (model to view)
            modelCtrl.$formatters.push(function(value) {
                if(value !== "" && typeof value !== "undefined" && value !== null){                
                    return value.split("-").reverse().join("/");
                }
            });

            // format text (view to model)
            modelCtrl.$parsers.push(function(value) {
                if(value !== "" && typeof value !== "undefined" && value !== null){                    
                    var date = new Date(value.split("/").reverse().join("-"));
                    date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
                    return date;                    
                }
            });
        }
    };
});

问题:

从Web服务加载值时,例如:“ invoice.date ”来自数据库,格式为“ yyyy-mm-dd ”。它以“ dd / mm / yyyy ”格式加载到输入中,并且如果修改了输入,则该指令将使模型值成为“日期对象”。但是,如果未编辑任何字段,则该值仍为“ yyyy-mm-dd ”,并且该字符串会导致错误。 (注意:他们将Web服务与jpa一起使用,我无法在后端进行任何更改)

如何在发送值之前格式化它而不进行手动验证和分析每个功能中的值?我可以在每个变量上使用$ watch而不引起与指令或无限循环的冲突吗? Angular还有其他方法可以自动执行此操作?

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我已经看过很多次了,这很普遍,您使用时间是因为jpa或数据库因为时区而更改了日期,对吧?

好的,那么它来自网络服务,因此它可能采用json格式。您可以简单地将其转换为日期对象,然后再将其分配给模型值,从而始终使用此格式。另一种方法是在发送之前进行转换,而您已经说过要避免这种情况。

可以完成很多事情。总结一下:

(选择一个)

  1. 在收到后以及分配之前转换格式。要么 手册,通过简单的javascript或任何其他方法。
  2. 相反,在发送之前,请更改格式。
  3. 为避免手动操作,请使用函数或事件(如果有)查找 $ watch可用于检测其格式并进行更改 正确地。因此,如果以编程方式分配它,它也将起作用。
  4. 还有其他方法可以过滤和详细说明响应,但我 认为这种情况太过分了。正如Jorge所说,可以添加一些插件,工具和更多内容。但是我总是尽量避免过多的东西。

问题是尝试使用angularjs进行自动化,因为有很多方法,而且由于每个项目都不相同且每个人都有不同的思维方式,因此很难找到“正确”的方法。