Skip to content

Commit

Permalink
chore: adjusts time format < full to be ZZ
Browse files Browse the repository at this point in the history
  • Loading branch information
@justin-schroeder
justin-schroeder committed Apr 17, 2024
1 parent d42a114 commit d38b8c1
Show file tree
Hide file tree
Showing 8 changed files with 189 additions and 108 deletions.
208 changes: 124 additions & 84 deletions docs/components/content/Format.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,25 @@ import sizes from "../../assets/func-sizes.json"
/>
</div>

<FunctionReference function="format" :arguments="[
{
name: 'date',
type: 'Date | string',
comment: 'strings must be ISO 8601',
},
{ name: 'format', type: 'string | object' },
{ name: 'locale?', type: 'string' },
]" :overload="[
{
name: 'options',
type: 'FormatOptions',
},
]" return="string" />
<FunctionReference
function="format"
:arguments="[
{
name: 'date',
type: 'Date | string',
comment: 'strings must be ISO 8601',
},
{ name: 'format', type: 'string | object' },
{ name: 'locale?', type: 'string' },
]"
:overload="[
{
name: 'options',
type: 'FormatOptions',
},
]"
return="string"
/>
<p>Tempo’s <code>format()</code> function outputs dates in two ways:</p>
<ul class="jump-list">
<li>
Expand Down Expand Up @@ -83,11 +88,14 @@ import sizes from "../../assets/func-sizes.json"
</td>
<td>
<code>en</code>
<ClientOnly>{{ format(new Date(), "full", "en") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "full", "en") }}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{ format(new Date(), "full", "de") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "full", "de") }}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{ format(new Date(), "full", "zh") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "full", "zh") }}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -96,11 +104,14 @@ import sizes from "../../assets/func-sizes.json"
</td>
<td>
<code>en</code>
<ClientOnly>{{ format(new Date(), "long", "en") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "long", "en") }}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{ format(new Date(), "long", "de") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "long", "de") }}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{ format(new Date(), "long", "zh") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "long", "zh") }}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -109,11 +120,14 @@ import sizes from "../../assets/func-sizes.json"
</td>
<td>
<code>en</code>
<ClientOnly>{{ format(new Date(), "medium", "en") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "medium", "en") }}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{ format(new Date(), "medium", "de") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "medium", "de") }}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{ format(new Date(), "medium", "zh") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "medium", "zh") }}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -122,11 +136,14 @@ import sizes from "../../assets/func-sizes.json"
</td>
<td>
<code>en</code>
<ClientOnly>{{ format(new Date(), "short", "en") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "short", "en") }}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{ format(new Date(), "short", "de") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "short", "de") }}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{ format(new Date(), "short", "zh") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "short", "zh") }}</ClientOnly
><br />
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -155,15 +172,18 @@ import sizes from "../../assets/func-sizes.json"
<code>en</code>
<ClientOnly>{{
format(new Date(), { time: "full" }, "en")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{
format(new Date(), { time: "full" }, "de")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{
format(new Date(), { time: "full" }, "zh")
}}</ClientOnly><br />
}}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -174,15 +194,18 @@ import sizes from "../../assets/func-sizes.json"
<code>en</code>
<ClientOnly>{{
format(new Date(), { time: "long" }, "en")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{
format(new Date(), { time: "long" }, "de")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{
format(new Date(), { time: "long" }, "zh")
}}</ClientOnly><br />
}}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -193,15 +216,18 @@ import sizes from "../../assets/func-sizes.json"
<code>en</code>
<ClientOnly>{{
format(new Date(), { time: "medium" }, "en")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{
format(new Date(), { time: "medium" }, "de")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{
format(new Date(), { time: "medium" }, "zh")
}}</ClientOnly><br />
}}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -212,15 +238,18 @@ import sizes from "../../assets/func-sizes.json"
<code>en</code>
<ClientOnly>{{
format(new Date(), { time: "short" }, "en")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{
format(new Date(), { time: "short" }, "de")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{
format(new Date(), { time: "short" }, "zh")
}}</ClientOnly><br />
}}</ClientOnly
><br />
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -351,8 +380,13 @@ import sizes from "../../assets/func-sizes.json"
</tr>
<tr>
<td><code>Z</code></td>
<td>+08:00, +05:30, -13:45</td>
<td>The timezone offset from GMT (<code>[+-]HH:mm</code>)</td>
</tr>
<tr>
<td><code>ZZ</code></td>
<td>+0800, +0530, -1345</td>
<td>The timezone offset from GMT</td>
<td>The timezone offset from GMT (<code>[+-]HHmm</code>)</td>
</tr>
</tbody>
</table>
Expand All @@ -362,50 +396,53 @@ import sizes from "../../assets/func-sizes.json"
The <code>format()</code> function can accept an object of options as its
argument to provide more control over the output.
</p>
<ObjectReference type="FormatOptions" :properties="[
{
name: 'date',
type: 'string | Date',
jsdoc: ['An ISO 8601 date string or a Date object.'],
},
{
name: 'format',
type: 'string | { date?: string, time?: string }',
jsdoc: ['The format can be either format styles or format tokens.'],
},
{
name: 'locale?',
type: 'string',
jsdoc: ['The locale to use when formatting.'],
},
{
name: 'tz?',
type: 'string',
jsdoc: [
'Converts the given date option to the timezone provided.',
'For example, if the provided date option is 2021-01-01T00:00:00Z',
'and the tz option is America/New_York and the format option is',
'YYYY-MM-DD HH:mm:ss, the output will be 2020-12-31 19:00:00',
],
},
{
name: 'genitive?',
type: 'boolean',
jsdoc: [
'When true, the month and weekday names will be in the',
'genitive case for locales where it is applicable.',
],
},
{
name: 'partFilter?',
type: '(part: Part) => boolean',
jsdoc: [
'A function that filters the parts of the formatted date.',
'The function is called with each part of the formatted date',
'and should return true to include the part in the output.',
],
},
]" />
<ObjectReference
type="FormatOptions"
:properties="[
{
name: 'date',
type: 'string | Date',
jsdoc: ['An ISO 8601 date string or a Date object.'],
},
{
name: 'format',
type: 'string | { date?: string, time?: string }',
jsdoc: ['The format can be either format styles or format tokens.'],
},
{
name: 'locale?',
type: 'string',
jsdoc: ['The locale to use when formatting.'],
},
{
name: 'tz?',
type: 'string',
jsdoc: [
'Converts the given date option to the timezone provided.',
'For example, if the provided date option is 2021-01-01T00:00:00Z',
'and the tz option is America/New_York and the format option is',
'YYYY-MM-DD HH:mm:ss, the output will be 2020-12-31 19:00:00',
],
},
{
name: 'genitive?',
type: 'boolean',
jsdoc: [
'When true, the month and weekday names will be in the',
'genitive case for locales where it is applicable.',
],
},
{
name: 'partFilter?',
type: '(part: Part) => boolean',
jsdoc: [
'A function that filters the parts of the formatted date.',
'The function is called with each part of the formatted date',
'and should return true to include the part in the output.',
],
},
]"
/>
<h3 id="format-timezone">Timezone</h3>
<p>
The <code>tz</code> option allows you to format the provided date from the
Expand All @@ -415,7 +452,10 @@ import sizes from "../../assets/func-sizes.json"
<h3 id="format-part-filter">Part filter</h3>
<p>
The <code>partFilter</code> option allows you to filter out
<a href="https://tc39.es/ecma402/#table-datetimeformat-resolvedoptions-properties">parts</a>
<a
href="https://tc39.es/ecma402/#table-datetimeformat-resolvedoptions-properties"
>parts</a
>
of the formatted date. The function is called with each "part" of the
formatted date and should return a boolean indicating whether or not to
include that part in final formatted string.
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/common.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ describe("getOffsetFormat", () => {
expect(getOffsetFormat("short")).toBe("Z")
})

it("should return 'Z' for formats { date: 'full', time: 'full' }, { date: 'full' }, and { time: 'full' }", () => {
it("should return 'Z' for formats { date: 'full', time: 'full' }, and { time: 'full' }", () => {
expect(getOffsetFormat({ date: "full", time: "full" })).toBe("Z")
expect(getOffsetFormat({ date: "full" })).toBe("Z")
expect(getOffsetFormat({ date: "full" })).toBe("ZZ")
expect(getOffsetFormat({ time: "full" })).toBe("Z")
})
})
16 changes: 13 additions & 3 deletions src/__tests__/format.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,9 @@ describe("format", () => {
).toBe("2100年5月3日月曜日 4:04")
})
it("can render a long time in Japanese", () => {
expect(
format("2010-06-09T04:32:00Z", { time: "full" }, "ja")
).toBe("0時32分00秒 -04:00")
expect(format("2010-06-09T04:32:00Z", { time: "full" }, "ja")).toBe(
"0時32分00秒 -04:00"
)
})
it("can format the russian month of february", () => {
expect(format("2023-03-14", { date: "medium" }, "ru")).toBe(
Expand Down Expand Up @@ -261,4 +261,14 @@ describe("format with a timezone", () => {
it("can render a double character zero with leading zeros in zh (#41)", () => {
expect(format("2022-04-10", "YYYY-MM", "zh")).toBe("2022-04")
})
it('can render "long" time format as the ZZ token', () => {
expect(
format({
date: "1989-12-19T07:30:10.000Z",
format: { date: "short", time: "long" },
locale: "en",
tz: "America/Chicago",
})
).toBe("12/19/89, 1:30:10 AM -0600")
})
})
8 changes: 7 additions & 1 deletion src/__tests__/formatStr.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe("formatStr", () => {
})

it("can parse en locale with long time in object format", () => {
expect(formatStr({ time: "long" }, "en")).toEqual("h:mm:ss A Z")
expect(formatStr({ time: "long" }, "en")).toEqual("h:mm:ss A ZZ")
})

it("can parse en locale with medium time in object format", () => {
Expand All @@ -57,4 +57,10 @@ describe("formatStr", () => {
"Jan 1 at 08:14 AM"
)
})
it("uses the ZZ token for long time", () => {
expect(formatStr({ time: "long" }, "en")).toBe("h:mm:ss A ZZ")
})
it("uses the Z token for full time", () => {
expect(formatStr({ time: "full" }, "en")).toBe("h:mm:ss A Z")
})
})
Loading

0 comments on commit d38b8c1

Please sign in to comment.