Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit b0215ae

Browse files
doboothdobooth
authored
Merge pull request #5831 from serhiyzhovnir/update-UI-Date-component-documentation
Update the UI Date component documentation
2 parents 3b12f19 + fa8a32e commit b0215ae

File tree

3 files changed

+52
-68
lines changed

3 files changed

+52
-68
lines changed

‎common/images/ui_comps/ui-date-expanded-result.png

6.71 KB
Loading

‎common/images/ui_comps/ui-date-result.png

1.02 KB
Loading

‎guides/v2.2/ui_comp_guide/components/ui-date.md

Lines changed: 52 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -7,71 +7,55 @@ The Date component implements a custom date input field. It uses a date picker i
77

88
## Configuration options
99

10-
<table>
11-
<tr>
12-
<th>Option </th>
13-
<th>Description</th>
14-
<th>Type</th>
15-
<th>Default</th>
16-
</tr>
17-
<tr>
18-
<td><code>component</code></td>
19-
<td>The path to the component’s <code>.js</code> file in terms of RequireJS.</td>
20-
<td>String</td>
21-
<td><code>Magento_Ui/js/form/element/date</code></td>
22-
</tr>
23-
<tr>
24-
<td><code>elementTmpl</code></td>
25-
<td>The path to the <code>.html</code> template of the particular field type component (date).</td>
26-
<td>String</td>
27-
<td><code>ui/form/element/date</code></td>
28-
</tr>
29-
<tr>
30-
<td><code>options</code></td>
31-
<td>The configuration object that is passed to the calendar widget.</td>
32-
<td>Object</td>
33-
<td><code>{}</code></td>
34-
</tr>
35-
<tr>
36-
<td><code>inputDateFormat</code></td>
37-
<td>Format of the date received from the server (ICU Date Format). Used only in date picker mode (<code>this.options.showsTime == false</code>).</td>
38-
<td>String</td>
39-
<td><code>y-MM-dd</code></td>
40-
</tr>
41-
<tr>
42-
<td><code>outputDateFormat</code></td>
43-
<td>Format of the date sent to the server (ICU Date Format). Used only in date picker mode (<code>this.options.showsTime == false</code>)</td>
44-
<td>String</td>
45-
<td><code>MM/dd/y</code></td>
46-
</tr>
47-
<tr>
48-
<td><code>pickerDateTimeFormat</code></td>
49-
<td>Date/time format that is used to display date in the input field.</td>
50-
<td>String</td>
51-
<td><code>''</code></td>
52-
</tr>
53-
<tr>
54-
<td><code>shiftedValue</code></td>
55-
<td>Date/time value shifted to corresponding time zone, according to <code>this.storeTimeZone</code> property. This value is sent to the server.</td>
56-
<td>String</td>
57-
<td><code>''</code></td>
58-
</tr>
59-
<tr>
60-
<td><code>storeTimeZone</code></td>
61-
<td>The timezone used.</td>
62-
<td>String</td>
63-
<td><code>'UTC'</code></td>
64-
</tr>
65-
<tr>
66-
<td><code>template</code></td>
67-
<td>The path to the general field <code>.html</code> template.</td>
68-
<td>String</td>
69-
<td><code>ui/form/field</code></td>
70-
</tr>
71-
<tr>
72-
<td><code>timezoneFormat</code></td>
73-
<td>Timezone format, required for the <a href="https://momentjs.com/">moment.js library</a> for conversion.</td>
74-
<td>String</td>
75-
<td><code>YYYY-MM-DD HH:mm</code></td>
76-
</tr>
77-
</table>
10+
| Option | Description | Type | Default |
11+
| --- | --- | --- | --- |
12+
| `component` | The path to the component’s `.js` file in terms of RequireJS. | String | `'Magento_Ui/js/form/element/date'` |
13+
| `elementTmpl` | The path to the `.html` template of the particular field type component (date). | String | `'ui/form/element/date'` |
14+
| `options` | The configuration object that is passed to the calendar widget. | Object | `{}` |
15+
| `inputDateFormat` | Format of the date received from the server (ICU Date Format). Used only in date picker mode (`this.options.showsTime == false`). | String | `'y-MM-dd'` |
16+
| `outputDateFormat` | Format of the date sent to the server (ICU Date Format). Used only in date picker mode (`this.options.showsTime == false`) | String | `'MM/dd/y'` |
17+
| `pickerDateTimeFormat` | Date/time format that is used to display date in the input field. | String | `''` |
18+
| `shiftedValue` | Date/time value shifted to corresponding time zone, according to `this.storeTimeZone` property. This value is sent to the server. | String | `''` |
19+
| `storeTimeZone` | The timezone used. | String | `'UTC'` |
20+
| `template` | The path to the general field `.html` template. | String | `'ui/form/field'` |
21+
| `timezoneFormat` | Timezone format, required for the [moment.js library](https://momentjs.com/) for conversion. | String | `YYYY-MM-DD HH:mm` |
22+
23+
## Source files
24+
25+
Extends [`Abstract`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/form/element/abstract.js)::
26+
27+
- [`app/code/Magento/Ui/view/base/web/js/form/element/date.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/form/element/date.js)
28+
29+
## Example
30+
31+
```xml
32+
<form>
33+
...
34+
<fieldset>
35+
...
36+
<field name="date_example" formElement="date">
37+
<argument name="data" xsi:type="array">
38+
<item name="config" xsi:type="array">
39+
<item name="source" xsi:type="string">some_source</item>
40+
</item>
41+
</argument>
42+
<settings>
43+
<validation>
44+
<rule name="validate-date" xsi:type="boolean">true</rule>
45+
</validation>
46+
<dataType>text</dataType>
47+
<label translate="true">Date Example</label>
48+
<visible>true</visible>
49+
<dataScope>some_scope</dataScope>
50+
</settings>
51+
</field>
52+
...
53+
</fieldset>
54+
...
55+
</form>
56+
```
57+
58+
## Result
59+
60+
![Date Component Example]({{ site.baseurl }}/common/images/ui_comps/ui-date-result.png)
61+
![Date Component Expanded Example]({{ site.baseurl }}/common/images/ui_comps/ui-date-expanded-result.png)

0 commit comments

Comments
 (0)