类别:<跨度>日期格式

如何进行高级日期格式化?

betway必威滚球

本周，我们进行了报道的基本日期格式设置日期管和的dateFormat函数．虽然这些工具在大多数基本场景下工作得很好，但有时我们想做更复杂的日期操作，例如:

  • 在日期上加/减天数
  • 显示一个持续时间，例如:"最近更新:2天前”
  • 比较日期

大多数人在这种情况下使用Moment.js，但是js现在正式完成了并且处于维护模式。

最好的选择之一是date-fns．它使用现代Javascript，并尽可能依赖于本机Date对象。如果你以前用过Moment.js，date-fns看起来很熟悉:

              
              

               进口{format, formatDistance, formatRelative, subDays}<跨度class="hljs-keyword">从<跨度class="hljs-string">“date-fns”格式(<跨度class="hljs-keyword">新<跨度class="hljs-built_in">日期（），<跨度class="hljs-string">“‘今天是‘eeee’”）<跨度class="hljs-comment">//=> "今天是星期五"格式Distance (subDays (<跨度class="hljs-keyword">新<跨度class="hljs-built_in">日期（），<跨度class="hljs-number">3.），<跨度class="hljs-keyword">新<跨度class="hljs-built_in">日期（）{<跨度class="hljs-attr">addSuffix：<跨度class="hljs-literal">真正的})<跨度class="hljs-comment">//=> "3 days ago"格式Relative (subDays (<跨度class="hljs-keyword">新<跨度class="hljs-built_in">日期（），<跨度class="hljs-number">3.），<跨度class="hljs-keyword">新<跨度class="hljs-built_in">日期（））<跨度class="hljs-comment">//=> "last Friday at 7:26 p.m. ."
              
代码语言:<跨度class="shcb-language__name">JavaScript<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">javascript<跨度class="shcb-language__paren">）

该库包含一些有趣的帮助函数，例如closestTo获取数组中最接近给定日期的日期，或formatDistanceToNow，它返回有意义的、可读的距离，比如“不到一分钟”或“大约一个月”。

这些特性都是独立的函数，这对于Angular应用来说非常棒，因为它允许在构建时摇树(只有我们需要的函数包含在构建输出中)，而Moment只有一个时刻()函数中包含了所有东西，防止了正确的摇树。

Angular中的格式化函数

betway必威滚球

我们提到过的默认配置选项日期管在Angular中。

你知道我们也可以在Typescript代码中使用日期格式吗formatDate函数?

此函数具有与日期管道相同的签名，这非常有意义，因为管道本身使用的函数(源代码在这里)：

              

               formatDate(值:字符串|数字| .<跨度class="hljs-built_in">日期,<跨度class="hljs-attr">格式：字符串,<跨度class="hljs-attr">语言环境：字符串，时区?:字符串):字符串
              
代码语言:<跨度class="shcb-language__name">JavaScript<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">javascript<跨度class="shcb-language__paren">）

使用该函数所需要的只是将其导入@angular /常见：

              

               进口{formatDate}<跨度class="hljs-keyword">从<跨度class="hljs-string">“@angular /普通”；
              
代码语言:<跨度class="shcb-language__name">JavaScript<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">javascript<跨度class="shcb-language__paren">）

该函数的唯一缺点是没有默认格式或区域设置，因此必须将这两个值作为参数传递，而对于日期管道。

顺便说一下，类似的功能可用于数字、货币和百分比:

关于这些函数的更多信息，我有这个教程用Angular格式化日期和数字．

日期管道默认格式和时区

betway必威滚球

日期管道是用Angular格式化日期的最方便的方法。然而，通常情况下，我们需要在整个应用程序中使用一致的日期格式，这意味着每次使用日期管道时都必须传递自定义格式:

              

               <<跨度class="hljs-name">跨度>今天是{{今天|日期:'月/日/日'}}<跨度class="hljs-tag">跨度>
              
代码语言:<跨度class="shcb-language__name">HTML、XML<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">xml<跨度class="shcb-language__paren">）

当然，我们可以将该格式存储在一个常量中，并在每次使用管道时重用该常量，但这不是很方便。

幸运的是，从Angular 15开始，我们现在可以通过配置一个名为DATE_PIPE_DEFAULT_OPTIONS．

它的工作原理是将以下代码添加到依赖注入配置(数组的供应商)app.modules.ts：

              

               提供者:[{<跨度class="hljs-attr">提供: DATE_PIPE_DEFAULT_OPTIONS,<跨度class="hljs-attr">useValue：{<跨度class="hljs-attr">dateFormat：<跨度class="hljs-string">“MM / dd / yy”}}]
              
代码语言:<跨度class="shcb-language__name">JavaScript<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">javascript<跨度class="shcb-language__paren">）

有了这样的配置，我们就可以在没有任何参数的情况下使用管道，并在整个应用程序中自动应用默认格式:

              

               <<跨度class="hljs-name">跨度>今天是{{今天|日期}}<跨度class="hljs-tag">跨度>
              
代码语言:<跨度class="shcb-language__name">HTML、XML<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">xml<跨度class="shcb-language__paren">）

属性也可以自定义时区时区相同的属性DatePipeConfig对象。