日期

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

• 使用量
• 标记
• Java 脚本
• 服务器侧
• 移徙
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-date。 。 。 .

标记

以 FT 格式制作人类可读日期 时间元素添加标准 datetime 属性 ISO 8601 格式。然后添加 data-o-component="o-date" 有类的属性 o-date。 。 。 .

<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 用于支持 核心经验 没有 Java 脚本 :

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

节点Js应用程序可使用该软件提供核心经验回落 财务-时间/错误-日期-格式 图书馆.

格式选项

设定 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 已经比昨天大了.
• 自定义格式:建议使用标准的FT格式,但 自定义格式 可以使用,例如:. 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 页面存档备份,存于互联网档案馆),例如. '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 元素后接相接时间:

<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 将使用元素:

<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 在 和其他折纸一样。 。 。 .

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

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

传递特定元素 :

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" 属性 :

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

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

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

服务器侧

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

移徙

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .