@servicetitan/docs-anvil-uikit-contrib 40.1.0 → 40.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/intl/date-time-range.mdx +120 -0
- package/docs/intl/utilities.mdx +116 -0
- package/package.json +2 -2
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Date and Time Range
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { FormattedDateTimeRangeMiniDemo } from '@servicetitan/intl/demo';
|
|
6
|
+
import { DemoExample } from '@site/src/components/code-demo';
|
|
7
|
+
import Tabs from '@theme/Tabs';
|
|
8
|
+
import TabItem from '@theme/TabItem';
|
|
9
|
+
|
|
10
|
+
Use `FormattedDateTimeRange` and `formatDateTimeRange` to format a date range as combined date and time. The browser's `Intl.DateTimeFormat.formatRange()` API intelligently collapses shared parts of the range (e.g., same-day ranges omit the repeated date).
|
|
11
|
+
|
|
12
|
+
## Available Formats
|
|
13
|
+
|
|
14
|
+
The following standard ServiceTitan formats are available (examples are in `en-US` locale).
|
|
15
|
+
|
|
16
|
+
| Format | Description | Example (multi-day) |
|
|
17
|
+
| :------------------ | :-------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |
|
|
18
|
+
| `short` | Short date and short time. This is the default when no format is specified. | `01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM` |
|
|
19
|
+
| `shortWithTimeZone` | Short date and short time, with timezone | `01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM EST` |
|
|
20
|
+
| `long` | Long date and short time | `January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM` |
|
|
21
|
+
| `longWithTimeZone` | Long date and short time, with timezone | `January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM EST` |
|
|
22
|
+
|
|
23
|
+
Any options passed to `FormattedDateTimeRange` or `formatDateTimeRange` will be merged on top of `{ format: 'short' }` (which expands to `{ day: '2-digit', month: '2-digit', year: 'numeric', hour: 'numeric', minute: 'numeric' }` [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)). If you want to use your custom options only, you can pass `format: undefined` to disable the default.
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
### FormattedDateTimeRange
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { FormattedDateTimeRange } from '@servicetitan/intl';
|
|
31
|
+
|
|
32
|
+
function DateTimeRangeExample() {
|
|
33
|
+
const startDate = new Date('2025-01-09T16:00:00-05:00');
|
|
34
|
+
const endDate = new Date('2025-01-10T17:00:00-05:00');
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<>
|
|
38
|
+
<FormattedDateTimeRange from={startDate} to={endDate} /> {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM */}
|
|
39
|
+
<FormattedDateTimeRange from={startDate} to={endDate} format="short" /> {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM */}
|
|
40
|
+
<FormattedDateTimeRange from={startDate} to={endDate} format="shortWithTimeZone" /> {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM EST */}
|
|
41
|
+
<FormattedDateTimeRange from={startDate} to={endDate} format="long" /> {/* January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM */}
|
|
42
|
+
<FormattedDateTimeRange from={startDate} to={endDate} format="longWithTimeZone" /> {/* January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM EST */}
|
|
43
|
+
</>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### formatDateTimeRange
|
|
49
|
+
|
|
50
|
+
<Tabs
|
|
51
|
+
defaultValue="hook"
|
|
52
|
+
values={[
|
|
53
|
+
{ label: 'React Hook', value: 'hook' },
|
|
54
|
+
{ label: 'MobX Store', value: 'store'}
|
|
55
|
+
]}
|
|
56
|
+
>
|
|
57
|
+
<TabItem value="hook">
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { useIntl } from '@servicetitan/intl';
|
|
61
|
+
|
|
62
|
+
function DateTimeRangeExample() {
|
|
63
|
+
const { formatDateTimeRange } = useIntl();
|
|
64
|
+
const startDate = new Date('2025-01-09T16:00:00-05:00');
|
|
65
|
+
const endDate = new Date('2025-01-10T17:00:00-05:00');
|
|
66
|
+
|
|
67
|
+
return (
|
|
68
|
+
<>
|
|
69
|
+
{formatDateTimeRange(startDate, endDate)} {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM */}
|
|
70
|
+
{formatDateTimeRange(startDate, endDate, { format: 'short' })} {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM */}
|
|
71
|
+
{formatDateTimeRange(startDate, endDate, { format: 'shortWithTimeZone' })} {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM EST */}
|
|
72
|
+
{formatDateTimeRange(startDate, endDate, { format: 'long' })} {/* January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM */}
|
|
73
|
+
{formatDateTimeRange(startDate, endDate, { format: 'longWithTimeZone' })} {/* January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM EST */}
|
|
74
|
+
</>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
</TabItem>
|
|
80
|
+
<TabItem value="store">
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { inject, injectable } from '@servicetitan/react-ioc';
|
|
84
|
+
import { IntlStore } from '@servicetitan/intl/mobx';
|
|
85
|
+
|
|
86
|
+
@injectable()
|
|
87
|
+
class MyStore {
|
|
88
|
+
constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
|
|
89
|
+
|
|
90
|
+
formatDateTimeRange() {
|
|
91
|
+
const startDate = new Date('2025-01-09T16:00:00-05:00');
|
|
92
|
+
const endDate = new Date('2025-01-10T17:00:00-05:00');
|
|
93
|
+
const { formatDateTimeRange } = this.intlStore.intl;
|
|
94
|
+
return [
|
|
95
|
+
formatDateTimeRange(startDate, endDate), // 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM
|
|
96
|
+
formatDateTimeRange(startDate, endDate, { format: 'short' }), // 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM
|
|
97
|
+
formatDateTimeRange(startDate, endDate, { format: 'shortWithTimeZone' }), // 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM EST
|
|
98
|
+
formatDateTimeRange(startDate, endDate, { format: 'long' }), // January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM
|
|
99
|
+
formatDateTimeRange(startDate, endDate, { format: 'longWithTimeZone' }), // January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM EST
|
|
100
|
+
];
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
</TabItem>
|
|
106
|
+
</Tabs>
|
|
107
|
+
|
|
108
|
+
### Further customization
|
|
109
|
+
|
|
110
|
+
To customize the formatting, pass `FormattedDateTimeRange` and `formatDateTimeRange` the same [options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options) as the native `Intl.DateTimeFormat` API. For example,
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
const startDate = new Date('2025-01-09T16:00:00-05:00');
|
|
114
|
+
const endDate = new Date('2025-01-10T17:00:00-05:00');
|
|
115
|
+
formatDateTimeRange(startDate, endDate, { format: 'long', weekday: 'short' }); // Thu, January 9, 2025 at 4:00 PM – Fri, January 10, 2025 at 5:00 PM
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Demo
|
|
119
|
+
|
|
120
|
+
<DemoExample example={FormattedDateTimeRangeMiniDemo} />
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Utilities
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { IntlUtilsMiniDemo } from '@servicetitan/intl/demo';
|
|
6
|
+
import { DemoExample } from '@site/src/components/code-demo';
|
|
7
|
+
import Tabs from '@theme/Tabs';
|
|
8
|
+
import TabItem from '@theme/TabItem';
|
|
9
|
+
|
|
10
|
+
Timezone utility functions are available on the `intl` object. They use the configured locale and timezone automatically.
|
|
11
|
+
|
|
12
|
+
## getTzAbbreviation
|
|
13
|
+
|
|
14
|
+
Returns the timezone abbreviation (e.g., "EST", "PDT"). The result is DST-aware — passing a summer date returns the daylight saving abbreviation (e.g., "EDT" instead of "EST"). Defaults to `'short'` format. Pass any [`Intl.DateTimeFormatOptions['timeZoneName']`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timezonename) value to customize.
|
|
15
|
+
|
|
16
|
+
### Usage
|
|
17
|
+
|
|
18
|
+
<Tabs
|
|
19
|
+
defaultValue="hook"
|
|
20
|
+
values={[
|
|
21
|
+
{ label: 'React Hook', value: 'hook' },
|
|
22
|
+
{ label: 'MobX Store', value: 'store'}
|
|
23
|
+
]}
|
|
24
|
+
>
|
|
25
|
+
<TabItem value="hook">
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { useIntl } from '@servicetitan/intl';
|
|
29
|
+
|
|
30
|
+
function TimezoneExample() {
|
|
31
|
+
const intl = useIntl();
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<>
|
|
35
|
+
{intl.getTzAbbreviation()} {/* "EST" (or "EDT" in summer) */}
|
|
36
|
+
{intl.getTzAbbreviation(new Date(), 'shortOffset')} {/* "GMT-5" */}
|
|
37
|
+
</>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
</TabItem>
|
|
43
|
+
<TabItem value="store">
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import { inject, injectable } from '@servicetitan/react-ioc';
|
|
47
|
+
import { IntlStore } from '@servicetitan/intl/mobx';
|
|
48
|
+
|
|
49
|
+
@injectable()
|
|
50
|
+
class MyStore {
|
|
51
|
+
constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
|
|
52
|
+
|
|
53
|
+
getTimezoneLabel() {
|
|
54
|
+
const { getTzAbbreviation } = this.intlStore.intl;
|
|
55
|
+
return getTzAbbreviation(); // "EST"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
</TabItem>
|
|
61
|
+
</Tabs>
|
|
62
|
+
|
|
63
|
+
## getTzName
|
|
64
|
+
|
|
65
|
+
Returns the full timezone name (e.g., "Eastern Time", "Eastern Standard Time"). Like `getTzAbbreviation`, the result is DST-aware. Defaults to `'longGeneric'` format. Pass any [`Intl.DateTimeFormatOptions['timeZoneName']`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timezonename) value to customize.
|
|
66
|
+
|
|
67
|
+
### Usage
|
|
68
|
+
|
|
69
|
+
<Tabs
|
|
70
|
+
defaultValue="hook"
|
|
71
|
+
values={[
|
|
72
|
+
{ label: 'React Hook', value: 'hook' },
|
|
73
|
+
{ label: 'MobX Store', value: 'store'}
|
|
74
|
+
]}
|
|
75
|
+
>
|
|
76
|
+
<TabItem value="hook">
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { useIntl } from '@servicetitan/intl';
|
|
80
|
+
|
|
81
|
+
function TimezoneExample() {
|
|
82
|
+
const intl = useIntl();
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<>
|
|
86
|
+
{intl.getTzName()} {/* "Eastern Time" */}
|
|
87
|
+
{intl.getTzName(new Date(), 'long')} {/* "Eastern Standard Time" */}
|
|
88
|
+
</>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
</TabItem>
|
|
94
|
+
<TabItem value="store">
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import { inject, injectable } from '@servicetitan/react-ioc';
|
|
98
|
+
import { IntlStore } from '@servicetitan/intl/mobx';
|
|
99
|
+
|
|
100
|
+
@injectable()
|
|
101
|
+
class MyStore {
|
|
102
|
+
constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
|
|
103
|
+
|
|
104
|
+
getTimezoneName() {
|
|
105
|
+
const { getTzName } = this.intlStore.intl;
|
|
106
|
+
return getTzName(); // "Eastern Time"
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
</TabItem>
|
|
112
|
+
</Tabs>
|
|
113
|
+
|
|
114
|
+
## Demo
|
|
115
|
+
|
|
116
|
+
<DemoExample example={IntlUtilsMiniDemo} />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/docs-anvil-uikit-contrib",
|
|
3
|
-
"version": "40.
|
|
3
|
+
"version": "40.2.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,5 +17,5 @@
|
|
|
17
17
|
"cli": {
|
|
18
18
|
"webpack": false
|
|
19
19
|
},
|
|
20
|
-
"gitHead": "
|
|
20
|
+
"gitHead": "5e79faf08de0180d848e31be8f0cbecc936a1352"
|
|
21
21
|
}
|