@vaadin/date-picker 23.3.21 → 23.3.23
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/package.json +10 -10
- package/web-types.json +21 -205
- package/web-types.lit.json +9 -79
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "23.3.
|
|
3
|
+
"version": "23.3.23",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/button": "~23.3.
|
|
40
|
-
"@vaadin/component-base": "~23.3.
|
|
41
|
-
"@vaadin/field-base": "~23.3.
|
|
42
|
-
"@vaadin/input-container": "~23.3.
|
|
43
|
-
"@vaadin/overlay": "~23.3.
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "~23.3.
|
|
45
|
-
"@vaadin/vaadin-material-styles": "~23.3.
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "~23.3.
|
|
39
|
+
"@vaadin/button": "~23.3.23",
|
|
40
|
+
"@vaadin/component-base": "~23.3.23",
|
|
41
|
+
"@vaadin/field-base": "~23.3.23",
|
|
42
|
+
"@vaadin/input-container": "~23.3.23",
|
|
43
|
+
"@vaadin/overlay": "~23.3.23",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "~23.3.23",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "~23.3.23",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "~23.3.23"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "0027e59e0405f668a089c10e75bb488da9a665b8"
|
|
58
58
|
}
|
package/web-types.json
CHANGED
|
@@ -1,37 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-picker",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "23.3.23",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-date-picker-light",
|
|
11
|
-
"description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
|
|
11
|
+
"description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`overlay-content` | The overlay element | vaadin-date-picker-light\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
|
|
12
12
|
"attributes": [
|
|
13
|
-
{
|
|
14
|
-
"name": "disabled",
|
|
15
|
-
"description": "If true, the user cannot interact with this element.",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"boolean",
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"name": "autofocus",
|
|
26
|
-
"description": "Specify that this control should have input focus when the page loads.",
|
|
27
|
-
"value": {
|
|
28
|
-
"type": [
|
|
29
|
-
"boolean",
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
32
|
-
]
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
13
|
{
|
|
36
14
|
"name": "value",
|
|
37
15
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -41,39 +19,6 @@
|
|
|
41
19
|
]
|
|
42
20
|
}
|
|
43
21
|
},
|
|
44
|
-
{
|
|
45
|
-
"name": "invalid",
|
|
46
|
-
"description": "Set to true when the field is invalid.",
|
|
47
|
-
"value": {
|
|
48
|
-
"type": [
|
|
49
|
-
"boolean",
|
|
50
|
-
"null",
|
|
51
|
-
"undefined"
|
|
52
|
-
]
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
"name": "required",
|
|
57
|
-
"description": "Specifies that the user must fill in a value.",
|
|
58
|
-
"value": {
|
|
59
|
-
"type": [
|
|
60
|
-
"boolean",
|
|
61
|
-
"null",
|
|
62
|
-
"undefined"
|
|
63
|
-
]
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
"name": "overlay-class",
|
|
68
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
69
|
-
"value": {
|
|
70
|
-
"type": [
|
|
71
|
-
"string",
|
|
72
|
-
"null",
|
|
73
|
-
"undefined"
|
|
74
|
-
]
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
22
|
{
|
|
78
23
|
"name": "initial-position",
|
|
79
24
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -161,28 +106,6 @@
|
|
|
161
106
|
],
|
|
162
107
|
"js": {
|
|
163
108
|
"properties": [
|
|
164
|
-
{
|
|
165
|
-
"name": "disabled",
|
|
166
|
-
"description": "If true, the user cannot interact with this element.",
|
|
167
|
-
"value": {
|
|
168
|
-
"type": [
|
|
169
|
-
"boolean",
|
|
170
|
-
"null",
|
|
171
|
-
"undefined"
|
|
172
|
-
]
|
|
173
|
-
}
|
|
174
|
-
},
|
|
175
|
-
{
|
|
176
|
-
"name": "autofocus",
|
|
177
|
-
"description": "Specify that this control should have input focus when the page loads.",
|
|
178
|
-
"value": {
|
|
179
|
-
"type": [
|
|
180
|
-
"boolean",
|
|
181
|
-
"null",
|
|
182
|
-
"undefined"
|
|
183
|
-
]
|
|
184
|
-
}
|
|
185
|
-
},
|
|
186
109
|
{
|
|
187
110
|
"name": "value",
|
|
188
111
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -192,39 +115,6 @@
|
|
|
192
115
|
]
|
|
193
116
|
}
|
|
194
117
|
},
|
|
195
|
-
{
|
|
196
|
-
"name": "invalid",
|
|
197
|
-
"description": "Set to true when the field is invalid.",
|
|
198
|
-
"value": {
|
|
199
|
-
"type": [
|
|
200
|
-
"boolean",
|
|
201
|
-
"null",
|
|
202
|
-
"undefined"
|
|
203
|
-
]
|
|
204
|
-
}
|
|
205
|
-
},
|
|
206
|
-
{
|
|
207
|
-
"name": "required",
|
|
208
|
-
"description": "Specifies that the user must fill in a value.",
|
|
209
|
-
"value": {
|
|
210
|
-
"type": [
|
|
211
|
-
"boolean",
|
|
212
|
-
"null",
|
|
213
|
-
"undefined"
|
|
214
|
-
]
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"name": "overlayClass",
|
|
219
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
220
|
-
"value": {
|
|
221
|
-
"type": [
|
|
222
|
-
"string",
|
|
223
|
-
"null",
|
|
224
|
-
"undefined"
|
|
225
|
-
]
|
|
226
|
-
}
|
|
227
|
-
},
|
|
228
118
|
{
|
|
229
119
|
"name": "initialPosition",
|
|
230
120
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -271,7 +161,7 @@
|
|
|
271
161
|
},
|
|
272
162
|
{
|
|
273
163
|
"name": "i18n",
|
|
274
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
164
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Used in screen reader announcements along with week\n // numbers, if they are displayed.\n week: 'Week',\n\n // Translation of the Calendar icon button title.\n calendar: 'Calendar',\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
275
165
|
"value": {
|
|
276
166
|
"type": [
|
|
277
167
|
"DatePickerI18n"
|
|
@@ -309,10 +199,6 @@
|
|
|
309
199
|
}
|
|
310
200
|
],
|
|
311
201
|
"events": [
|
|
312
|
-
{
|
|
313
|
-
"name": "validated",
|
|
314
|
-
"description": "Fired whenever the field is validated."
|
|
315
|
-
},
|
|
316
202
|
{
|
|
317
203
|
"name": "change",
|
|
318
204
|
"description": "Fired when the user commits a value change."
|
|
@@ -324,17 +210,13 @@
|
|
|
324
210
|
{
|
|
325
211
|
"name": "value-changed",
|
|
326
212
|
"description": "Fired when `value` property value changes."
|
|
327
|
-
},
|
|
328
|
-
{
|
|
329
|
-
"name": "invalid-changed",
|
|
330
|
-
"description": "Fired when the `invalid` property changes."
|
|
331
213
|
}
|
|
332
214
|
]
|
|
333
215
|
}
|
|
334
216
|
},
|
|
335
217
|
{
|
|
336
218
|
"name": "vaadin-date-picker",
|
|
337
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/
|
|
219
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n`overlay-content` | The overlay element\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n`today` | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date | date\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`months` | Months scroller\n`years` | Years scroller\n`toolbar` | Footer bar with buttons\n`today-button` | Today button\n`cancel-button` | Cancel button\n`month` | Month calendar\n`year-number` | Year number\n`year-separator` | Year separator\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
338
220
|
"attributes": [
|
|
339
221
|
{
|
|
340
222
|
"name": "disabled",
|
|
@@ -413,28 +295,6 @@
|
|
|
413
295
|
]
|
|
414
296
|
}
|
|
415
297
|
},
|
|
416
|
-
{
|
|
417
|
-
"name": "accessible-name",
|
|
418
|
-
"description": "String used to label the component to screen reader users.",
|
|
419
|
-
"value": {
|
|
420
|
-
"type": [
|
|
421
|
-
"string",
|
|
422
|
-
"null",
|
|
423
|
-
"undefined"
|
|
424
|
-
]
|
|
425
|
-
}
|
|
426
|
-
},
|
|
427
|
-
{
|
|
428
|
-
"name": "accessible-name-ref",
|
|
429
|
-
"description": "Id of the element used as label of the component to screen reader users.",
|
|
430
|
-
"value": {
|
|
431
|
-
"type": [
|
|
432
|
-
"string",
|
|
433
|
-
"null",
|
|
434
|
-
"undefined"
|
|
435
|
-
]
|
|
436
|
-
}
|
|
437
|
-
},
|
|
438
298
|
{
|
|
439
299
|
"name": "value",
|
|
440
300
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -445,30 +305,30 @@
|
|
|
445
305
|
}
|
|
446
306
|
},
|
|
447
307
|
{
|
|
448
|
-
"name": "
|
|
449
|
-
"description": "
|
|
308
|
+
"name": "allowed-char-pattern",
|
|
309
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
450
310
|
"value": {
|
|
451
311
|
"type": [
|
|
452
|
-
"
|
|
312
|
+
"string",
|
|
453
313
|
"null",
|
|
454
314
|
"undefined"
|
|
455
315
|
]
|
|
456
316
|
}
|
|
457
317
|
},
|
|
458
318
|
{
|
|
459
|
-
"name": "
|
|
460
|
-
"description": "
|
|
319
|
+
"name": "autoselect",
|
|
320
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
461
321
|
"value": {
|
|
462
322
|
"type": [
|
|
463
|
-
"
|
|
323
|
+
"boolean",
|
|
464
324
|
"null",
|
|
465
325
|
"undefined"
|
|
466
326
|
]
|
|
467
327
|
}
|
|
468
328
|
},
|
|
469
329
|
{
|
|
470
|
-
"name": "
|
|
471
|
-
"description": "
|
|
330
|
+
"name": "clear-button-visible",
|
|
331
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
472
332
|
"value": {
|
|
473
333
|
"type": [
|
|
474
334
|
"boolean",
|
|
@@ -521,17 +381,6 @@
|
|
|
521
381
|
]
|
|
522
382
|
}
|
|
523
383
|
},
|
|
524
|
-
{
|
|
525
|
-
"name": "overlay-class",
|
|
526
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
527
|
-
"value": {
|
|
528
|
-
"type": [
|
|
529
|
-
"string",
|
|
530
|
-
"null",
|
|
531
|
-
"undefined"
|
|
532
|
-
]
|
|
533
|
-
}
|
|
534
|
-
},
|
|
535
384
|
{
|
|
536
385
|
"name": "initial-position",
|
|
537
386
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -687,28 +536,6 @@
|
|
|
687
536
|
]
|
|
688
537
|
}
|
|
689
538
|
},
|
|
690
|
-
{
|
|
691
|
-
"name": "accessibleName",
|
|
692
|
-
"description": "String used to label the component to screen reader users.",
|
|
693
|
-
"value": {
|
|
694
|
-
"type": [
|
|
695
|
-
"string",
|
|
696
|
-
"null",
|
|
697
|
-
"undefined"
|
|
698
|
-
]
|
|
699
|
-
}
|
|
700
|
-
},
|
|
701
|
-
{
|
|
702
|
-
"name": "accessibleNameRef",
|
|
703
|
-
"description": "Id of the element used as label of the component to screen reader users.",
|
|
704
|
-
"value": {
|
|
705
|
-
"type": [
|
|
706
|
-
"string",
|
|
707
|
-
"null",
|
|
708
|
-
"undefined"
|
|
709
|
-
]
|
|
710
|
-
}
|
|
711
|
-
},
|
|
712
539
|
{
|
|
713
540
|
"name": "value",
|
|
714
541
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -719,30 +546,30 @@
|
|
|
719
546
|
}
|
|
720
547
|
},
|
|
721
548
|
{
|
|
722
|
-
"name": "
|
|
723
|
-
"description": "
|
|
549
|
+
"name": "allowedCharPattern",
|
|
550
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
724
551
|
"value": {
|
|
725
552
|
"type": [
|
|
726
|
-
"
|
|
553
|
+
"string",
|
|
727
554
|
"null",
|
|
728
555
|
"undefined"
|
|
729
556
|
]
|
|
730
557
|
}
|
|
731
558
|
},
|
|
732
559
|
{
|
|
733
|
-
"name": "
|
|
734
|
-
"description": "
|
|
560
|
+
"name": "autoselect",
|
|
561
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
735
562
|
"value": {
|
|
736
563
|
"type": [
|
|
737
|
-
"
|
|
564
|
+
"boolean",
|
|
738
565
|
"null",
|
|
739
566
|
"undefined"
|
|
740
567
|
]
|
|
741
568
|
}
|
|
742
569
|
},
|
|
743
570
|
{
|
|
744
|
-
"name": "
|
|
745
|
-
"description": "
|
|
571
|
+
"name": "clearButtonVisible",
|
|
572
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
746
573
|
"value": {
|
|
747
574
|
"type": [
|
|
748
575
|
"boolean",
|
|
@@ -795,17 +622,6 @@
|
|
|
795
622
|
]
|
|
796
623
|
}
|
|
797
624
|
},
|
|
798
|
-
{
|
|
799
|
-
"name": "overlayClass",
|
|
800
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
801
|
-
"value": {
|
|
802
|
-
"type": [
|
|
803
|
-
"string",
|
|
804
|
-
"null",
|
|
805
|
-
"undefined"
|
|
806
|
-
]
|
|
807
|
-
}
|
|
808
|
-
},
|
|
809
625
|
{
|
|
810
626
|
"name": "initialPosition",
|
|
811
627
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -852,7 +668,7 @@
|
|
|
852
668
|
},
|
|
853
669
|
{
|
|
854
670
|
"name": "i18n",
|
|
855
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
671
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Used in screen reader announcements along with week\n // numbers, if they are displayed.\n week: 'Week',\n\n // Translation of the Calendar icon button title.\n calendar: 'Calendar',\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
856
672
|
"value": {
|
|
857
673
|
"type": [
|
|
858
674
|
"DatePickerI18n"
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-picker",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "23.3.23",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,37 +16,9 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-date-picker-light",
|
|
19
|
-
"description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
|
|
19
|
+
"description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`overlay-content` | The overlay element | vaadin-date-picker-light\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
-
{
|
|
23
|
-
"name": "?disabled",
|
|
24
|
-
"description": "If true, the user cannot interact with this element.",
|
|
25
|
-
"value": {
|
|
26
|
-
"kind": "expression"
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"name": "?autofocus",
|
|
31
|
-
"description": "Specify that this control should have input focus when the page loads.",
|
|
32
|
-
"value": {
|
|
33
|
-
"kind": "expression"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"name": "?invalid",
|
|
38
|
-
"description": "Set to true when the field is invalid.",
|
|
39
|
-
"value": {
|
|
40
|
-
"kind": "expression"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
"name": "?required",
|
|
45
|
-
"description": "Specifies that the user must fill in a value.",
|
|
46
|
-
"value": {
|
|
47
|
-
"kind": "expression"
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
22
|
{
|
|
51
23
|
"name": "?opened",
|
|
52
24
|
"description": "Set true to open the date selector overlay.",
|
|
@@ -75,13 +47,6 @@
|
|
|
75
47
|
"kind": "expression"
|
|
76
48
|
}
|
|
77
49
|
},
|
|
78
|
-
{
|
|
79
|
-
"name": ".overlayClass",
|
|
80
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
81
|
-
"value": {
|
|
82
|
-
"kind": "expression"
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
50
|
{
|
|
86
51
|
"name": ".initialPosition",
|
|
87
52
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -91,7 +56,7 @@
|
|
|
91
56
|
},
|
|
92
57
|
{
|
|
93
58
|
"name": ".i18n",
|
|
94
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
59
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Used in screen reader announcements along with week\n // numbers, if they are displayed.\n week: 'Week',\n\n // Translation of the Calendar icon button title.\n calendar: 'Calendar',\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
95
60
|
"value": {
|
|
96
61
|
"kind": "expression"
|
|
97
62
|
}
|
|
@@ -117,13 +82,6 @@
|
|
|
117
82
|
"kind": "expression"
|
|
118
83
|
}
|
|
119
84
|
},
|
|
120
|
-
{
|
|
121
|
-
"name": "@validated",
|
|
122
|
-
"description": "Fired whenever the field is validated.",
|
|
123
|
-
"value": {
|
|
124
|
-
"kind": "expression"
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
85
|
{
|
|
128
86
|
"name": "@change",
|
|
129
87
|
"description": "Fired when the user commits a value change.",
|
|
@@ -144,19 +102,12 @@
|
|
|
144
102
|
"value": {
|
|
145
103
|
"kind": "expression"
|
|
146
104
|
}
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
"name": "@invalid-changed",
|
|
150
|
-
"description": "Fired when the `invalid` property changes.",
|
|
151
|
-
"value": {
|
|
152
|
-
"kind": "expression"
|
|
153
|
-
}
|
|
154
105
|
}
|
|
155
106
|
]
|
|
156
107
|
},
|
|
157
108
|
{
|
|
158
109
|
"name": "vaadin-date-picker",
|
|
159
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/
|
|
110
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n`overlay-content` | The overlay element\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n`today` | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date | date\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`months` | Months scroller\n`years` | Years scroller\n`toolbar` | Footer bar with buttons\n`today-button` | Today button\n`cancel-button` | Cancel button\n`month` | Month calendar\n`year-number` | Year number\n`year-separator` | Year separator\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
160
111
|
"extension": true,
|
|
161
112
|
"attributes": [
|
|
162
113
|
{
|
|
@@ -188,15 +139,15 @@
|
|
|
188
139
|
}
|
|
189
140
|
},
|
|
190
141
|
{
|
|
191
|
-
"name": "?
|
|
192
|
-
"description": "
|
|
142
|
+
"name": "?autoselect",
|
|
143
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
193
144
|
"value": {
|
|
194
145
|
"kind": "expression"
|
|
195
146
|
}
|
|
196
147
|
},
|
|
197
148
|
{
|
|
198
|
-
"name": "?
|
|
199
|
-
"description": "
|
|
149
|
+
"name": "?clearButtonVisible",
|
|
150
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
200
151
|
"value": {
|
|
201
152
|
"kind": "expression"
|
|
202
153
|
}
|
|
@@ -250,20 +201,6 @@
|
|
|
250
201
|
"kind": "expression"
|
|
251
202
|
}
|
|
252
203
|
},
|
|
253
|
-
{
|
|
254
|
-
"name": ".accessibleName",
|
|
255
|
-
"description": "String used to label the component to screen reader users.",
|
|
256
|
-
"value": {
|
|
257
|
-
"kind": "expression"
|
|
258
|
-
}
|
|
259
|
-
},
|
|
260
|
-
{
|
|
261
|
-
"name": ".accessibleNameRef",
|
|
262
|
-
"description": "Id of the element used as label of the component to screen reader users.",
|
|
263
|
-
"value": {
|
|
264
|
-
"kind": "expression"
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
204
|
{
|
|
268
205
|
"name": ".value",
|
|
269
206
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -299,13 +236,6 @@
|
|
|
299
236
|
"kind": "expression"
|
|
300
237
|
}
|
|
301
238
|
},
|
|
302
|
-
{
|
|
303
|
-
"name": ".overlayClass",
|
|
304
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
305
|
-
"value": {
|
|
306
|
-
"kind": "expression"
|
|
307
|
-
}
|
|
308
|
-
},
|
|
309
239
|
{
|
|
310
240
|
"name": ".initialPosition",
|
|
311
241
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -315,7 +245,7 @@
|
|
|
315
245
|
},
|
|
316
246
|
{
|
|
317
247
|
"name": ".i18n",
|
|
318
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
248
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Used in screen reader announcements along with week\n // numbers, if they are displayed.\n week: 'Week',\n\n // Translation of the Calendar icon button title.\n calendar: 'Calendar',\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
319
249
|
"value": {
|
|
320
250
|
"kind": "expression"
|
|
321
251
|
}
|