@aurodesignsystem-dev/auro-datetime 0.0.0-pr91.0 → 0.0.0-pr93.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/demo/api.md +116 -142
- package/demo/api.min.js +606 -1
- package/demo/index.md +12 -16
- package/demo/index.min.js +606 -1
- package/demo/readme.md +116 -0
- package/package.json +1 -1
- package/demo/auro-datetime.min.js +0 -608
package/demo/api.md
CHANGED
|
@@ -33,38 +33,34 @@ The `auro-datetime` element is for the purposes of providing an easy to use date
|
|
|
33
33
|
## Basic Date
|
|
34
34
|
|
|
35
35
|
<div class="exampleWrapper">
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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
40
|
</div>
|
|
41
41
|
<auro-accordion alignRight>
|
|
42
|
-
|
|
42
|
+
<span slot="trigger">See code</span>
|
|
43
43
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
44
44
|
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
<auro-datetime type="date"></auro-datetime>
|
|
48
|
-
```
|
|
46
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="date"></auro-datetime></code></pre>
|
|
49
47
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
50
48
|
</auro-accordion>
|
|
51
49
|
|
|
52
50
|
## Basic Time
|
|
53
51
|
|
|
54
52
|
<div class="exampleWrapper">
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
|
|
54
|
+
<!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
|
|
55
|
+
<auro-datetime type="time"></auro-datetime>
|
|
56
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
57
|
</div>
|
|
60
58
|
<auro-accordion alignRight>
|
|
61
|
-
|
|
59
|
+
<span slot="trigger">See code</span>
|
|
62
60
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-time.html) -->
|
|
63
61
|
<!-- The below code snippet is automatically added from ./../apiExamples/basic-time.html -->
|
|
64
62
|
|
|
65
|
-
|
|
66
|
-
<auro-datetime type="time"></auro-datetime>
|
|
67
|
-
```
|
|
63
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="time"></auro-datetime></code></pre>
|
|
68
64
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
69
65
|
</auro-accordion>
|
|
70
66
|
|
|
@@ -77,46 +73,42 @@ Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozill
|
|
|
77
73
|
#### Locale with type="date"
|
|
78
74
|
|
|
79
75
|
<div class="exampleWrapper">
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
76
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-date.html) -->
|
|
77
|
+
<!-- The below content is automatically added from ../apiExamples/locale-date.html -->
|
|
78
|
+
<auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
79
|
+
<auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
80
|
+
<auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
81
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
86
82
|
</div>
|
|
87
83
|
<auro-accordion alignRight>
|
|
88
|
-
|
|
84
|
+
<span slot="trigger">See code</span>
|
|
89
85
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-date.html) -->
|
|
90
86
|
<!-- The below code snippet is automatically added from ../apiExamples/locale-date.html -->
|
|
91
87
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
96
|
-
```
|
|
88
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
89
|
+
<auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
90
|
+
<auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime></code></pre>
|
|
97
91
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
98
92
|
</auro-accordion>
|
|
99
93
|
|
|
100
94
|
#### Locale with type="numeric"
|
|
101
95
|
|
|
102
96
|
<div class="exampleWrapper">
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
97
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-numeric.html) -->
|
|
98
|
+
<!-- The below content is automatically added from ../apiExamples/locale-numeric.html -->
|
|
99
|
+
<auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
100
|
+
<auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
101
|
+
<auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
102
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
109
103
|
</div>
|
|
110
104
|
<auro-accordion alignRight>
|
|
111
|
-
|
|
105
|
+
<span slot="trigger">See code</span>
|
|
112
106
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-numeric.html) -->
|
|
113
107
|
<!-- The below code snippet is automatically added from ../apiExamples/locale-numeric.html -->
|
|
114
108
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
119
|
-
```
|
|
109
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
110
|
+
<auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
111
|
+
<auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime></code></pre>
|
|
120
112
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
121
113
|
</auro-accordion>
|
|
122
114
|
|
|
@@ -127,25 +119,23 @@ Time is the most format-divergent type across locales. The examples below highli
|
|
|
127
119
|
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
120
|
|
|
129
121
|
<div class="exampleWrapper">
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
122
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-time.html) -->
|
|
123
|
+
<!-- The below content is automatically added from ../apiExamples/locale-time.html -->
|
|
124
|
+
<auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
125
|
+
<auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
126
|
+
<auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
127
|
+
<auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
|
|
128
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
137
129
|
</div>
|
|
138
130
|
<auro-accordion alignRight>
|
|
139
|
-
|
|
131
|
+
<span slot="trigger">See code</span>
|
|
140
132
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-time.html) -->
|
|
141
133
|
<!-- The below code snippet is automatically added from ../apiExamples/locale-time.html -->
|
|
142
134
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
|
|
148
|
-
```
|
|
135
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
136
|
+
<auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
137
|
+
<auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
|
|
138
|
+
<auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime></code></pre>
|
|
149
139
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
150
140
|
</auro-accordion>
|
|
151
141
|
|
|
@@ -154,19 +144,17 @@ Note: the choice of 12-hour vs 24-hour is decided by the runtime's `Intl.DateTim
|
|
|
154
144
|
Use the `month="long"` attribute to display the full month name, and `weekday="long"` to display the full weekday name.
|
|
155
145
|
|
|
156
146
|
<div class="exampleWrapper">
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
147
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/long.html) -->
|
|
148
|
+
<!-- The below content is automatically added from ../apiExamples/long.html -->
|
|
149
|
+
<auro-datetime type="date" month="long" weekday="long"></auro-datetime>
|
|
150
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
161
151
|
</div>
|
|
162
152
|
<auro-accordion alignRight>
|
|
163
|
-
|
|
153
|
+
<span slot="trigger">See code</span>
|
|
164
154
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/long.html) -->
|
|
165
155
|
<!-- The below code snippet is automatically added from ../apiExamples/long.html -->
|
|
166
156
|
|
|
167
|
-
|
|
168
|
-
<auro-datetime type="date" month="long" weekday="long"></auro-datetime>
|
|
169
|
-
```
|
|
157
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="date" month="long" weekday="long"></auro-datetime></code></pre>
|
|
170
158
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
171
159
|
</auro-accordion>
|
|
172
160
|
|
|
@@ -182,23 +170,21 @@ Use the `value` attribute to pass a single ISO 8601 date or date-time string int
|
|
|
182
170
|
Invalid input is logged as a warning and renders nothing.
|
|
183
171
|
|
|
184
172
|
<div class="exampleWrapper">
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
173
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-date.html) -->
|
|
174
|
+
<!-- The below content is automatically added from ../apiExamples/set-date.html -->
|
|
175
|
+
<auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
|
|
176
|
+
<auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
|
|
177
|
+
<auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
|
|
178
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
191
179
|
</div>
|
|
192
180
|
<auro-accordion alignRight>
|
|
193
|
-
|
|
181
|
+
<span slot="trigger">See code</span>
|
|
194
182
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/set-date.html) -->
|
|
195
183
|
<!-- The below code snippet is automatically added from ../apiExamples/set-date.html -->
|
|
196
184
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
<auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
|
|
201
|
-
```
|
|
185
|
+
<pre class="language-html"><code class="language-html"><auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
|
|
186
|
+
<auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
|
|
187
|
+
<auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime></code></pre>
|
|
202
188
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
203
189
|
</auro-accordion>
|
|
204
190
|
|
|
@@ -211,19 +197,17 @@ Use `type` to define the type of data to render. Options are `[date, time, year,
|
|
|
211
197
|
Using the `auro-datetime` element with `type=numeric` will return the **current date** based on client local preferences as a numeric type.
|
|
212
198
|
|
|
213
199
|
<div class="exampleWrapper">
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
200
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/numeric-date.html) -->
|
|
201
|
+
<!-- The below content is automatically added from ../apiExamples/numeric-date.html -->
|
|
202
|
+
<auro-datetime type="numeric"></auro-datetime>
|
|
203
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
218
204
|
</div>
|
|
219
205
|
<auro-accordion alignRight>
|
|
220
|
-
|
|
206
|
+
<span slot="trigger">See code</span>
|
|
221
207
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/numeric-date.html) -->
|
|
222
208
|
<!-- The below code snippet is automatically added from ../apiExamples/numeric-date.html -->
|
|
223
209
|
|
|
224
|
-
|
|
225
|
-
<auro-datetime type="numeric"></auro-datetime>
|
|
226
|
-
```
|
|
210
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="numeric"></auro-datetime></code></pre>
|
|
227
211
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
228
212
|
</auro-accordion>
|
|
229
213
|
|
|
@@ -234,21 +218,19 @@ When the `value` attribute contains a timezone offset (or `Z`) and no `timezone`
|
|
|
234
218
|
Example using `2022-07-13T21:35:00-07:00`. The same string is rendered identically regardless of the viewer's location.
|
|
235
219
|
|
|
236
220
|
<div class="exampleWrapper">
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
221
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plus-minus.html) -->
|
|
222
|
+
<!-- The below content is automatically added from ../apiExamples/plus-minus.html -->
|
|
223
|
+
<auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
|
|
224
|
+
<auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
|
|
225
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
242
226
|
</div>
|
|
243
227
|
<auro-accordion alignRight>
|
|
244
|
-
|
|
228
|
+
<span slot="trigger">See code</span>
|
|
245
229
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/plus-minus.html) -->
|
|
246
230
|
<!-- The below code snippet is automatically added from ../apiExamples/plus-minus.html -->
|
|
247
231
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
<auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
|
|
251
|
-
```
|
|
232
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
|
|
233
|
+
<auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime></code></pre>
|
|
252
234
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
253
235
|
</auro-accordion>
|
|
254
236
|
|
|
@@ -257,23 +239,21 @@ Example using `2022-07-13T21:35:00-07:00`. The same string is rendered identical
|
|
|
257
239
|
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
240
|
|
|
259
241
|
<div class="exampleWrapper">
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
242
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/utc.html) -->
|
|
243
|
+
<!-- The below content is automatically added from ../apiExamples/utc.html -->
|
|
244
|
+
<auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
245
|
+
<auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
246
|
+
<auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
247
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
266
248
|
</div>
|
|
267
249
|
<auro-accordion alignRight>
|
|
268
|
-
|
|
250
|
+
<span slot="trigger">See code</span>
|
|
269
251
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/utc.html) -->
|
|
270
252
|
<!-- The below code snippet is automatically added from ../apiExamples/utc.html -->
|
|
271
253
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
<auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
|
|
276
|
-
```
|
|
254
|
+
<pre class="language-html"><code class="language-html"><auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
255
|
+
<auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
256
|
+
<auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime></code></pre>
|
|
277
257
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
278
258
|
</auro-accordion>
|
|
279
259
|
|
|
@@ -298,31 +278,29 @@ Both attributes are validated up-front. Invalid inputs do **not** crash the comp
|
|
|
298
278
|
This example demonstrates the use of the `pre` and `post` slots to customize the content before and after the datetime output.
|
|
299
279
|
|
|
300
280
|
<div class="exampleWrapper">
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
281
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/slots.html) -->
|
|
282
|
+
<!-- The below content is automatically added from ../apiExamples/slots.html -->
|
|
283
|
+
<auro-datetime type="year">
|
|
284
|
+
<span slot="pre">In the year </span>
|
|
285
|
+
<span slot="post">
|
|
306
286
|
day<auro-datetime type="day"></auro-datetime>
|
|
307
287
|
of <auro-datetime type="month" month="long"></auro-datetime>
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
288
|
+
</span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
|
|
289
|
+
</auro-datetime>
|
|
290
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
311
291
|
</div>
|
|
312
292
|
<auro-accordion alignRight>
|
|
313
|
-
|
|
293
|
+
<span slot="trigger">See code</span>
|
|
314
294
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/slots.html) -->
|
|
315
295
|
<!-- The below code snippet is automatically added from ../apiExamples/slots.html -->
|
|
316
296
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
</auro-datetime>
|
|
325
|
-
```
|
|
297
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="year">
|
|
298
|
+
<span slot="pre">In the year </span>
|
|
299
|
+
<span slot="post">
|
|
300
|
+
day<auro-datetime type="day"></auro-datetime>
|
|
301
|
+
of <auro-datetime type="month" month="long"></auro-datetime>
|
|
302
|
+
</span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
|
|
303
|
+
</auro-datetime></code></pre>
|
|
326
304
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
327
305
|
</auro-accordion>
|
|
328
306
|
|
|
@@ -333,21 +311,19 @@ This example demonstrates the use of the `pre` and `post` slots to customize the
|
|
|
333
311
|
Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
|
|
334
312
|
|
|
335
313
|
<div class="exampleWrapper">
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
314
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/east-plus-minus.html) -->
|
|
315
|
+
<!-- The below content is automatically added from ../apiExamples/east-plus-minus.html -->
|
|
316
|
+
<auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
|
|
317
|
+
<auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
|
|
318
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
341
319
|
</div>
|
|
342
320
|
<auro-accordion alignRight>
|
|
343
|
-
|
|
321
|
+
<span slot="trigger">See code</span>
|
|
344
322
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/east-plus-minus.html) -->
|
|
345
323
|
<!-- The below code snippet is automatically added from ../apiExamples/east-plus-minus.html -->
|
|
346
324
|
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
<auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
|
|
350
|
-
```
|
|
325
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
|
|
326
|
+
<auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime></code></pre>
|
|
351
327
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
352
328
|
</auro-accordion>
|
|
353
329
|
|
|
@@ -356,20 +332,18 @@ Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
|
|
|
356
332
|
Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
|
|
357
333
|
|
|
358
334
|
<div class="exampleWrapper">
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
335
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hawaii-plus-minus.html) -->
|
|
336
|
+
<!-- The below content is automatically added from ../apiExamples/hawaii-plus-minus.html -->
|
|
337
|
+
<auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
|
|
338
|
+
<auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
|
|
339
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
364
340
|
</div>
|
|
365
341
|
<auro-accordion alignRight>
|
|
366
|
-
|
|
342
|
+
<span slot="trigger">See code</span>
|
|
367
343
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hawaii-plus-minus.html) -->
|
|
368
344
|
<!-- The below code snippet is automatically added from ../apiExamples/hawaii-plus-minus.html -->
|
|
369
345
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
<auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
|
|
373
|
-
```
|
|
346
|
+
<pre class="language-html"><code class="language-html"><auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
|
|
347
|
+
<auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime></code></pre>
|
|
374
348
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
375
349
|
</auro-accordion>
|