feat(time): add time-zone prop

CHANGELOG.en-US.md

@@ -18,6 +18,7 @@
 - `n-input-number` adds `precision` prop, closes [#2068](https://github.com/TuSimple/naive-ui/issues/2068), [#1859](https://github.com/TuSimple/naive-ui/issues/1859)
 - `n-tag` adds background color in dark theme when `:bordered="false"`, closes [#1699](https://github.com/TuSimple/naive-ui/issues/1699).
 - `n-time-picker` adds `time-zone` prop, closes [#293](https://github.com/TuSimple/naive-ui/issues/293).
+- `n-time` adds `time-zone` prop.
 
 ## 2.29.1
 

CHANGELOG.zh-CN.md

@@ -18,6 +18,7 @@
 - `n-input-number` 新增 `precision` 属性，关闭 [#2068](https://github.com/TuSimple/naive-ui/issues/2068)、[#1859](https://github.com/TuSimple/naive-ui/issues/1859)
 - `n-tag` 在暗色背景下 `:bordered="false"` 时增加背景颜色，关闭 [#1699](https://github.com/TuSimple/naive-ui/issues/1699)
 - `n-time-picker` 新增 `time-zone` 属性，关闭 [#293](https://github.com/TuSimple/naive-ui/issues/293)
+- `n-time` 新增 `time-zone` 属性
 
 ## 2.29.1
 

src/time-picker/demos/enUS/timezone.demo.vue

@@ -1,5 +1,5 @@
 <markdown>
-# time-zone
+# Time zone
 </markdown>
 
 <template>

src/time-picker/src/TimePicker.tsx

@@ -32,7 +32,7 @@ import {
   getHours,
   getSeconds
 } from 'date-fns/esm'
-import { formatInTimeZone } from 'date-fns-tz/esm'
+import formatInTimeZone from 'date-fns-tz/esm/formatInTimeZone'
 import type { Locale } from 'date-fns'
 import type { FormValidationStatus } from '../../form/src/interface'
 import { strictParse } from '../../date-picker/src/utils'

src/time/demos/enUS/index.demo-entry.md

@@ -10,16 +10,18 @@ type.vue
 format.vue
 relative.vue
 unix.vue
+timezone.vue
 ```
 
 ## API
 
 ### Time Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| format | `string` | `undefined` | Time format. For detail please see [format](https://date-fns.org/v2.23.0/docs/format). |
-| time | `number \| Date` | `Date.now()` | Time. |
-| to | `number \| Date` | `Date.now()` | Target time. |
-| type | `'relative' \| 'date' \| 'datetime'` | `'datetime'` | Time type. |
-| unix | `boolean` | `false` | `unix` timestamp. |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| format | `string` | `undefined` | Time format. For detail please see [format](https://date-fns.org/v2.23.0/docs/format). |  |
+| time | `number \| Date` | `Date.now()` | Time. |  |
+| time-zone | `string` | `undefined` | Time zone to be used to format the value. It follows [iana time zones](https://www.iana.org/time-zones). You can use `Intl.supportedValuesOf('timeZone')` to check supported values. | NEXT_VERSION |
+| to | `number \| Date` | `Date.now()` | Target time. |  |
+| type | `'relative' \| 'date' \| 'datetime'` | `'datetime'` | Time type. |  |
+| unix | `boolean` | `false` | `unix` timestamp. |  |

src/time/demos/enUS/timezone.demo.vue

@@ -0,0 +1,8 @@
+<markdown>
+# Time zone
+</markdown>
+
+<template>
+  Shanghai <n-time time-zone="Asia/Shanghai" /><br>Pittsburgh
+  <n-time time-zone="America/New_York" /><br>UTC <n-time time-zone="UTC" />
+</template>

src/time/demos/zhCN/index.demo-entry.md

@@ -10,16 +10,18 @@ type.vue
 format.vue
 relative.vue
 unix.vue
+timezone.vue
 ```
 
 ## API
 
 ### Time Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| format | `string` | `undefined` | 时间格式化字符串，详情见 [format](https://date-fns.org/v2.23.0/docs/format) |
-| time | `number \| Date` | `Date.now()` | 时间 |
-| to | `number \| Date` | `Date.now()` | 目标时间 |
-| type | `'relative' \| 'date' \| 'datetime'` | `'datetime'` | 时间类型 |
-| unix | `boolean` | `false` | `unix` 时间戳 |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| format | `string` | `undefined` | 时间格式化字符串，详情见 [format](https://date-fns.org/v2.23.0/docs/format) |  |
+| time | `number \| Date` | `Date.now()` | 时间 |  |
+| time-zone | `string` | `undefined` | 格式化值时使用的市区，遵循 [iana time zones](https://www.iana.org/time-zones) 格式。你可以使用 `Intl.supportedValuesOf('timeZone')` 来查看支持的时区 | NEXT_VERSION |
+| to | `number \| Date` | `Date.now()` | 目标时间 |  |
+| type | `'relative' \| 'date' \| 'datetime'` | `'datetime'` | 时间类型 |  |
+| unix | `boolean` | `false` | `unix` 时间戳 |  |

src/time/demos/zhCN/timezone.demo.vue

@@ -0,0 +1,8 @@
+<markdown>
+# 时区
+</markdown>
+
+<template>
+  上海 <n-time time-zone="Asia/Shanghai" /><br>匹兹堡
+  <n-time time-zone="America/New_York" /><br>UTC <n-time time-zone="UTC" />
+</template>

src/time/src/Time.ts

@@ -1,11 +1,7 @@
 import { h, createTextVNode, PropType, defineComponent, computed } from 'vue'
-import {
-  format,
-  formatDistanceStrict,
-  fromUnixTime,
-  getTime
-} from 'date-fns/esm'
-import getTimezoneOffset from 'date-fns-tz/esm/getTimezoneOffset'
+import { format, formatDistanceStrict, fromUnixTime } from 'date-fns/esm'
+import type { Locale } from 'date-fns'
+import formatInTimeZone from 'date-fns-tz/esm/formatInTimeZone'
 import { useLocale } from '../../_mixins'
 import { ExtractPublicPropTypes } from '../../_utils'
 
@@ -25,7 +21,7 @@ const timeProps = {
   unix: Boolean,
   format: String,
   text: Boolean,
-  timezone: String
+  timeZone: String
 } as const
 
 export type TimeProps = ExtractPublicPropTypes<typeof timeProps>
@@ -37,18 +33,14 @@ export default defineComponent({
     const now = Date.now()
     const { localeRef, dateLocaleRef } = useLocale('Time')
     const mergedFormatRef = computed(() => {
-      const { timezone } = props
-      if (timezone) {
-        return (time: number | Date, _format: string) => {
-          return format(
-            getTime(time) +
-              -getTimezoneOffset(
-                Intl.DateTimeFormat().resolvedOptions().timeZone,
-                time
-              ) +
-              getTimezoneOffset(timezone, time),
-            _format
-          )
+      const { timeZone } = props
+      if (timeZone) {
+        return (
+          time: number | Date,
+          _format: string,
+          options: { locale: Locale }
+        ) => {
+          return formatInTimeZone(time, timeZone, _format, options)
         }
       }
       return format