@vaadin/date-picker 24.0.0-alpha5 → 24.0.0-alpha7
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/src/vaadin-date-picker-mixin.d.ts +54 -0
- package/src/vaadin-date-picker-mixin.js +7 -16
- package/src/vaadin-date-picker-overlay-content.js +2 -2
- package/web-types.json +52 -319
- package/web-types.lit.json +19 -124
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.0.0-
|
|
3
|
+
"version": "24.0.0-alpha7",
|
|
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": "24.0.0-
|
|
40
|
-
"@vaadin/component-base": "24.0.0-
|
|
41
|
-
"@vaadin/field-base": "24.0.0-
|
|
42
|
-
"@vaadin/input-container": "24.0.0-
|
|
43
|
-
"@vaadin/overlay": "24.0.0-
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "24.0.0-
|
|
45
|
-
"@vaadin/vaadin-material-styles": "24.0.0-
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "24.0.0-
|
|
39
|
+
"@vaadin/button": "24.0.0-alpha7",
|
|
40
|
+
"@vaadin/component-base": "24.0.0-alpha7",
|
|
41
|
+
"@vaadin/field-base": "24.0.0-alpha7",
|
|
42
|
+
"@vaadin/input-container": "24.0.0-alpha7",
|
|
43
|
+
"@vaadin/overlay": "24.0.0-alpha7",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha7",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "24.0.0-alpha7",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha7"
|
|
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": "aeb4535336813636736759e0a5de148b26bfc3b6"
|
|
58
58
|
}
|
|
@@ -18,15 +18,69 @@ export interface DatePickerDate {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
export interface DatePickerI18n {
|
|
21
|
+
/**
|
|
22
|
+
* An array with the full names of months starting
|
|
23
|
+
* with January.
|
|
24
|
+
*/
|
|
21
25
|
monthNames: string[];
|
|
26
|
+
/**
|
|
27
|
+
* An array of weekday names starting with Sunday. Used
|
|
28
|
+
* in screen reader announcements.
|
|
29
|
+
*/
|
|
22
30
|
weekdays: string[];
|
|
31
|
+
/**
|
|
32
|
+
* An array of short weekday names starting with Sunday.
|
|
33
|
+
* Displayed in the calendar.
|
|
34
|
+
*/
|
|
23
35
|
weekdaysShort: string[];
|
|
36
|
+
/**
|
|
37
|
+
* An integer indicating the first day of the week
|
|
38
|
+
* (0 = Sunday, 1 = Monday, etc.).
|
|
39
|
+
*/
|
|
24
40
|
firstDayOfWeek: number;
|
|
41
|
+
/**
|
|
42
|
+
* Translation of the Today shortcut button text.
|
|
43
|
+
*/
|
|
25
44
|
today: string;
|
|
45
|
+
/**
|
|
46
|
+
* Translation of the Cancel button text.
|
|
47
|
+
*/
|
|
26
48
|
cancel: string;
|
|
49
|
+
/**
|
|
50
|
+
* Used for adjusting the year value when parsing dates with short years.
|
|
51
|
+
* The year values between 0 and 99 are evaluated and adjusted.
|
|
52
|
+
* Example: for a referenceDate of 1970-10-30;
|
|
53
|
+
* dateToBeParsed: 40-10-30, result: 1940-10-30
|
|
54
|
+
* dateToBeParsed: 80-10-30, result: 1980-10-30
|
|
55
|
+
* dateToBeParsed: 10-10-30, result: 2010-10-30
|
|
56
|
+
* Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
|
|
57
|
+
* The default value is the current date.
|
|
58
|
+
*/
|
|
27
59
|
referenceDate: string;
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.
|
|
63
|
+
* Must properly parse (at least) text formatted by `formatDate`.
|
|
64
|
+
* Setting the property to null will disable keyboard input feature.
|
|
65
|
+
* Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
66
|
+
* @param date
|
|
67
|
+
*/
|
|
28
68
|
parseDate(date: string): DatePickerDate | undefined;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* A function to format given `Object` as
|
|
72
|
+
* date string. Object is in the format `{ day: ..., month: ..., year: ... }`
|
|
73
|
+
* Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
74
|
+
* @param date
|
|
75
|
+
*/
|
|
29
76
|
formatDate(date: DatePickerDate): string;
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* A function to format given `monthName` and
|
|
80
|
+
* `fullYear` integer as calendar title string.
|
|
81
|
+
* @param monthName
|
|
82
|
+
* @param fullYear
|
|
83
|
+
*/
|
|
30
84
|
formatTitle(monthName: string, fullYear: number): string;
|
|
31
85
|
}
|
|
32
86
|
|
|
@@ -399,10 +399,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
399
399
|
|
|
400
400
|
if (!this.opened) {
|
|
401
401
|
if (this.autoOpenDisabled) {
|
|
402
|
-
|
|
403
|
-
if (this._isValidDate(parsedDate)) {
|
|
404
|
-
this._selectDate(parsedDate);
|
|
405
|
-
}
|
|
402
|
+
this._selectParsedOrFocusedDate();
|
|
406
403
|
}
|
|
407
404
|
|
|
408
405
|
this.validate();
|
|
@@ -808,7 +805,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
808
805
|
this._overlayContent.scrollToDate(this._overlayContent.focusedDate || this._overlayContent.initialPosition);
|
|
809
806
|
// Have a default focused date
|
|
810
807
|
this._ignoreFocusedDateChange = true;
|
|
811
|
-
this._overlayContent.focusedDate
|
|
808
|
+
this._overlayContent.focusedDate ||= this._overlayContent.initialPosition;
|
|
812
809
|
this._ignoreFocusedDateChange = false;
|
|
813
810
|
|
|
814
811
|
window.addEventListener('scroll', this._boundOnScroll, true);
|
|
@@ -1023,21 +1020,15 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1023
1020
|
* @override
|
|
1024
1021
|
*/
|
|
1025
1022
|
_onEnter(_event) {
|
|
1026
|
-
const
|
|
1027
|
-
const isValidDate = this._isValidDate(parsedDate);
|
|
1023
|
+
const oldValue = this.value;
|
|
1028
1024
|
if (this.opened) {
|
|
1029
|
-
|
|
1030
|
-
this._selectDate(this._overlayContent.focusedDate);
|
|
1031
|
-
}
|
|
1025
|
+
// Closing will implicitly select parsed or focused date
|
|
1032
1026
|
this.close();
|
|
1033
|
-
} else if (!isValidDate && this.inputElement.value !== '') {
|
|
1034
|
-
this.validate();
|
|
1035
1027
|
} else {
|
|
1036
|
-
const oldValue = this.value;
|
|
1037
1028
|
this._selectParsedOrFocusedDate();
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1029
|
+
}
|
|
1030
|
+
if (oldValue === this.value) {
|
|
1031
|
+
this.validate();
|
|
1041
1032
|
}
|
|
1042
1033
|
}
|
|
1043
1034
|
|
|
@@ -644,7 +644,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
644
644
|
const initialPosition = this._monthScroller.position;
|
|
645
645
|
|
|
646
646
|
const smoothScroll = (timestamp) => {
|
|
647
|
-
start
|
|
647
|
+
start ||= timestamp;
|
|
648
648
|
const currentTime = timestamp - start;
|
|
649
649
|
|
|
650
650
|
if (currentTime < this.scrollDuration) {
|
|
@@ -1004,7 +1004,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
1004
1004
|
|
|
1005
1005
|
const targetMonth = dateToFocus.getMonth();
|
|
1006
1006
|
|
|
1007
|
-
dateToFocus.setDate(
|
|
1007
|
+
dateToFocus.setDate((this._focusedMonthDate ||= focus.getDate()));
|
|
1008
1008
|
if (dateToFocus.getMonth() !== targetMonth) {
|
|
1009
1009
|
dateToFocus.setDate(0);
|
|
1010
1010
|
}
|
package/web-types.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": "24.0.0-
|
|
4
|
+
"version": "24.0.0-alpha7",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,79 +10,6 @@
|
|
|
10
10
|
"name": "vaadin-date-picker-light",
|
|
11
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/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": "value",
|
|
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\"`",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"string"
|
|
19
|
-
]
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"name": "initial-position",
|
|
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.",
|
|
25
|
-
"value": {
|
|
26
|
-
"type": [
|
|
27
|
-
"string",
|
|
28
|
-
"null",
|
|
29
|
-
"undefined"
|
|
30
|
-
]
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
"name": "opened",
|
|
35
|
-
"description": "Set true to open the date selector overlay.",
|
|
36
|
-
"value": {
|
|
37
|
-
"type": [
|
|
38
|
-
"boolean",
|
|
39
|
-
"null",
|
|
40
|
-
"undefined"
|
|
41
|
-
]
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"name": "auto-open-disabled",
|
|
46
|
-
"description": "Set true to prevent the overlay from opening automatically.",
|
|
47
|
-
"value": {
|
|
48
|
-
"type": [
|
|
49
|
-
"boolean",
|
|
50
|
-
"null",
|
|
51
|
-
"undefined"
|
|
52
|
-
]
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
"name": "show-week-numbers",
|
|
57
|
-
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
|
|
58
|
-
"value": {
|
|
59
|
-
"type": [
|
|
60
|
-
"boolean",
|
|
61
|
-
"null",
|
|
62
|
-
"undefined"
|
|
63
|
-
]
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
"name": "min",
|
|
68
|
-
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
69
|
-
"value": {
|
|
70
|
-
"type": [
|
|
71
|
-
"string",
|
|
72
|
-
"undefined"
|
|
73
|
-
]
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
"name": "max",
|
|
78
|
-
"description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
79
|
-
"value": {
|
|
80
|
-
"type": [
|
|
81
|
-
"string",
|
|
82
|
-
"undefined"
|
|
83
|
-
]
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
13
|
{
|
|
87
14
|
"name": "attr-for-value",
|
|
88
15
|
"description": "Name of the two-way data-bindable property representing the\nvalue of the custom input field.",
|
|
@@ -106,88 +33,6 @@
|
|
|
106
33
|
],
|
|
107
34
|
"js": {
|
|
108
35
|
"properties": [
|
|
109
|
-
{
|
|
110
|
-
"name": "value",
|
|
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\"`",
|
|
112
|
-
"value": {
|
|
113
|
-
"type": [
|
|
114
|
-
"string"
|
|
115
|
-
]
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
{
|
|
119
|
-
"name": "initialPosition",
|
|
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.",
|
|
121
|
-
"value": {
|
|
122
|
-
"type": [
|
|
123
|
-
"string",
|
|
124
|
-
"null",
|
|
125
|
-
"undefined"
|
|
126
|
-
]
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"name": "opened",
|
|
131
|
-
"description": "Set true to open the date selector overlay.",
|
|
132
|
-
"value": {
|
|
133
|
-
"type": [
|
|
134
|
-
"boolean",
|
|
135
|
-
"null",
|
|
136
|
-
"undefined"
|
|
137
|
-
]
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
"name": "autoOpenDisabled",
|
|
142
|
-
"description": "Set true to prevent the overlay from opening automatically.",
|
|
143
|
-
"value": {
|
|
144
|
-
"type": [
|
|
145
|
-
"boolean",
|
|
146
|
-
"null",
|
|
147
|
-
"undefined"
|
|
148
|
-
]
|
|
149
|
-
}
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
"name": "showWeekNumbers",
|
|
153
|
-
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
|
|
154
|
-
"value": {
|
|
155
|
-
"type": [
|
|
156
|
-
"boolean",
|
|
157
|
-
"null",
|
|
158
|
-
"undefined"
|
|
159
|
-
]
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"name": "i18n",
|
|
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 // 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```",
|
|
165
|
-
"value": {
|
|
166
|
-
"type": [
|
|
167
|
-
"DatePickerI18n"
|
|
168
|
-
]
|
|
169
|
-
}
|
|
170
|
-
},
|
|
171
|
-
{
|
|
172
|
-
"name": "min",
|
|
173
|
-
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
174
|
-
"value": {
|
|
175
|
-
"type": [
|
|
176
|
-
"string",
|
|
177
|
-
"undefined"
|
|
178
|
-
]
|
|
179
|
-
}
|
|
180
|
-
},
|
|
181
|
-
{
|
|
182
|
-
"name": "max",
|
|
183
|
-
"description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
184
|
-
"value": {
|
|
185
|
-
"type": [
|
|
186
|
-
"string",
|
|
187
|
-
"undefined"
|
|
188
|
-
]
|
|
189
|
-
}
|
|
190
|
-
},
|
|
191
36
|
{
|
|
192
37
|
"name": "attrForValue",
|
|
193
38
|
"description": "Name of the two-way data-bindable property representing the\nvalue of the custom input field.",
|
|
@@ -198,25 +43,12 @@
|
|
|
198
43
|
}
|
|
199
44
|
}
|
|
200
45
|
],
|
|
201
|
-
"events": [
|
|
202
|
-
{
|
|
203
|
-
"name": "change",
|
|
204
|
-
"description": "Fired when the user commits a value change."
|
|
205
|
-
},
|
|
206
|
-
{
|
|
207
|
-
"name": "opened-changed",
|
|
208
|
-
"description": "Fired when `opened` property value changes."
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
"name": "value-changed",
|
|
212
|
-
"description": "Fired when `value` property value changes."
|
|
213
|
-
}
|
|
214
|
-
]
|
|
46
|
+
"events": []
|
|
215
47
|
}
|
|
216
48
|
},
|
|
217
49
|
{
|
|
218
50
|
"name": "vaadin-date-picker",
|
|
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/24.0.0-
|
|
51
|
+
"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/24.0.0-alpha7/#/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\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\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/24.0.0-alpha7/#/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/24.0.0-alpha7/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha7/#/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`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\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`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\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.",
|
|
220
52
|
"attributes": [
|
|
221
53
|
{
|
|
222
54
|
"name": "disabled",
|
|
@@ -297,10 +129,12 @@
|
|
|
297
129
|
},
|
|
298
130
|
{
|
|
299
131
|
"name": "value",
|
|
300
|
-
"description": "
|
|
132
|
+
"description": "The value of the field.",
|
|
301
133
|
"value": {
|
|
302
134
|
"type": [
|
|
303
|
-
"string"
|
|
135
|
+
"string",
|
|
136
|
+
"null",
|
|
137
|
+
"undefined"
|
|
304
138
|
]
|
|
305
139
|
}
|
|
306
140
|
},
|
|
@@ -381,70 +215,6 @@
|
|
|
381
215
|
]
|
|
382
216
|
}
|
|
383
217
|
},
|
|
384
|
-
{
|
|
385
|
-
"name": "initial-position",
|
|
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.",
|
|
387
|
-
"value": {
|
|
388
|
-
"type": [
|
|
389
|
-
"string",
|
|
390
|
-
"null",
|
|
391
|
-
"undefined"
|
|
392
|
-
]
|
|
393
|
-
}
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
"name": "opened",
|
|
397
|
-
"description": "Set true to open the date selector overlay.",
|
|
398
|
-
"value": {
|
|
399
|
-
"type": [
|
|
400
|
-
"boolean",
|
|
401
|
-
"null",
|
|
402
|
-
"undefined"
|
|
403
|
-
]
|
|
404
|
-
}
|
|
405
|
-
},
|
|
406
|
-
{
|
|
407
|
-
"name": "auto-open-disabled",
|
|
408
|
-
"description": "Set true to prevent the overlay from opening automatically.",
|
|
409
|
-
"value": {
|
|
410
|
-
"type": [
|
|
411
|
-
"boolean",
|
|
412
|
-
"null",
|
|
413
|
-
"undefined"
|
|
414
|
-
]
|
|
415
|
-
}
|
|
416
|
-
},
|
|
417
|
-
{
|
|
418
|
-
"name": "show-week-numbers",
|
|
419
|
-
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
|
|
420
|
-
"value": {
|
|
421
|
-
"type": [
|
|
422
|
-
"boolean",
|
|
423
|
-
"null",
|
|
424
|
-
"undefined"
|
|
425
|
-
]
|
|
426
|
-
}
|
|
427
|
-
},
|
|
428
|
-
{
|
|
429
|
-
"name": "min",
|
|
430
|
-
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
431
|
-
"value": {
|
|
432
|
-
"type": [
|
|
433
|
-
"string",
|
|
434
|
-
"undefined"
|
|
435
|
-
]
|
|
436
|
-
}
|
|
437
|
-
},
|
|
438
|
-
{
|
|
439
|
-
"name": "max",
|
|
440
|
-
"description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
441
|
-
"value": {
|
|
442
|
-
"type": [
|
|
443
|
-
"string",
|
|
444
|
-
"undefined"
|
|
445
|
-
]
|
|
446
|
-
}
|
|
447
|
-
},
|
|
448
218
|
{
|
|
449
219
|
"name": "theme",
|
|
450
220
|
"description": "The theme variants to apply to the component.",
|
|
@@ -459,6 +229,44 @@
|
|
|
459
229
|
],
|
|
460
230
|
"js": {
|
|
461
231
|
"properties": [
|
|
232
|
+
{
|
|
233
|
+
"name": "rootPath",
|
|
234
|
+
"description": "",
|
|
235
|
+
"value": {
|
|
236
|
+
"type": [
|
|
237
|
+
"string"
|
|
238
|
+
]
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"name": "importPath",
|
|
243
|
+
"description": "",
|
|
244
|
+
"value": {
|
|
245
|
+
"type": [
|
|
246
|
+
"string"
|
|
247
|
+
]
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"name": "root",
|
|
252
|
+
"description": "",
|
|
253
|
+
"value": {
|
|
254
|
+
"type": [
|
|
255
|
+
"StampedTemplate",
|
|
256
|
+
"HTMLElement",
|
|
257
|
+
"ShadowRoot"
|
|
258
|
+
]
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"name": "$",
|
|
263
|
+
"description": "",
|
|
264
|
+
"value": {
|
|
265
|
+
"type": [
|
|
266
|
+
"Object.<string, Element>"
|
|
267
|
+
]
|
|
268
|
+
}
|
|
269
|
+
},
|
|
462
270
|
{
|
|
463
271
|
"name": "disabled",
|
|
464
272
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -538,10 +346,12 @@
|
|
|
538
346
|
},
|
|
539
347
|
{
|
|
540
348
|
"name": "value",
|
|
541
|
-
"description": "
|
|
349
|
+
"description": "The value of the field.",
|
|
542
350
|
"value": {
|
|
543
351
|
"type": [
|
|
544
|
-
"string"
|
|
352
|
+
"string",
|
|
353
|
+
"null",
|
|
354
|
+
"undefined"
|
|
545
355
|
]
|
|
546
356
|
}
|
|
547
357
|
},
|
|
@@ -621,79 +431,6 @@
|
|
|
621
431
|
"undefined"
|
|
622
432
|
]
|
|
623
433
|
}
|
|
624
|
-
},
|
|
625
|
-
{
|
|
626
|
-
"name": "initialPosition",
|
|
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.",
|
|
628
|
-
"value": {
|
|
629
|
-
"type": [
|
|
630
|
-
"string",
|
|
631
|
-
"null",
|
|
632
|
-
"undefined"
|
|
633
|
-
]
|
|
634
|
-
}
|
|
635
|
-
},
|
|
636
|
-
{
|
|
637
|
-
"name": "opened",
|
|
638
|
-
"description": "Set true to open the date selector overlay.",
|
|
639
|
-
"value": {
|
|
640
|
-
"type": [
|
|
641
|
-
"boolean",
|
|
642
|
-
"null",
|
|
643
|
-
"undefined"
|
|
644
|
-
]
|
|
645
|
-
}
|
|
646
|
-
},
|
|
647
|
-
{
|
|
648
|
-
"name": "autoOpenDisabled",
|
|
649
|
-
"description": "Set true to prevent the overlay from opening automatically.",
|
|
650
|
-
"value": {
|
|
651
|
-
"type": [
|
|
652
|
-
"boolean",
|
|
653
|
-
"null",
|
|
654
|
-
"undefined"
|
|
655
|
-
]
|
|
656
|
-
}
|
|
657
|
-
},
|
|
658
|
-
{
|
|
659
|
-
"name": "showWeekNumbers",
|
|
660
|
-
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
|
|
661
|
-
"value": {
|
|
662
|
-
"type": [
|
|
663
|
-
"boolean",
|
|
664
|
-
"null",
|
|
665
|
-
"undefined"
|
|
666
|
-
]
|
|
667
|
-
}
|
|
668
|
-
},
|
|
669
|
-
{
|
|
670
|
-
"name": "i18n",
|
|
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 // 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```",
|
|
672
|
-
"value": {
|
|
673
|
-
"type": [
|
|
674
|
-
"DatePickerI18n"
|
|
675
|
-
]
|
|
676
|
-
}
|
|
677
|
-
},
|
|
678
|
-
{
|
|
679
|
-
"name": "min",
|
|
680
|
-
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
681
|
-
"value": {
|
|
682
|
-
"type": [
|
|
683
|
-
"string",
|
|
684
|
-
"undefined"
|
|
685
|
-
]
|
|
686
|
-
}
|
|
687
|
-
},
|
|
688
|
-
{
|
|
689
|
-
"name": "max",
|
|
690
|
-
"description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
691
|
-
"value": {
|
|
692
|
-
"type": [
|
|
693
|
-
"string",
|
|
694
|
-
"undefined"
|
|
695
|
-
]
|
|
696
|
-
}
|
|
697
434
|
}
|
|
698
435
|
],
|
|
699
436
|
"events": [
|
|
@@ -710,16 +447,12 @@
|
|
|
710
447
|
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
|
|
711
448
|
},
|
|
712
449
|
{
|
|
713
|
-
"name": "
|
|
714
|
-
"description": "Fired when `
|
|
450
|
+
"name": "invalid-changed",
|
|
451
|
+
"description": "Fired when the `invalid` property changes."
|
|
715
452
|
},
|
|
716
453
|
{
|
|
717
454
|
"name": "value-changed",
|
|
718
|
-
"description": "Fired when `value` property
|
|
719
|
-
},
|
|
720
|
-
{
|
|
721
|
-
"name": "invalid-changed",
|
|
722
|
-
"description": "Fired when the `invalid` property changes."
|
|
455
|
+
"description": "Fired when the `value` property changes."
|
|
723
456
|
}
|
|
724
457
|
]
|
|
725
458
|
}
|
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": "24.0.0-
|
|
4
|
+
"version": "24.0.0-alpha7",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,95 +19,18 @@
|
|
|
19
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/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": "?opened",
|
|
24
|
-
"description": "Set true to open the date selector overlay.",
|
|
25
|
-
"value": {
|
|
26
|
-
"kind": "expression"
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"name": "?autoOpenDisabled",
|
|
31
|
-
"description": "Set true to prevent the overlay from opening automatically.",
|
|
32
|
-
"value": {
|
|
33
|
-
"kind": "expression"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"name": "?showWeekNumbers",
|
|
38
|
-
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
|
|
39
|
-
"value": {
|
|
40
|
-
"kind": "expression"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
"name": ".value",
|
|
45
|
-
"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\"`",
|
|
46
|
-
"value": {
|
|
47
|
-
"kind": "expression"
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": ".initialPosition",
|
|
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.",
|
|
53
|
-
"value": {
|
|
54
|
-
"kind": "expression"
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"name": ".i18n",
|
|
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 // 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```",
|
|
60
|
-
"value": {
|
|
61
|
-
"kind": "expression"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"name": ".min",
|
|
66
|
-
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
67
|
-
"value": {
|
|
68
|
-
"kind": "expression"
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"name": ".max",
|
|
73
|
-
"description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
74
|
-
"value": {
|
|
75
|
-
"kind": "expression"
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
22
|
{
|
|
79
23
|
"name": ".attrForValue",
|
|
80
24
|
"description": "Name of the two-way data-bindable property representing the\nvalue of the custom input field.",
|
|
81
25
|
"value": {
|
|
82
26
|
"kind": "expression"
|
|
83
27
|
}
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
"name": "@change",
|
|
87
|
-
"description": "Fired when the user commits a value change.",
|
|
88
|
-
"value": {
|
|
89
|
-
"kind": "expression"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
"name": "@opened-changed",
|
|
94
|
-
"description": "Fired when `opened` property value changes.",
|
|
95
|
-
"value": {
|
|
96
|
-
"kind": "expression"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"name": "@value-changed",
|
|
101
|
-
"description": "Fired when `value` property value changes.",
|
|
102
|
-
"value": {
|
|
103
|
-
"kind": "expression"
|
|
104
|
-
}
|
|
105
28
|
}
|
|
106
29
|
]
|
|
107
30
|
},
|
|
108
31
|
{
|
|
109
32
|
"name": "vaadin-date-picker",
|
|
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/24.0.0-
|
|
33
|
+
"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/24.0.0-alpha7/#/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\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\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/24.0.0-alpha7/#/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/24.0.0-alpha7/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha7/#/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`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\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`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\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.",
|
|
111
34
|
"extension": true,
|
|
112
35
|
"attributes": [
|
|
113
36
|
{
|
|
@@ -160,22 +83,29 @@
|
|
|
160
83
|
}
|
|
161
84
|
},
|
|
162
85
|
{
|
|
163
|
-
"name": "
|
|
164
|
-
"description": "
|
|
86
|
+
"name": ".rootPath",
|
|
87
|
+
"description": "",
|
|
165
88
|
"value": {
|
|
166
89
|
"kind": "expression"
|
|
167
90
|
}
|
|
168
91
|
},
|
|
169
92
|
{
|
|
170
|
-
"name": "
|
|
171
|
-
"description": "
|
|
93
|
+
"name": ".importPath",
|
|
94
|
+
"description": "",
|
|
172
95
|
"value": {
|
|
173
96
|
"kind": "expression"
|
|
174
97
|
}
|
|
175
98
|
},
|
|
176
99
|
{
|
|
177
|
-
"name": "
|
|
178
|
-
"description": "
|
|
100
|
+
"name": ".root",
|
|
101
|
+
"description": "",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".$",
|
|
108
|
+
"description": "",
|
|
179
109
|
"value": {
|
|
180
110
|
"kind": "expression"
|
|
181
111
|
}
|
|
@@ -203,7 +133,7 @@
|
|
|
203
133
|
},
|
|
204
134
|
{
|
|
205
135
|
"name": ".value",
|
|
206
|
-
"description": "
|
|
136
|
+
"description": "The value of the field.",
|
|
207
137
|
"value": {
|
|
208
138
|
"kind": "expression"
|
|
209
139
|
}
|
|
@@ -236,34 +166,6 @@
|
|
|
236
166
|
"kind": "expression"
|
|
237
167
|
}
|
|
238
168
|
},
|
|
239
|
-
{
|
|
240
|
-
"name": ".initialPosition",
|
|
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.",
|
|
242
|
-
"value": {
|
|
243
|
-
"kind": "expression"
|
|
244
|
-
}
|
|
245
|
-
},
|
|
246
|
-
{
|
|
247
|
-
"name": ".i18n",
|
|
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 // 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```",
|
|
249
|
-
"value": {
|
|
250
|
-
"kind": "expression"
|
|
251
|
-
}
|
|
252
|
-
},
|
|
253
|
-
{
|
|
254
|
-
"name": ".min",
|
|
255
|
-
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
256
|
-
"value": {
|
|
257
|
-
"kind": "expression"
|
|
258
|
-
}
|
|
259
|
-
},
|
|
260
|
-
{
|
|
261
|
-
"name": ".max",
|
|
262
|
-
"description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
263
|
-
"value": {
|
|
264
|
-
"kind": "expression"
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
169
|
{
|
|
268
170
|
"name": "@validated",
|
|
269
171
|
"description": "Fired whenever the field is validated.",
|
|
@@ -286,22 +188,15 @@
|
|
|
286
188
|
}
|
|
287
189
|
},
|
|
288
190
|
{
|
|
289
|
-
"name": "@
|
|
290
|
-
"description": "Fired when `
|
|
191
|
+
"name": "@invalid-changed",
|
|
192
|
+
"description": "Fired when the `invalid` property changes.",
|
|
291
193
|
"value": {
|
|
292
194
|
"kind": "expression"
|
|
293
195
|
}
|
|
294
196
|
},
|
|
295
197
|
{
|
|
296
198
|
"name": "@value-changed",
|
|
297
|
-
"description": "Fired when `value` property
|
|
298
|
-
"value": {
|
|
299
|
-
"kind": "expression"
|
|
300
|
-
}
|
|
301
|
-
},
|
|
302
|
-
{
|
|
303
|
-
"name": "@invalid-changed",
|
|
304
|
-
"description": "Fired when the `invalid` property changes.",
|
|
199
|
+
"description": "Fired when the `value` property changes.",
|
|
305
200
|
"value": {
|
|
306
201
|
"kind": "expression"
|
|
307
202
|
}
|