time-elements, 标准 <time> 元素的Web组件扩展

分享于 

7分钟阅读

GitHub

  繁體 雙語
Web component extensions to the standard
  • 源代码名称:time-elements
  • 源代码网址:http://www.github.com/github/time-elements
  • time-elements源代码文档
  • time-elements源代码下载
  • Git URL:
    git://www.github.com/github/time-elements.git
    Git Clone代码到本地:
    git clone http://www.github.com/github/time-elements
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/github/time-elements
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    <时间> 元素扩展

    以本地化字符串或者在用户浏览器浏览器中自动更新的relative 文本格式设置时间戳。

    这允许服务器缓存包含日期的HTML Fragments,并允许浏览器根据用户的首选项选择如何本地化显示的时间。 例如服务器可能缓存了以下生成的标记:

    <local-timedatetime="2014-04-01T16:30:00-08:00">
     April 1, 2014 4:30pm
    </local-time>

    每个访问者都从服务器缓存中提供相同的标记。 当它到达浏览器时,定制 local-time JavaScript将元素的文本本地化为本地时区和格式。

    <local-timedatetime="2014-04-01T16:30:00-08:00">
     1 Apr 2014 21:30
    </local-time>

    显示日期之前,并根据用户设置的浏览器使用 24-hour 时钟。

    禁用浏览器的JavaScript后,缓存标记中提供的默认文本仍将显示。

    安装

    可以在 npm上使用,如时间元素

    
    $ npm install time-elements
    
    
    
    

    这个组件构建在即将到来的Web组件栈上。 具体地说,它需要一个特性调用自定义元素。

    你将需要使用polyfill来获得这里特性。 或者,Polymer 或者 x 标记框架提供了一个 polyfill,或者你可以安装独立的CustomElements polyfill。

    旧版浏览器需要其他通用 polyfills。 有关详细信息,请参阅 examples/polymer.html

    <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-hi-ce.js"></script>

    用法

    这里组件提供标准 HTML <time> 元素的三个自定义子类型。 所有自定义时间元素必须具有设置为 ISO 8601格式的时间戳的datetime 属性。

    相对时间

    可以使用 relative-time 元素扩展生成 relative time-ago-in-words描述。

    <relative-time> 元素添加到标记中。 提供默认格式的日期作为元素内容的文本( 比如。 ) 1,2014.

    <relative-timedatetime="2014-04-01T16:30:00-08:00">
     April 1, 2014
    </relative-time>

    根据将来查看的内容,元素的文本将被以下格式之一替换:

    • 从现在开始6 年
    • 20天之后
    • 从现在开始4 小时
    • 从现在开始7 分钟
    • 刚刚
    • 30 秒钟前
    • 一分钟前
    • 30分钟前
    • 一小时前
    • 20小时前
    • 一天前
    • 20天前
    • ,1,2014

    因此,relative 日期短语最多使用一个月,然后显示实际日期。

    时间直到

    你可以使用 time-until 来始终显示将来的relative 日期。 <relative-time> 相反,它运行的非常像,以前显示的事件以 just now 和未来事件显示为相对:

    • 从现在开始10年
    • 20天之后
    • 从现在开始6 小时
    • 从现在开始20分钟
    • 30秒后
    • 刚刚

    <time-until> 元素添加到标记中。 提供默认格式的日期作为元素内容的文本( 比如。 ) 1,2024.

    <time-untildatetime="2024-04-01T16:30:00-08:00">
     April 1, 2024
    </time-until>

    时间以前

    可以使用 time-ago 元素扩展generated生成一个的relative。 这与 relative-time 扩展类似。 但是,这将永远不会显示日期。 它严格显示了 relative 日期短语,即使在一个月之后。

    <time-agodatetime="2012-04-01T16:30:00-08:00">
     April 1, 2014
    </time-ago>

    例如如果在未来两年查看这里标记,则元素的文本将读取 2 years ago

    微型格式

    可选的format="micro" 属性缩短了对 1,1,1,的描述。

    <time-agodatetime="2012-04-01T16:30:00-08:00"format="micro">
     April 1, 2014
    </time-ago>

    本地时间

    这个自定义时间扩展对于格式化用户区域设置格式的日期和时间非常有用。

    <local-timedatetime="2014-04-01T16:30:00-08:00"month="short"day="numeric"year="numeric"hour="numeric"minute="numeric">
     April 1, 2014 4:30PM PDT
    </local-time>

    当在CDT时区中查看这里标记时,它将显示 Apr 1, 2014 6:30PM 如果在带有欧洲日期首选项的浏览器中查看,则将读取 1 Apr 2014 18:30

    命令行选项

    属性选项说明
    datetimeISO 8601日期元素 2014-06-01T13:05:07Z 所需的日期
    year2-digit,数字将年份设置为 14 或者 2014 格式
    month短,长将月份设置为 Jun 或者 June 格式
    day2-digit,数字将日期格式设置为 01 或者 1
    weekday短,长将工作日设置为 Sun 或者 Sunday
    hour2-digit,数字格式化小时为 01 或者 1
    minute2-digit,数字将分钟设置为 05 或者 5
    second2-digit,数字将第二个格式设置为 07 或者 7
    time-zone-name短,长将时区显示为 GMT+1,或者按它的全名显示

    浏览器支持

    • Chrome
    • Firefox
    • Safari 9.1 +
    • IE 11 +
    • 微软边缘

    请参见

    大多数实现都是基于 basecamp local_time的component组件。 感谢 @javan 开放采购的工作,并允许它的他人建立在它的上面。

    @rmm5t's jquery timeago插件是一个老的JS插件。


    COM  WEB  STA  ext  时间  component  
    相关文章