# @financial-times/o-date 中文文档

规范地址：https://npmcn.com/package/%40financial-times/o-date/

版本：7\.0\.1
npm 元数据更新时间：2026-10-06T13:39:40.168Z
中文译文更新时间：2026-11-14T19:07:09.657Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-date
原文对照：https://npmcn.com/package/%40financial-times/o-date/?lang=original
项目主页：https://registry.origami.ft.com/components/o-date

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：30.4 kB，13 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：1 个
- 首次发布：2019-02-13T10:16:17.809Z
- 最新版本发布：2025-06-30T09:33:35.422Z
- 近 30 天下载量：2966（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：41（近 12 个月 0 个）

## 中文简介

JavaScript 工具,用于FT样式格式化和更新日期. 相对于当前时间的格式化日期也是有益的.

## 安装

```sh
npm install @financial-times/o-date
```

也可以使用：`pnpm add @financial-times/o-date`、`yarn add @financial-times/o-date`、`bun add @financial-times/o-date`

## README

# 日期

○ 日期格式 `time` fT样式中的元素,并支持相对时间格式化日期.

-   [使用量](https://npmcn.com/package/%40financial-times/o-date/#readme-usage)
-   [标记](https://npmcn.com/package/%40financial-times/o-date/#readme-markup)
-   [Java 脚本](https://npmcn.com/package/%40financial-times/o-date/#readme-javascript)
-   [服务器侧](https://npmcn.com/package/%40financial-times/o-date/#readme-server-side)
-   [移徙](https://npmcn.com/package/%40financial-times/o-date/#readme-migration)
-   [联系人](https://npmcn.com/package/%40financial-times/o-date/#readme-contact)
-   [许可证](https://npmcn.com/package/%40financial-times/o-date/#readme-licence)

## 使用量

检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-date`。 。 。 .

## 标记

以 FT 格式制作人类可读日期 [时间元素](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-time-element)添加标准 `datetime` 属性 [ISO 8601 格式](https://en.wikipedia.org/wiki/ISO_8601)。然后添加 `data-o-component="o-date"` 有类的属性 `o-date`。 。 。 .

```html
<time data-o-component="o-date" class="o-date" datetime="2000-06-14T23:00:00.000Z">
</time>
```

_根据FT日期格式公约,提供的日期将是某一特定日期的相对时间或时间戳. `10 seconds ago`, (中文(简体) ), `a minute ago`, (中文(简体) ), `3 hours ago`, (中文(简体) ), `yesterday`, (中文(简体) ), `July 18 2020`。 。 。 ._

### 核心经验

我们建议把人类可读的日期加进 `time` 用于支持 [核心经验](https://origami.ft.com/documentation/components/compatibility/#core--enhanced-experiences) 没有 Java 脚本 :

```html
<time data-o-component="o-date" class="o-date" datetime="2000-06-14T23:00:00.000Z">
    June 15 2000
</time>
```

_节点Js应用程序可使用该软件提供核心经验回落 [财务-时间/错误-日期-格式](https://github.com/Financial-Times/ft-date-format) 图书馆._

### 格式选项

设定 `data-o-date-format` 属性 `time` 要素列示:

-   `date-only`:只显示日期,没有相对或时间信息.
-   `time-ago-no-seconds`:总是显示相对时间,但如果相对时间在分钟下显示"Less than a minute ago"(例如. `Less than a minute ago`, (中文(简体) ), `10 minutes ago`, (中文(简体) ), `an hour ago`, (中文(简体) ), `4 hours ago`) (中文(简体) ).
-   `time-ago-limit-4-hours`: 总是显示相对时间但隐藏 `time` 元素如果 `datetime` 超过4小时(例如:. `4 seconds ago`, (中文(简体) ), `10 minutes ago`, (中文(简体) ), `4 hours ago`) (中文(简体) ).
-   `time-ago-limit-24-hours`: 总是显示相对时间但隐藏 `time` 元素如果 `datetime` 超过24小时(例如:. `4 seconds ago`, (中文(简体) ), `10 minutes ago`, (中文(简体) ), `10 hours ago`) (中文(简体) ).
-   `today-or-yesterday-or-nothing`: 显示 `today` 若为 `datetime` 就是今天,我们.., `yesterday` 如果这是昨天, 或隐藏 `time` 元素如果 `datetime` 已经比昨天大了.
-   [自定义格式](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html):建议使用标准的FT格式,但 [自定义格式](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) 可以使用,例如:. `h:mm a`。 。 。 .

注:过去有 `time-ago-abbreviated` 财务报告和审定财务报表 `time-ago-abbreviated-limit-4-hours` 选项,现在两者都贬值。 这些选项仍然有效,但不再显示一个缩写日期. 今后的主要版本将删除这些内容.

#### 文本大小写

格式化的日期默认为全部小写( E)[https://github.com/Financial-Times/ft-date-format/blob/master/index.js 页面存档备份,存于互联网档案馆](https://github.com/Financial-Times/ft-date-format/blob/master/index.js)),例如. `'an hour ago`。 。 。 .

设定 `data-o-date-text-case=sentence` 属性 `time` 元素来大写文本的第一个字母(例如). `'An hour ago'`) (中文(简体) ).

### 复制选项

默认 `o-date` 将替换 `time` 元素,带有格式化日期。 要在格式化日期的同时包含额外内容,请添加一个元素 `data-o-date-printer` 属性. `o-date` 将在 `data-o-date-printer` 元素,不会改变其他儿童元素.

例如,将“更新的”副本列入 `time` 元素后接相接时间:

```html
<time data-o-component="o-date" class="o-date" datetime="2020-07-18T19:01:05.033Z" data-o-date-format="time-ago-limit-4-hours">
    <!-- some arbitrary content -->
    <span>updated at</span>
    <!-- show the time ago here in the printed element -->
    <!-- fallback to the date if o-date JavaScript fails  -->
    <span data-o-date-printer>
        20 July 2020
    </span>
</time>
```

在同一地点内多次设定日期 `o-date` 包含多个 `data-o-date-printer` 要素。 每个打印机元素可能有一个独特的格式,方法是添加 `data-o-date-format` 属性。 若为 `data-o-date-format` 没有设置在打印机元素上, 父元素 `data-o-date-format` 将使用元素:

```html
<time data-o-component="o-date" class="o-date" datetime="2020-07-18T19:01:05.033Z" data-o-date-format="date-only">
    <!-- render the date in the "date-only" format here -->
    <!-- (as set on the parent "time" element) -->
    <span data-o-date-printer></span>
    <!-- render the date in the "time-ago-limit-4-hours" format here -->
    <span data-o-date-printer data-o-date-format="time-ago-limit-4-hours"></span>
    <!-- render the date in the custom format "h:mm" here -->
    <span data-o-date-printer data-o-date-format="h:mm"></span>
</time>
```

_之前是CSS级的 `o-date__printer` 改为使用 `data-o-date-printer` 属性。 班级 `o-date__printer` 现已贬值._

## Java 脚本

将 JavaScript 在 [和其他折纸一样](https://origami.ft.com/documentation/components/initialising/)。 。 。 .

比如说叫 `init` 启用全部方法 `o-date` 页面上的实例 :

```js
import ODate from '@financial-times/o-date'
ODate.init();
```

传递特定元素 :

```js
import ODate from '@financial-times/o-date'
const myDateElement = document.querySelector('#my-date');
ODate.init(myDateElement);
```

或者发送 `o.DOMContentLoaded` 自动构建页面上所有 Origami 组件的事件,包括每个 `o-date` 元素为 a `data-o-component="o-date"` 属性 :

```js
import '@financial-times/o-date';
document.addEventListener('DOMContentLoaded', function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});
```

### o- date# destroy () (中文(简体) )

要求任何实例停止处理日期更新并发布项目引用 .

## 服务器侧

见 npm 软件包 [@ 财务时间/ft-date-format](https://github.com/Financial-Times/ft-date-format) 用于服务器侧日期格式化. _注:不建议输出"时间上之前"服务器一面,因为它不会被缓存,如果用户长时间离开页面打开,也不会在浏览器中更新._

## 移徙

| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 活动 | 6个 | 不详 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-date/MIGRATION.md#migrating-from-v5-to-v6) |
| 维护 | 页:1 | 不详 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-date/MIGRATION.md#migrating-from-v4-to-v5) |
| 维护 | 页:1 | 4.2 (中文(简体) ) | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-date/MIGRATION.md#migrating-from-v3-to-v4) |
| 维护 | 3个 | 3.1 国家 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-date/MIGRATION.md#migrating-from-v2-to-v3) |
| 已贬值 | 2个 | 2.9 (中文(简体) ) | \- 说吧 |
| 已贬值 | 1个 | 1.2 国家 | \- 说吧 |

## 联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-date/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .

* * *

## 许可证

本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @financial-times/o-date 是什么？

JavaScript 工具,用于FT样式格式化和更新日期\. 相对于当前时间的格式化日期也是有益的\.

### 如何安装 @financial-times/o-date？

在项目目录运行 npm install @financial-times/o-date，或使用 pnpm add / yarn add / bun add。

### @financial-times/o-date 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-date 是否存在。

### @financial-times/o-date 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @financial-times/o-date 可以商用吗？

@financial-times/o-date 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @financial-times/o-date 的下载量有多少？

根据 npm 官方下载统计，@financial-times/o-date 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,966 次，日均约 99 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @financial-times/o-date 还在维护吗？

最新版本 7\.0\.1 发布于 2025/06/30（1\.4 年前）；至今共发布 41 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。