@aurodesignsystem-dev/auro-datetime 0.0.0-pr100.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/CHANGELOG.md +269 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +128 -0
- package/demo/api.html +57 -0
- package/demo/api.js +1 -0
- package/demo/api.md +375 -0
- package/demo/api.min.js +3 -0
- package/demo/auro-datetime.min.js +608 -0
- package/demo/index.html +56 -0
- package/demo/index.js +5 -0
- package/demo/index.md +60 -0
- package/demo/index.min.js +6 -0
- package/dist/auro-datetime-39FU0ZIU.js +6 -0
- package/dist/index.d.ts +273 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +86 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,375 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-datetime
|
|
5
|
+
|
|
6
|
+
The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
|
|
7
|
+
|
|
8
|
+
### Properties & Attributes
|
|
9
|
+
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| ---------- | ---------- | --------- | ------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
12
|
+
| locale | locale | | string | `en-US` | BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). |
|
|
13
|
+
| month | month | | `short` \| `long` | `short` | Defines format of month |
|
|
14
|
+
| timezone | timezone | | string | | Pass in string to define [timezone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).<br>When set, the moment described by `value` is converted into this IANA zone for display.<br>When unset, the wall-clock time from the input string is rendered as-is. |
|
|
15
|
+
| type | type | | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` | | Defines type of data to render |
|
|
16
|
+
| value | value | | string | | ISO 8601 date or date-time string. Examples:<br>- `2022-07-14T08:00:00-07:00` (with offset)<br>- `2022-07-14T08:00:00Z` (UTC)<br>- `2022-07-14T08:00:00` (no offset)<br>- `2022-07-14` (date only)<br><br>When omitted, the component renders today's date.<br>Invalid input is logged as a warning and renders nothing. |
|
|
17
|
+
| weekday | weekday | | `short` \| `long` | `short` | Defines format of weekday |
|
|
18
|
+
|
|
19
|
+
### Methods
|
|
20
|
+
|
|
21
|
+
| Name | Parameters | Return | Description |
|
|
22
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
23
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
24
|
+
|
|
25
|
+
### Slots
|
|
26
|
+
|
|
27
|
+
| Name | Description |
|
|
28
|
+
| ---- | -------------------------------------------- |
|
|
29
|
+
| post | Content that comes after the `pre` content |
|
|
30
|
+
| pre | Content that comes before the `post` content |
|
|
31
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
32
|
+
|
|
33
|
+
## Basic Date
|
|
34
|
+
|
|
35
|
+
<div class="exampleWrapper">
|
|
36
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
37
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
38
|
+
<auro-datetime type="date"></auro-datetime>
|
|
39
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
40
|
+
</div>
|
|
41
|
+
<auro-accordion alignRight>
|
|
42
|
+
<span slot="trigger">See code</span>
|
|
43
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
44
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<auro-datetime type="date"></auro-datetime>
|
|
48
|
+
```
|
|
49
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
50
|
+
</auro-accordion>
|
|
51
|
+
|
|
52
|
+
## Basic Time
|
|
53
|
+
|
|
54
|
+
<div class="exampleWrapper">
|
|
55
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
|
|
56
|
+
<!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
|
|
57
|
+
<auro-datetime type="time"></auro-datetime>
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
|
+
</div>
|
|
60
|
+
<auro-accordion alignRight>
|
|
61
|
+
<span slot="trigger">See code</span>
|
|
62
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-time.html) -->
|
|
63
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic-time.html -->
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<auro-datetime type="time"></auro-datetime>
|
|
67
|
+
```
|
|
68
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
69
|
+
</auro-accordion>
|
|
70
|
+
|
|
71
|
+
## Property & Attribute Examples
|
|
72
|
+
|
|
73
|
+
### International Date Formatting
|
|
74
|
+
|
|
75
|
+
Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) to render dates and times in a specific locale (e.g. `en-GB`, `de-DE`, `ja-JP`). When omitted, the component defaults to `en-US` formatting. The `locale` attribute controls **output formatting only** (month names, separators, 12/24-hour clock); it does not perform timezone conversion. Invalid tags are logged as a warning and fall back to `en-US`.
|
|
76
|
+
|
|
77
|
+
#### Locale with type="date"
|
|
78
|
+
|
|
79
|
+
<div class="exampleWrapper">
|
|
80
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-date.html) -->
|
|
81
|
+
<!-- The below content is automatically added from ../apiExamples/locale-date.html -->
|
|
82
|
+
<auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
83
|
+
<auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
84
|
+
<auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
85
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
86
|
+
</div>
|
|
87
|
+
<auro-accordion alignRight>
|
|
88
|
+
<span slot="trigger">See code</span>
|
|
89
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-date.html) -->
|
|
90
|
+
<!-- The below code snippet is automatically added from ../apiExamples/locale-date.html -->
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
94
|
+
<auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
95
|
+
<auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
96
|
+
```
|
|
97
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
98
|
+
</auro-accordion>
|
|
99
|
+
|
|
100
|
+
#### Locale with type="numeric"
|
|
101
|
+
|
|
102
|
+
<div class="exampleWrapper">
|
|
103
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-numeric.html) -->
|
|
104
|
+
<!-- The below content is automatically added from ../apiExamples/locale-numeric.html -->
|
|
105
|
+
<auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
106
|
+
<auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
107
|
+
<auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
108
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
109
|
+
</div>
|
|
110
|
+
<auro-accordion alignRight>
|
|
111
|
+
<span slot="trigger">See code</span>
|
|
112
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-numeric.html) -->
|
|
113
|
+
<!-- The below code snippet is automatically added from ../apiExamples/locale-numeric.html -->
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
117
|
+
<auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
118
|
+
<auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
119
|
+
```
|
|
120
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
121
|
+
</auro-accordion>
|
|
122
|
+
|
|
123
|
+
#### Locale with type="time"
|
|
124
|
+
|
|
125
|
+
Time is the most format-divergent type across locales. The examples below highlight four distinct patterns: 12-hour with a Latin am/pm suffix (`en-US`), 24-hour with no marker (`de-DE`), 12-hour with a Korean period prefix (`ko-KR` → `오후`), and 12-hour with Arabic-Indic digits and an Arabic period marker (`ar-EG` → `م`).
|
|
126
|
+
|
|
127
|
+
Note: the choice of 12-hour vs 24-hour is decided by the runtime's `Intl.DateTimeFormat` per locale, not by this component. Several locales (`zh-CN`, `ja-JP`, `de-DE`, `fr-FR`, `en-GB`) default to a 24-hour clock for the short-time skeleton even though the language has 12-hour period words available — the component honors whatever the platform produces.
|
|
128
|
+
|
|
129
|
+
<div class="exampleWrapper">
|
|
130
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-time.html) -->
|
|
131
|
+
<!-- The below content is automatically added from ../apiExamples/locale-time.html -->
|
|
132
|
+
<auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
133
|
+
<auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
134
|
+
<auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
135
|
+
<auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
|
|
136
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
137
|
+
</div>
|
|
138
|
+
<auro-accordion alignRight>
|
|
139
|
+
<span slot="trigger">See code</span>
|
|
140
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-time.html) -->
|
|
141
|
+
<!-- The below code snippet is automatically added from ../apiExamples/locale-time.html -->
|
|
142
|
+
|
|
143
|
+
```html
|
|
144
|
+
<auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
145
|
+
<auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
146
|
+
<auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
147
|
+
<auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
|
|
148
|
+
```
|
|
149
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
150
|
+
</auro-accordion>
|
|
151
|
+
|
|
152
|
+
### Long Month and Weekday
|
|
153
|
+
|
|
154
|
+
Use the `month="long"` attribute to display the full month name, and `weekday="long"` to display the full weekday name.
|
|
155
|
+
|
|
156
|
+
<div class="exampleWrapper">
|
|
157
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/long.html) -->
|
|
158
|
+
<!-- The below content is automatically added from ../apiExamples/long.html -->
|
|
159
|
+
<auro-datetime type="date" month="long" weekday="long"></auro-datetime>
|
|
160
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
161
|
+
</div>
|
|
162
|
+
<auro-accordion alignRight>
|
|
163
|
+
<span slot="trigger">See code</span>
|
|
164
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/long.html) -->
|
|
165
|
+
<!-- The below code snippet is automatically added from ../apiExamples/long.html -->
|
|
166
|
+
|
|
167
|
+
```html
|
|
168
|
+
<auro-datetime type="date" month="long" weekday="long"></auro-datetime>
|
|
169
|
+
```
|
|
170
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
171
|
+
</auro-accordion>
|
|
172
|
+
|
|
173
|
+
### Set date/time with `value`
|
|
174
|
+
|
|
175
|
+
Use the `value` attribute to pass a single ISO 8601 date or date-time string into the element. The `value` attribute is locale-agnostic and replaces the previous `setDate` and `utc` attributes. Accepted shapes include:
|
|
176
|
+
|
|
177
|
+
- `2022-07-14T08:00:00-07:00` (date-time with offset)
|
|
178
|
+
- `2022-07-14T08:00:00Z` (UTC, Zulu designator)
|
|
179
|
+
- `2022-07-14T08:00:00` (date-time, no offset)
|
|
180
|
+
- `2022-07-14` (date only)
|
|
181
|
+
|
|
182
|
+
Invalid input is logged as a warning and renders nothing.
|
|
183
|
+
|
|
184
|
+
<div class="exampleWrapper">
|
|
185
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-date.html) -->
|
|
186
|
+
<!-- The below content is automatically added from ../apiExamples/set-date.html -->
|
|
187
|
+
<auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
|
|
188
|
+
<auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
|
|
189
|
+
<auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
|
|
190
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
191
|
+
</div>
|
|
192
|
+
<auro-accordion alignRight>
|
|
193
|
+
<span slot="trigger">See code</span>
|
|
194
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/set-date.html) -->
|
|
195
|
+
<!-- The below code snippet is automatically added from ../apiExamples/set-date.html -->
|
|
196
|
+
|
|
197
|
+
```html
|
|
198
|
+
<auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
|
|
199
|
+
<auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
|
|
200
|
+
<auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
|
|
201
|
+
```
|
|
202
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
203
|
+
</auro-accordion>
|
|
204
|
+
|
|
205
|
+
### Type
|
|
206
|
+
|
|
207
|
+
Use `type` to define the type of data to render. Options are `[date, time, year, month, weekday, day, numeric]`.
|
|
208
|
+
|
|
209
|
+
#### Numeric Date
|
|
210
|
+
|
|
211
|
+
Using the `auro-datetime` element with `type=numeric` will return the **current date** based on client local preferences as a numeric type.
|
|
212
|
+
|
|
213
|
+
<div class="exampleWrapper">
|
|
214
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/numeric-date.html) -->
|
|
215
|
+
<!-- The below content is automatically added from ../apiExamples/numeric-date.html -->
|
|
216
|
+
<auro-datetime type="numeric"></auro-datetime>
|
|
217
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
218
|
+
</div>
|
|
219
|
+
<auro-accordion alignRight>
|
|
220
|
+
<span slot="trigger">See code</span>
|
|
221
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/numeric-date.html) -->
|
|
222
|
+
<!-- The below code snippet is automatically added from ../apiExamples/numeric-date.html -->
|
|
223
|
+
|
|
224
|
+
```html
|
|
225
|
+
<auro-datetime type="numeric"></auro-datetime>
|
|
226
|
+
```
|
|
227
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
228
|
+
</auro-accordion>
|
|
229
|
+
|
|
230
|
+
#### Wall-clock display from offset
|
|
231
|
+
|
|
232
|
+
When the `value` attribute contains a timezone offset (or `Z`) and no `timezone` attribute is set, the component renders the **wall-clock** components from the input verbatim. This is the right behavior for displaying local airport time on a flight schedule, where the offset describes the location of the flight rather than the viewer.
|
|
233
|
+
|
|
234
|
+
Example using `2022-07-13T21:35:00-07:00`. The same string is rendered identically regardless of the viewer's location.
|
|
235
|
+
|
|
236
|
+
<div class="exampleWrapper">
|
|
237
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plus-minus.html) -->
|
|
238
|
+
<!-- The below content is automatically added from ../apiExamples/plus-minus.html -->
|
|
239
|
+
<auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
|
|
240
|
+
<auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
|
|
241
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
242
|
+
</div>
|
|
243
|
+
<auro-accordion alignRight>
|
|
244
|
+
<span slot="trigger">See code</span>
|
|
245
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/plus-minus.html) -->
|
|
246
|
+
<!-- The below code snippet is automatically added from ../apiExamples/plus-minus.html -->
|
|
247
|
+
|
|
248
|
+
```html
|
|
249
|
+
<auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
|
|
250
|
+
<auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
|
|
251
|
+
```
|
|
252
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
253
|
+
</auro-accordion>
|
|
254
|
+
|
|
255
|
+
### UTC (Zulu) input
|
|
256
|
+
|
|
257
|
+
The `value` attribute also accepts ISO 8601 strings ending in the `Z` designator. Without a `timezone` attribute, the wall-clock components are rendered as written. To convert into a viewer-meaningful timezone, also set `timezone` (see the timezone example).
|
|
258
|
+
|
|
259
|
+
<div class="exampleWrapper">
|
|
260
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/utc.html) -->
|
|
261
|
+
<!-- The below content is automatically added from ../apiExamples/utc.html -->
|
|
262
|
+
<auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
263
|
+
<auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
264
|
+
<auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
265
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
266
|
+
</div>
|
|
267
|
+
<auro-accordion alignRight>
|
|
268
|
+
<span slot="trigger">See code</span>
|
|
269
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/utc.html) -->
|
|
270
|
+
<!-- The below code snippet is automatically added from ../apiExamples/utc.html -->
|
|
271
|
+
|
|
272
|
+
```html
|
|
273
|
+
<auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
274
|
+
<auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
275
|
+
<auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
276
|
+
```
|
|
277
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
278
|
+
</auro-accordion>
|
|
279
|
+
|
|
280
|
+
### Combining `value` and `timezone`
|
|
281
|
+
|
|
282
|
+
How the `timezone` attribute composes with the input depends on whether `value` carries an offset:
|
|
283
|
+
|
|
284
|
+
- **`value` has an offset (or `Z`):** the offset anchors the absolute moment; `timezone` is the display zone. Example: `value="2022-07-14T08:00:00-04:00" timezone="US/Pacific"` renders as `5:00 am` (8am Eastern → 5am Pacific).
|
|
285
|
+
- **`value` has no offset:** the wall-clock is interpreted as being in `timezone`, so display in that same zone matches the input verbatim. Example: `value="2022-07-14T08:00:00" timezone="US/Eastern"` renders as `8:00 am` regardless of where the viewer is. This is the recommended shape when consumers know the source zone but don't have an offset readily available (e.g. flight-schedule data keyed by airport).
|
|
286
|
+
|
|
287
|
+
#### Invalid `timezone` and `locale` values
|
|
288
|
+
|
|
289
|
+
Both attributes are validated up-front. Invalid inputs do **not** crash the component — they fall back gracefully and log a `console.warn` (deduplicated per element):
|
|
290
|
+
|
|
291
|
+
- **Invalid `locale`** (e.g. `"xx-INVALID-tag"`) → falls back to `"en-US"`.
|
|
292
|
+
- **Invalid `timezone`** (e.g. `"US/Pacfic"` typo) → falls back to behaving as if `timezone` was not specified. With `value` set, that means wall-clock display from the input components — visually the same string for every viewer. With `value` unset, that means the current time in the viewer's machine zone. The warning surfaces the typo so the developer can fix it.
|
|
293
|
+
|
|
294
|
+
## Slot Examples
|
|
295
|
+
|
|
296
|
+
### Pre and Post Slots
|
|
297
|
+
|
|
298
|
+
This example demonstrates the use of the `pre` and `post` slots to customize the content before and after the datetime output.
|
|
299
|
+
|
|
300
|
+
<div class="exampleWrapper">
|
|
301
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/slots.html) -->
|
|
302
|
+
<!-- The below content is automatically added from ../apiExamples/slots.html -->
|
|
303
|
+
<auro-datetime type="year">
|
|
304
|
+
<span slot="pre">In the year </span>
|
|
305
|
+
<span slot="post">
|
|
306
|
+
day<auro-datetime type="day"></auro-datetime>
|
|
307
|
+
of <auro-datetime type="month" month="long"></auro-datetime>
|
|
308
|
+
</span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
|
|
309
|
+
</auro-datetime>
|
|
310
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
311
|
+
</div>
|
|
312
|
+
<auro-accordion alignRight>
|
|
313
|
+
<span slot="trigger">See code</span>
|
|
314
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/slots.html) -->
|
|
315
|
+
<!-- The below code snippet is automatically added from ../apiExamples/slots.html -->
|
|
316
|
+
|
|
317
|
+
```html
|
|
318
|
+
<auro-datetime type="year">
|
|
319
|
+
<span slot="pre">In the year </span>
|
|
320
|
+
<span slot="post">
|
|
321
|
+
day<auro-datetime type="day"></auro-datetime>
|
|
322
|
+
of <auro-datetime type="month" month="long"></auro-datetime>
|
|
323
|
+
</span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
|
|
324
|
+
</auro-datetime>
|
|
325
|
+
```
|
|
326
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
327
|
+
</auro-accordion>
|
|
328
|
+
|
|
329
|
+
## Common Usage Patterns & Functional Examples
|
|
330
|
+
|
|
331
|
+
### Example using Eastern Time Zone
|
|
332
|
+
|
|
333
|
+
Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
|
|
334
|
+
|
|
335
|
+
<div class="exampleWrapper">
|
|
336
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/east-plus-minus.html) -->
|
|
337
|
+
<!-- The below content is automatically added from ../apiExamples/east-plus-minus.html -->
|
|
338
|
+
<auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
|
|
339
|
+
<auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
|
|
340
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
341
|
+
</div>
|
|
342
|
+
<auro-accordion alignRight>
|
|
343
|
+
<span slot="trigger">See code</span>
|
|
344
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/east-plus-minus.html) -->
|
|
345
|
+
<!-- The below code snippet is automatically added from ../apiExamples/east-plus-minus.html -->
|
|
346
|
+
|
|
347
|
+
```html
|
|
348
|
+
<auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
|
|
349
|
+
<auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
|
|
350
|
+
```
|
|
351
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
352
|
+
</auro-accordion>
|
|
353
|
+
|
|
354
|
+
### Example using Hawaiian Time Zone
|
|
355
|
+
|
|
356
|
+
Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
|
|
357
|
+
|
|
358
|
+
<div class="exampleWrapper">
|
|
359
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hawaii-plus-minus.html) -->
|
|
360
|
+
<!-- The below content is automatically added from ../apiExamples/hawaii-plus-minus.html -->
|
|
361
|
+
<auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
|
|
362
|
+
<auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
|
|
363
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
364
|
+
</div>
|
|
365
|
+
<auro-accordion alignRight>
|
|
366
|
+
<span slot="trigger">See code</span>
|
|
367
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hawaii-plus-minus.html) -->
|
|
368
|
+
<!-- The below code snippet is automatically added from ../apiExamples/hawaii-plus-minus.html -->
|
|
369
|
+
|
|
370
|
+
```html
|
|
371
|
+
<auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
|
|
372
|
+
<auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
|
|
373
|
+
```
|
|
374
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
375
|
+
</auro-accordion>
|
package/demo/api.min.js
ADDED