@aurodesignsystem-dev/auro-formkit 0.0.0-pr1483.2 → 0.0.0-pr1488.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/components/checkbox/demo/customize.min.js +436 -14
- package/components/checkbox/demo/getting-started.min.js +436 -14
- package/components/checkbox/demo/index.min.js +436 -14
- package/components/checkbox/dist/index.js +436 -14
- package/components/checkbox/dist/registered.js +436 -14
- package/components/combobox/demo/customize.min.js +1482 -6618
- package/components/combobox/demo/getting-started.min.js +1482 -6618
- package/components/combobox/demo/index.min.js +1482 -6618
- package/components/combobox/demo/keyboard-behavior.md +68 -8
- package/components/combobox/dist/index.js +1489 -6625
- package/components/combobox/dist/registered.js +1489 -6625
- package/components/counter/demo/customize.min.js +437 -15
- package/components/counter/demo/index.min.js +437 -15
- package/components/counter/dist/index.js +436 -14
- package/components/counter/dist/registered.js +436 -14
- package/components/datepicker/demo/api.md +3 -10
- package/components/datepicker/demo/customize.md +6 -6
- package/components/datepicker/demo/index.md +4 -4
- package/components/datepicker/demo/index.min.js +2319 -7650
- package/components/datepicker/dist/index.js +2319 -7650
- package/components/datepicker/dist/registered.js +2319 -7650
- package/components/datepicker/dist/src/auro-calendar.d.ts +0 -6
- package/components/datepicker/dist/src/auro-datepicker.d.ts +11 -24
- package/components/datepicker/dist/src/utilities.d.ts +40 -14
- package/components/datepicker/dist/src/utilitiesCalendar.d.ts +1 -1
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +44181 -58516
- package/components/form/demo/getting-started.min.js +44181 -58516
- package/components/form/demo/index.min.js +44181 -58516
- package/components/form/demo/registerDemoDeps.min.js +44181 -58516
- package/components/input/demo/api.md +51 -57
- package/components/input/demo/customize.md +0 -160
- package/components/input/demo/customize.min.js +1011 -6565
- package/components/input/demo/getting-started.md +0 -11
- package/components/input/demo/getting-started.min.js +1010 -6564
- package/components/input/demo/index.md +3 -28
- package/components/input/demo/index.min.js +1010 -6564
- package/components/input/dist/auro-input.d.ts +6 -25
- package/components/input/dist/base-input.d.ts +69 -82
- package/components/input/dist/index.d.ts +1 -2
- package/components/input/dist/index.js +1003 -6599
- package/components/input/dist/registered.js +1010 -6564
- package/components/input/dist/utilities.d.ts +9 -68
- package/components/radio/demo/index.min.js +436 -14
- package/components/radio/dist/index.js +436 -14
- package/components/radio/dist/registered.js +436 -14
- package/components/select/demo/customize.min.js +455 -31
- package/components/select/demo/getting-started.min.js +455 -31
- package/components/select/demo/index.min.js +455 -31
- package/components/select/demo/keyboard-behavior.md +54 -8
- package/components/select/dist/index.js +455 -31
- package/components/select/dist/registered.js +455 -31
- package/custom-elements.json +2117 -2625
- package/package.json +4 -4
- package/components/input/dist/auro-input-util.d.ts +0 -17
|
@@ -7,63 +7,57 @@ The `auro-input` element provides users a way to enter data into a text field.
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute |
|
|
11
|
-
|
|
12
|
-
| `a11yActivedescendant` | `a11yActivedescendant` |
|
|
13
|
-
| `a11yControls` | `a11yControls` |
|
|
14
|
-
| `a11yExpanded` | `a11yExpanded` |
|
|
15
|
-
| `a11yRole` | `a11yRole` |
|
|
16
|
-
| `activeLabel` | `activeLabel` |
|
|
17
|
-
| `appearance` | `appearance` |
|
|
18
|
-
| `autocapitalize` | `autocapitalize` |
|
|
19
|
-
| `autocomplete` | `autocomplete` |
|
|
20
|
-
| `autocorrect` | `autocorrect` |
|
|
21
|
-
| `customValidityTypeEmail` | `customValidityTypeEmail` |
|
|
22
|
-
| `disabled` | `disabled` |
|
|
23
|
-
| `dvInputOnly` | `dvInputOnly` |
|
|
24
|
-
| `error` | `error` |
|
|
25
|
-
| `errorMessage` | `errorMessage` |
|
|
26
|
-
| `format` | `format` |
|
|
27
|
-
| `hasFocus` | |
|
|
28
|
-
| `hasValue` | |
|
|
29
|
-
| `icon` | `icon` |
|
|
30
|
-
| `id` | `id` |
|
|
31
|
-
| `inputmode` | `inputmode` |
|
|
32
|
-
| `lang` | `lang` |
|
|
33
|
-
| `layout` | |
|
|
34
|
-
| `
|
|
35
|
-
| `
|
|
36
|
-
| `
|
|
37
|
-
| `
|
|
38
|
-
| `
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
41
|
-
| `
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
48
|
-
| `
|
|
49
|
-
| `
|
|
50
|
-
| `
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `spellcheck` | `spellcheck` | | `string` | | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
|
|
62
|
-
| `type` | `type` | | `'text' \| 'password' \| 'email' \| 'credit-card' \| 'tel' \| 'number'` | "'text'" | Populates the `type` attribute on the input. |
|
|
63
|
-
| `validateOnInput` | `validateOnInput` | | `boolean` | | Sets validation mode to re-eval with each input. |
|
|
64
|
-
| `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
65
|
-
| `value` | `value` | | `string` | "undefined" | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.<br />The format for this property should be ISO for `date` type inputs. |
|
|
66
|
-
| `valueObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `value` for full date formats. |
|
|
10
|
+
| Property | Attribute | Type | Default | Description |
|
|
11
|
+
|-----------------------------------|-----------------------------------|--------------------------------------------------|-------------|--------------------------------------------------|
|
|
12
|
+
| `a11yActivedescendant` | `a11yActivedescendant` | `string` | | The value for the aria-activedescendant attribute.<br />Points to the ID of the currently active/highlighted option in a listbox. |
|
|
13
|
+
| `a11yControls` | `a11yControls` | `string` | | The value for the aria-controls attribute. |
|
|
14
|
+
| `a11yExpanded` | `a11yExpanded` | `boolean` | | The value for the aria-expanded attribute. |
|
|
15
|
+
| `a11yRole` | `a11yRole` | `string` | | The value for the role attribute. |
|
|
16
|
+
| `activeLabel` | `activeLabel` | `boolean` | | If set, the label will remain fixed in the active position. |
|
|
17
|
+
| `appearance` | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
18
|
+
| `autocapitalize` | `autocapitalize` | `string` | | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
|
|
19
|
+
| `autocomplete` | `autocomplete` | `string` | | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
|
|
20
|
+
| `autocorrect` | `autocorrect` | `string` | | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
|
|
21
|
+
| `customValidityTypeEmail` | `customValidityTypeEmail` | `string` | | Custom help text message for email type validity. |
|
|
22
|
+
| `disabled` | `disabled` | `boolean` | | If set, disables the input. |
|
|
23
|
+
| `dvInputOnly` | `dvInputOnly` | `boolean` | | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
|
|
24
|
+
| `error` | `error` | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
|
|
25
|
+
| `errorMessage` | `errorMessage` | `string` | | Contains the help text message for the current validity error. |
|
|
26
|
+
| `format` | `format` | `string` | | Specifies the input mask format. |
|
|
27
|
+
| `hasFocus` | | `boolean` | | Flag to indicate if the input currently has focus. |
|
|
28
|
+
| `hasValue` | | `boolean` | | Flag to indicate if the input currently has value. |
|
|
29
|
+
| `icon` | `icon` | `boolean` | | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
|
|
30
|
+
| `id` | `id` | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
|
|
31
|
+
| `inputmode` | `inputmode` | `string` | | Exposes inputmode attribute for input. |
|
|
32
|
+
| `lang` | `lang` | `string` | | Defines the language of an element. |
|
|
33
|
+
| `layout` | | `string` | | |
|
|
34
|
+
| `max` | `max` | `string` | | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
|
|
35
|
+
| `maxLength` | `maxLength` | `number` | | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.<br />**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers. |
|
|
36
|
+
| `min` | `min` | `string` | | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
|
|
37
|
+
| `minLength` | `minLength` | `number` | | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
|
|
38
|
+
| `name` | `name` | `string` | | Populates the `name` attribute on the input. |
|
|
39
|
+
| `nested` | `nested` | `boolean` | | Sets styles for nested operation - removes borders, hides help + error text, and<br />hides accents. |
|
|
40
|
+
| `noValidate` | `noValidate` | `boolean` | | If set, disables auto-validation on blur. |
|
|
41
|
+
| `onDark` | `onDark` | `boolean` | | DEPRECATED - use `appearance="inverse"` instead. |
|
|
42
|
+
| `pattern` | `pattern` | `string` | | Specifies a regular expression the form control's value should match. |
|
|
43
|
+
| `placeholder` | `placeholder` | `string` | | Define custom placeholder text. |
|
|
44
|
+
| `readonly` | `readonly` | `boolean` | | Makes the input read-only, but can be set programmatically. |
|
|
45
|
+
| `required` | `required` | `boolean` | | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
46
|
+
| `setCustomValidity` | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
47
|
+
| `setCustomValidityBadInput` | `setCustomValidityBadInput` | `string` | | Custom help text message to display when validity = `badInput`. |
|
|
48
|
+
| `setCustomValidityCustomError` | `setCustomValidityCustomError` | `string` | | Custom help text message to display when validity = `customError`. |
|
|
49
|
+
| `setCustomValidityForType` | `setCustomValidityForType` | `string` | | Custom help text message to display for the declared element `type` and type validity fails. |
|
|
50
|
+
| `setCustomValidityRangeOverflow` | `setCustomValidityRangeOverflow` | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
|
|
51
|
+
| `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
|
|
52
|
+
| `setCustomValidityTooLong` | `setCustomValidityTooLong` | `string` | | Custom help text message to display when validity = `tooLong`. |
|
|
53
|
+
| `setCustomValidityTooShort` | `setCustomValidityTooShort` | `string` | | Custom help text message to display when validity = `tooShort`. |
|
|
54
|
+
| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
55
|
+
| `simple` | `simple` | `boolean` | | Simple makes the input render without a border. |
|
|
56
|
+
| `spellcheck` | `spellcheck` | `string` | | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
|
|
57
|
+
| `type` | `type` | `'text' \| 'password' \| 'email' \| 'credit-card' \| 'tel' \| 'number'` | "'text'" | Populates the `type` attribute on the input. |
|
|
58
|
+
| `validateOnInput` | `validateOnInput` | `boolean` | | Sets validation mode to re-eval with each input. |
|
|
59
|
+
| `validity` | `validity` | `string` | | Specifies the `validityState` this element is in. |
|
|
60
|
+
| `value` | `value` | `string` | | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
|
|
67
61
|
|
|
68
62
|
## Methods
|
|
69
63
|
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
<auro-anchorlink fluid href="#disabled" class="level2 body-xs">Disabled</auro-anchorlink>
|
|
23
23
|
<auro-anchorlink fluid href="#error" class="level2 body-xs">Error</auro-anchorlink>
|
|
24
24
|
<auro-anchorlink fluid href="#format" class="level2 body-xs">Format</auro-anchorlink>
|
|
25
|
-
<auro-anchorlink fluid href="#regionalDateFormat" class="level2 body-xs">Regional Date</auro-anchorlink>
|
|
26
25
|
<auro-anchorlink fluid href="#inputMode" class="level2 body-xs">Input Mode</auro-anchorlink>
|
|
27
26
|
<auro-anchorlink fluid href="#max" class="level2 body-xs">Max</auro-anchorlink>
|
|
28
27
|
<auro-anchorlink fluid href="#maxLength" class="level2 body-xs">Max Length</auro-anchorlink>
|
|
@@ -37,9 +36,6 @@
|
|
|
37
36
|
<auro-anchorlink fluid href="#type" class="level2 body-xs">Type</auro-anchorlink>
|
|
38
37
|
<auro-anchorlink fluid href="#validateOnInput" class="level2 body-xs">Validate on Input</auro-anchorlink>
|
|
39
38
|
<auro-anchorlink fluid href="#value" class="level2 body-xs">Value</auro-anchorlink>
|
|
40
|
-
<auro-anchorlink fluid href="#auroInputUtil">AuroInputUtil</auro-anchorlink>
|
|
41
|
-
<auro-anchorlink fluid href="#auroInputUtilFormatIso" class="level2 body-xs">Format ISO value</auro-anchorlink>
|
|
42
|
-
<auro-anchorlink fluid href="#auroInputUtilToIso" class="level2 body-xs">Date to ISO</auro-anchorlink>
|
|
43
39
|
</auro-nav>
|
|
44
40
|
</nav>
|
|
45
41
|
<div class="mainContent">
|
|
@@ -531,72 +527,6 @@
|
|
|
531
527
|
</auro-input></code></pre>
|
|
532
528
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
533
529
|
</auro-accordion>
|
|
534
|
-
<auro-header level="3" id="regionalDateFormat">Regional Date Format Support</auro-header>
|
|
535
|
-
<p>When <code>type="date"</code> is used with the <code>locale</code> attribute, the component automatically derives the correct date format for that region — no need to set <code>format</code> manually. For example, <code>locale="en-US"</code> produces <code>mm/dd/yyyy</code>, <code>locale="de-DE"</code> produces <code>dd.mm.yyyy</code>, and <code>locale="ja-JP"</code> produces <code>yyyy/mm/dd</code>.</p>
|
|
536
|
-
<p>If <code>format</code> is explicitly set alongside <code>locale</code>, <code>format</code> always wins. Use this when a specific format is required regardless of region.</p>
|
|
537
|
-
<div class="exampleWrapper">
|
|
538
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale.html) -->
|
|
539
|
-
<!-- The below content is automatically added from ../apiExamples/locale.html -->
|
|
540
|
-
<div data-locale="de-DE">
|
|
541
|
-
<auro-input type="date" locale="en-GB">
|
|
542
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
543
|
-
<span slot="label">en-GB Date</span>
|
|
544
|
-
<span slot="helpText">Help Text</span>
|
|
545
|
-
</auro-input>
|
|
546
|
-
<auro-input type="date" locale="en-US">
|
|
547
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
548
|
-
<span slot="label">en-US Date</span>
|
|
549
|
-
<span slot="helpText">Help Text</span>
|
|
550
|
-
</auro-input>
|
|
551
|
-
<auro-input type="date" locale="zh-CN">
|
|
552
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
553
|
-
<span slot="label">zh-CN Date</span>
|
|
554
|
-
<span slot="helpText">Help Text</span>
|
|
555
|
-
</auro-input>
|
|
556
|
-
<auro-input type="date">
|
|
557
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
558
|
-
<span slot="label">Nearest `data-locale` attribute format (`de-DE` in this case)</span>
|
|
559
|
-
<span slot="helpText">Help Text</span>
|
|
560
|
-
</auro-input>
|
|
561
|
-
<auro-input type="date" locale="en-US" format="yyyy.mm.dd">
|
|
562
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
563
|
-
<span slot="label">en-US with yyyy.mm.dd format</span>
|
|
564
|
-
<span slot="helpText">Help Text</span>
|
|
565
|
-
</div>
|
|
566
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
567
|
-
</div>
|
|
568
|
-
<auro-accordion alignRight>
|
|
569
|
-
<span slot="trigger">See code</span>
|
|
570
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale.html) -->
|
|
571
|
-
<!-- The below code snippet is automatically added from ../apiExamples/locale.html -->
|
|
572
|
-
<pre class="language-html"><code class="language-html"><div data-locale="de-DE">
|
|
573
|
-
<auro-input type="date" locale="en-GB">
|
|
574
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
575
|
-
<span slot="label">en-GB Date</span>
|
|
576
|
-
<span slot="helpText">Help Text</span>
|
|
577
|
-
</auro-input>
|
|
578
|
-
<auro-input type="date" locale="en-US">
|
|
579
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
580
|
-
<span slot="label">en-US Date</span>
|
|
581
|
-
<span slot="helpText">Help Text</span>
|
|
582
|
-
</auro-input>
|
|
583
|
-
<auro-input type="date" locale="zh-CN">
|
|
584
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
585
|
-
<span slot="label">zh-CN Date</span>
|
|
586
|
-
<span slot="helpText">Help Text</span>
|
|
587
|
-
</auro-input>
|
|
588
|
-
<auro-input type="date">
|
|
589
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
590
|
-
<span slot="label">Nearest `data-locale` attribute format (`de-DE` in this case)</span>
|
|
591
|
-
<span slot="helpText">Help Text</span>
|
|
592
|
-
</auro-input>
|
|
593
|
-
<auro-input type="date" locale="en-US" format="yyyy.mm.dd">
|
|
594
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
595
|
-
<span slot="label">en-US with yyyy.mm.dd format</span>
|
|
596
|
-
<span slot="helpText">Help Text</span>
|
|
597
|
-
</div></code></pre>
|
|
598
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
599
|
-
</auro-accordion>
|
|
600
530
|
<auro-header level="3" id="inputMode">Input Mode</auro-header>
|
|
601
531
|
<p>Set the <code>inputmode</code> for the input.</p>
|
|
602
532
|
<p><strong>IMPORTANT</strong>: If you are also passing a <code>type</code>, most browsers will use the <code>type</code> attribute to determine what keyboard to display on mobile devices and ignore the <code>inputmode</code> attribute.</p>
|
|
@@ -1437,96 +1367,6 @@
|
|
|
1437
1367
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1438
1368
|
</auro-accordion>
|
|
1439
1369
|
</section>
|
|
1440
|
-
<section>
|
|
1441
|
-
<auro-header level="2" id="auroInputUtil">AuroInputUtil</auro-header>
|
|
1442
|
-
<p>When <code>type="date"</code> is used, the <code>.value</code> property always stores and returns the date in ISO format (<code>YYYY-MM-DD</code>) regardless of the displayed locale or <code>format</code> attribute. Use the <code>AuroInputUtil</code> helper to convert between ISO and any display format in your application code.</p>
|
|
1443
|
-
<auro-header level="3" id="auroInputUtilFormatIso">formatISODate — ISO to display format</auro-header>
|
|
1444
|
-
<p>Use <code>AuroInputUtil.formatISODate(isoStr, format)</code> to convert the ISO value read from the input into any display string. The format argument uses the same tokens as the <code>format</code> attribute (<code>mm</code>, <code>dd</code>, <code>yyyy</code>, <code>yy</code>).</p>
|
|
1445
|
-
<p>Returns <code>undefined</code> when either argument is empty or the ISO string is not a valid date.</p>
|
|
1446
|
-
<div class="exampleWrapper">
|
|
1447
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/format-iso-value.html) -->
|
|
1448
|
-
<!-- The below content is automatically added from ../apiExamples/format-iso-value.html -->
|
|
1449
|
-
<auro-input id="formatIsoExample" type="date" locale="en-US" value="2024-01-15">
|
|
1450
|
-
<span slot="label">Date</span>
|
|
1451
|
-
<span slot="helpText">The <code>.value</code> property always stores the date as ISO (YYYY-MM-DD)</span>
|
|
1452
|
-
</auro-input>
|
|
1453
|
-
<br />
|
|
1454
|
-
<table>
|
|
1455
|
-
<thead>
|
|
1456
|
-
<tr><th>Property / Method</th><th>Result</th></tr>
|
|
1457
|
-
</thead>
|
|
1458
|
-
<tbody>
|
|
1459
|
-
<tr><td><code>.value</code> (ISO)</td><td><code id="isoVal">2024-01-15</code></td></tr>
|
|
1460
|
-
<tr><td><code>formatISODate(value, 'mm/dd/yyyy')</code></td><td><code id="fmtUs">01/15/2024</code></td></tr>
|
|
1461
|
-
<tr><td><code>formatISODate(value, 'dd/mm/yyyy')</code></td><td><code id="fmtGb">15/01/2024</code></td></tr>
|
|
1462
|
-
<tr><td><code>formatISODate(value, 'yyyy/mm/dd')</code></td><td><code id="fmtIso">2024/01/15</code></td></tr>
|
|
1463
|
-
</tbody>
|
|
1464
|
-
</table>
|
|
1465
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1466
|
-
</div>
|
|
1467
|
-
<auro-accordion alignRight>
|
|
1468
|
-
<span slot="trigger">See code</span>
|
|
1469
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/format-iso-value.html) -->
|
|
1470
|
-
<!-- The below code snippet is automatically added from ../apiExamples/format-iso-value.html -->
|
|
1471
|
-
<pre class="language-html"><code class="language-html"><auro-input id="formatIsoExample" type="date" locale="en-US" value="2024-01-15">
|
|
1472
|
-
<span slot="label">Date</span>
|
|
1473
|
-
<span slot="helpText">The <code>.value</code> property always stores the date as ISO (YYYY-MM-DD)</span>
|
|
1474
|
-
</auro-input>
|
|
1475
|
-
<br />
|
|
1476
|
-
<table>
|
|
1477
|
-
<thead>
|
|
1478
|
-
<tr><th>Property / Method</th><th>Result</th></tr>
|
|
1479
|
-
</thead>
|
|
1480
|
-
<tbody>
|
|
1481
|
-
<tr><td><code>.value</code> (ISO)</td><td><code id="isoVal">2024-01-15</code></td></tr>
|
|
1482
|
-
<tr><td><code>formatISODate(value, 'mm/dd/yyyy')</code></td><td><code id="fmtUs">01/15/2024</code></td></tr>
|
|
1483
|
-
<tr><td><code>formatISODate(value, 'dd/mm/yyyy')</code></td><td><code id="fmtGb">15/01/2024</code></td></tr>
|
|
1484
|
-
<tr><td><code>formatISODate(value, 'yyyy/mm/dd')</code></td><td><code id="fmtIso">2024/01/15</code></td></tr>
|
|
1485
|
-
</tbody>
|
|
1486
|
-
</table></code></pre>
|
|
1487
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1488
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/auro-input-util-format-iso.js) -->
|
|
1489
|
-
<!-- The below code snippet is automatically added from ../apiExamples/auro-input-util-format-iso.js -->
|
|
1490
|
-
<pre class="language-js"><code class="language-js">import { AuroInputUtil } from '@aurodesignsystem/auro-formkit/input';
|
|
1491
|
-
|
|
1492
|
-
const input = document.querySelector('auro-input');
|
|
1493
|
-
|
|
1494
|
-
// .value is always ISO, regardless of locale or format attribute
|
|
1495
|
-
const iso = input.value; // e.g. '2024-01-15'
|
|
1496
|
-
|
|
1497
|
-
// Date string that's converted to user's locale and format.
|
|
1498
|
-
AuroInputUtil.formatISODate(iso, input.format);
|
|
1499
|
-
|
|
1500
|
-
// Examples with explicit format:
|
|
1501
|
-
AuroInputUtil.formatISODate(iso, 'mm/dd/yyyy'); // → '01/15/2024'
|
|
1502
|
-
AuroInputUtil.formatISODate(iso, 'dd/mm/yyyy'); // → '15/01/2024'
|
|
1503
|
-
AuroInputUtil.formatISODate(iso, 'yyyy/mm/dd'); // → '2024/01/15'
|
|
1504
|
-
AuroInputUtil.formatISODate(iso, 'dd.mm.yyyy'); // → '15.01.2024'
|
|
1505
|
-
|
|
1506
|
-
// Returns undefined for empty or invalid input
|
|
1507
|
-
AuroInputUtil.formatISODate(undefined, 'mm/dd/yyyy'); // → undefined
|
|
1508
|
-
AuroInputUtil.formatISODate('not-a-date', 'mm/dd/yyyy'); // → undefined</code></pre>
|
|
1509
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1510
|
-
</auro-accordion>
|
|
1511
|
-
</section>
|
|
1512
|
-
<section>
|
|
1513
|
-
<auro-header level="3" id="auroInputUtilToIso">toISOFormatString — Date instance to ISO</auro-header>
|
|
1514
|
-
<p>Use <code>AuroInputUtil.toISOFormatString(date)</code> to convert a JavaScript <code>Date</code> instance into an ISO string suitable for setting <code>input.value</code>.</p>
|
|
1515
|
-
<p>Throws when the argument is not a valid <code>Date</code> instance.</p>
|
|
1516
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/auro-input-util-to-iso.js) -->
|
|
1517
|
-
<!-- The below code snippet is automatically added from ../apiExamples/auro-input-util-to-iso.js -->
|
|
1518
|
-
<pre class="language-js"><code class="language-js">import { AuroInputUtil } from '@aurodesignsystem/auro-formkit/input';
|
|
1519
|
-
|
|
1520
|
-
const input = document.querySelector('auro-input');
|
|
1521
|
-
|
|
1522
|
-
// Convert a Date to ISO, then set it on the input
|
|
1523
|
-
const today = new Date();
|
|
1524
|
-
input.value = AuroInputUtil.toISOFormatString(today); // e.g. '2024-01-15'
|
|
1525
|
-
|
|
1526
|
-
// Convert a specific date
|
|
1527
|
-
AuroInputUtil.toISOFormatString(new Date(2024, 0, 15)); // → '2024-01-15'</code></pre>
|
|
1528
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1529
|
-
</section>
|
|
1530
1370
|
</div>
|
|
1531
1371
|
</div>
|
|
1532
1372
|
</div>
|