@vaadin/date-time-picker 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1
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/README.md +0 -1
- package/package.json +11 -11
- package/src/vaadin-date-time-picker.d.ts +1 -1
- package/src/vaadin-date-time-picker.js +5 -2
- package/theme/lumo/vaadin-date-time-picker-styles.d.ts +2 -0
- package/theme/lumo/vaadin-date-time-picker.d.ts +2 -0
- package/theme/material/vaadin-date-time-picker-styles.d.ts +2 -0
- package/theme/material/vaadin-date-time-picker.d.ts +2 -0
- package/web-types.json +506 -0
- package/web-types.lit.json +209 -0
package/README.md
CHANGED
|
@@ -5,7 +5,6 @@ An input field web component for selecting both a date and a time.
|
|
|
5
5
|
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/date-time-picker)
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@vaadin/date-time-picker)
|
|
8
|
-
[](https://discord.gg/PHmkCKC)
|
|
9
8
|
|
|
10
9
|
```html
|
|
11
10
|
<vaadin-date-time-picker></vaadin-date-time-picker>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-time-picker",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.5.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.
|
|
40
|
-
"@vaadin/component-base": "24.
|
|
41
|
-
"@vaadin/custom-field": "24.
|
|
42
|
-
"@vaadin/date-picker": "24.
|
|
43
|
-
"@vaadin/field-base": "24.
|
|
44
|
-
"@vaadin/time-picker": "24.
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.
|
|
39
|
+
"@vaadin/a11y-base": "24.5.0-alpha1",
|
|
40
|
+
"@vaadin/component-base": "24.5.0-alpha1",
|
|
41
|
+
"@vaadin/custom-field": "24.5.0-alpha1",
|
|
42
|
+
"@vaadin/date-picker": "24.5.0-alpha1",
|
|
43
|
+
"@vaadin/field-base": "24.5.0-alpha1",
|
|
44
|
+
"@vaadin/time-picker": "24.5.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.5.0-alpha1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
|
|
59
59
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2019 -
|
|
3
|
+
* Copyright (c) 2019 - 2024 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2019 -
|
|
3
|
+
* Copyright (c) 2019 - 2024 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
@@ -298,6 +298,7 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
298
298
|
*/
|
|
299
299
|
showWeekNumbers: {
|
|
300
300
|
type: Boolean,
|
|
301
|
+
value: false,
|
|
301
302
|
},
|
|
302
303
|
|
|
303
304
|
/**
|
|
@@ -455,7 +456,9 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
455
456
|
}
|
|
456
457
|
|
|
457
458
|
focus() {
|
|
458
|
-
this.__datePicker
|
|
459
|
+
if (this.__datePicker) {
|
|
460
|
+
this.__datePicker.focus();
|
|
461
|
+
}
|
|
459
462
|
}
|
|
460
463
|
|
|
461
464
|
/**
|
package/web-types.json
ADDED
|
@@ -0,0 +1,506 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/date-time-picker",
|
|
4
|
+
"version": "24.5.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-date-time-picker",
|
|
11
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
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": "label",
|
|
26
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"string",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "invalid",
|
|
37
|
+
"description": "Set to true when the field is invalid.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"boolean",
|
|
41
|
+
"null",
|
|
42
|
+
"undefined"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "required",
|
|
48
|
+
"description": "Specifies that the user must fill in a value.",
|
|
49
|
+
"value": {
|
|
50
|
+
"type": [
|
|
51
|
+
"boolean",
|
|
52
|
+
"null",
|
|
53
|
+
"undefined"
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "error-message",
|
|
59
|
+
"description": "Error to show when the field is invalid.",
|
|
60
|
+
"value": {
|
|
61
|
+
"type": [
|
|
62
|
+
"string",
|
|
63
|
+
"null",
|
|
64
|
+
"undefined"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "helper-text",
|
|
70
|
+
"description": "String used for the helper text.",
|
|
71
|
+
"value": {
|
|
72
|
+
"type": [
|
|
73
|
+
"string",
|
|
74
|
+
"null",
|
|
75
|
+
"undefined"
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "accessible-name",
|
|
81
|
+
"description": "String used to label the component to screen reader users.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"string",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "accessible-name-ref",
|
|
92
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
93
|
+
"value": {
|
|
94
|
+
"type": [
|
|
95
|
+
"string",
|
|
96
|
+
"null",
|
|
97
|
+
"undefined"
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "name",
|
|
103
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
104
|
+
"value": {
|
|
105
|
+
"type": [
|
|
106
|
+
"string",
|
|
107
|
+
"null",
|
|
108
|
+
"undefined"
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "value",
|
|
114
|
+
"description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
115
|
+
"value": {
|
|
116
|
+
"type": [
|
|
117
|
+
"string"
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "min",
|
|
123
|
+
"description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
124
|
+
"value": {
|
|
125
|
+
"type": [
|
|
126
|
+
"string",
|
|
127
|
+
"undefined"
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"name": "max",
|
|
133
|
+
"description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
134
|
+
"value": {
|
|
135
|
+
"type": [
|
|
136
|
+
"string",
|
|
137
|
+
"undefined"
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "date-placeholder",
|
|
143
|
+
"description": "A placeholder string for the date field.",
|
|
144
|
+
"value": {
|
|
145
|
+
"type": [
|
|
146
|
+
"string",
|
|
147
|
+
"null",
|
|
148
|
+
"undefined"
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "time-placeholder",
|
|
154
|
+
"description": "A placeholder string for the time field.",
|
|
155
|
+
"value": {
|
|
156
|
+
"type": [
|
|
157
|
+
"string",
|
|
158
|
+
"null",
|
|
159
|
+
"undefined"
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"name": "step",
|
|
165
|
+
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
|
|
166
|
+
"value": {
|
|
167
|
+
"type": [
|
|
168
|
+
"number",
|
|
169
|
+
"null",
|
|
170
|
+
"undefined"
|
|
171
|
+
]
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"name": "initial-position",
|
|
176
|
+
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
|
|
177
|
+
"value": {
|
|
178
|
+
"type": [
|
|
179
|
+
"string",
|
|
180
|
+
"null",
|
|
181
|
+
"undefined"
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"name": "show-week-numbers",
|
|
187
|
+
"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).",
|
|
188
|
+
"value": {
|
|
189
|
+
"type": [
|
|
190
|
+
"boolean",
|
|
191
|
+
"null",
|
|
192
|
+
"undefined"
|
|
193
|
+
]
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"name": "auto-open-disabled",
|
|
198
|
+
"description": "Set to true to prevent the overlays from opening automatically.",
|
|
199
|
+
"value": {
|
|
200
|
+
"type": [
|
|
201
|
+
"boolean",
|
|
202
|
+
"null",
|
|
203
|
+
"undefined"
|
|
204
|
+
]
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"name": "readonly",
|
|
209
|
+
"description": "Set to true to make this element read-only.",
|
|
210
|
+
"value": {
|
|
211
|
+
"type": [
|
|
212
|
+
"boolean"
|
|
213
|
+
]
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"name": "autofocus",
|
|
218
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
219
|
+
"value": {
|
|
220
|
+
"type": [
|
|
221
|
+
"boolean"
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"name": "overlay-class",
|
|
227
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
228
|
+
"value": {
|
|
229
|
+
"type": [
|
|
230
|
+
"string",
|
|
231
|
+
"null",
|
|
232
|
+
"undefined"
|
|
233
|
+
]
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"name": "theme",
|
|
238
|
+
"description": "The theme variants to apply to the component.",
|
|
239
|
+
"value": {
|
|
240
|
+
"type": [
|
|
241
|
+
"string",
|
|
242
|
+
"null",
|
|
243
|
+
"undefined"
|
|
244
|
+
]
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
],
|
|
248
|
+
"js": {
|
|
249
|
+
"properties": [
|
|
250
|
+
{
|
|
251
|
+
"name": "disabled",
|
|
252
|
+
"description": "If true, the user cannot interact with this element.",
|
|
253
|
+
"value": {
|
|
254
|
+
"type": [
|
|
255
|
+
"boolean",
|
|
256
|
+
"null",
|
|
257
|
+
"undefined"
|
|
258
|
+
]
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"name": "label",
|
|
263
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
264
|
+
"value": {
|
|
265
|
+
"type": [
|
|
266
|
+
"string",
|
|
267
|
+
"null",
|
|
268
|
+
"undefined"
|
|
269
|
+
]
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"name": "invalid",
|
|
274
|
+
"description": "Set to true when the field is invalid.",
|
|
275
|
+
"value": {
|
|
276
|
+
"type": [
|
|
277
|
+
"boolean",
|
|
278
|
+
"null",
|
|
279
|
+
"undefined"
|
|
280
|
+
]
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
"name": "required",
|
|
285
|
+
"description": "Specifies that the user must fill in a value.",
|
|
286
|
+
"value": {
|
|
287
|
+
"type": [
|
|
288
|
+
"boolean",
|
|
289
|
+
"null",
|
|
290
|
+
"undefined"
|
|
291
|
+
]
|
|
292
|
+
}
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
"name": "errorMessage",
|
|
296
|
+
"description": "Error to show when the field is invalid.",
|
|
297
|
+
"value": {
|
|
298
|
+
"type": [
|
|
299
|
+
"string",
|
|
300
|
+
"null",
|
|
301
|
+
"undefined"
|
|
302
|
+
]
|
|
303
|
+
}
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "helperText",
|
|
307
|
+
"description": "String used for the helper text.",
|
|
308
|
+
"value": {
|
|
309
|
+
"type": [
|
|
310
|
+
"string",
|
|
311
|
+
"null",
|
|
312
|
+
"undefined"
|
|
313
|
+
]
|
|
314
|
+
}
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"name": "accessibleName",
|
|
318
|
+
"description": "String used to label the component to screen reader users.",
|
|
319
|
+
"value": {
|
|
320
|
+
"type": [
|
|
321
|
+
"string",
|
|
322
|
+
"null",
|
|
323
|
+
"undefined"
|
|
324
|
+
]
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"name": "accessibleNameRef",
|
|
329
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
330
|
+
"value": {
|
|
331
|
+
"type": [
|
|
332
|
+
"string",
|
|
333
|
+
"null",
|
|
334
|
+
"undefined"
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "name",
|
|
340
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
341
|
+
"value": {
|
|
342
|
+
"type": [
|
|
343
|
+
"string",
|
|
344
|
+
"null",
|
|
345
|
+
"undefined"
|
|
346
|
+
]
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"name": "value",
|
|
351
|
+
"description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
352
|
+
"value": {
|
|
353
|
+
"type": [
|
|
354
|
+
"string"
|
|
355
|
+
]
|
|
356
|
+
}
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": "min",
|
|
360
|
+
"description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
361
|
+
"value": {
|
|
362
|
+
"type": [
|
|
363
|
+
"string",
|
|
364
|
+
"undefined"
|
|
365
|
+
]
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "max",
|
|
370
|
+
"description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
371
|
+
"value": {
|
|
372
|
+
"type": [
|
|
373
|
+
"string",
|
|
374
|
+
"undefined"
|
|
375
|
+
]
|
|
376
|
+
}
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"name": "datePlaceholder",
|
|
380
|
+
"description": "A placeholder string for the date field.",
|
|
381
|
+
"value": {
|
|
382
|
+
"type": [
|
|
383
|
+
"string",
|
|
384
|
+
"null",
|
|
385
|
+
"undefined"
|
|
386
|
+
]
|
|
387
|
+
}
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"name": "timePlaceholder",
|
|
391
|
+
"description": "A placeholder string for the time field.",
|
|
392
|
+
"value": {
|
|
393
|
+
"type": [
|
|
394
|
+
"string",
|
|
395
|
+
"null",
|
|
396
|
+
"undefined"
|
|
397
|
+
]
|
|
398
|
+
}
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
"name": "step",
|
|
402
|
+
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
|
|
403
|
+
"value": {
|
|
404
|
+
"type": [
|
|
405
|
+
"number",
|
|
406
|
+
"null",
|
|
407
|
+
"undefined"
|
|
408
|
+
]
|
|
409
|
+
}
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
"name": "initialPosition",
|
|
413
|
+
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
|
|
414
|
+
"value": {
|
|
415
|
+
"type": [
|
|
416
|
+
"string",
|
|
417
|
+
"null",
|
|
418
|
+
"undefined"
|
|
419
|
+
]
|
|
420
|
+
}
|
|
421
|
+
},
|
|
422
|
+
{
|
|
423
|
+
"name": "showWeekNumbers",
|
|
424
|
+
"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).",
|
|
425
|
+
"value": {
|
|
426
|
+
"type": [
|
|
427
|
+
"boolean",
|
|
428
|
+
"null",
|
|
429
|
+
"undefined"
|
|
430
|
+
]
|
|
431
|
+
}
|
|
432
|
+
},
|
|
433
|
+
{
|
|
434
|
+
"name": "autoOpenDisabled",
|
|
435
|
+
"description": "Set to true to prevent the overlays from opening automatically.",
|
|
436
|
+
"value": {
|
|
437
|
+
"type": [
|
|
438
|
+
"boolean",
|
|
439
|
+
"null",
|
|
440
|
+
"undefined"
|
|
441
|
+
]
|
|
442
|
+
}
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"name": "readonly",
|
|
446
|
+
"description": "Set to true to make this element read-only.",
|
|
447
|
+
"value": {
|
|
448
|
+
"type": [
|
|
449
|
+
"boolean"
|
|
450
|
+
]
|
|
451
|
+
}
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
"name": "autofocus",
|
|
455
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
456
|
+
"value": {
|
|
457
|
+
"type": [
|
|
458
|
+
"boolean"
|
|
459
|
+
]
|
|
460
|
+
}
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
"name": "i18n",
|
|
464
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-time-picker).",
|
|
465
|
+
"value": {
|
|
466
|
+
"type": [
|
|
467
|
+
"DateTimePickerI18n"
|
|
468
|
+
]
|
|
469
|
+
}
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"name": "overlayClass",
|
|
473
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
474
|
+
"value": {
|
|
475
|
+
"type": [
|
|
476
|
+
"string",
|
|
477
|
+
"null",
|
|
478
|
+
"undefined"
|
|
479
|
+
]
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
],
|
|
483
|
+
"events": [
|
|
484
|
+
{
|
|
485
|
+
"name": "validated",
|
|
486
|
+
"description": "Fired whenever the field is validated."
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
"name": "change",
|
|
490
|
+
"description": "Fired when the user commits a value change."
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
"name": "value-changed",
|
|
494
|
+
"description": "Fired when the `value` property changes."
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
"name": "invalid-changed",
|
|
498
|
+
"description": "Fired when the `invalid` property changes."
|
|
499
|
+
}
|
|
500
|
+
]
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
]
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
}
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/date-time-picker",
|
|
4
|
+
"version": "24.5.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-date-time-picker",
|
|
19
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
|
+
"extension": true,
|
|
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": "?invalid",
|
|
31
|
+
"description": "Set to true when the field is invalid.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?required",
|
|
38
|
+
"description": "Specifies that the user must fill in a value.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?showWeekNumbers",
|
|
45
|
+
"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).",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "?autoOpenDisabled",
|
|
52
|
+
"description": "Set to true to prevent the overlays from opening automatically.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?readonly",
|
|
59
|
+
"description": "Set to true to make this element read-only.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "?autofocus",
|
|
66
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": ".label",
|
|
73
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".errorMessage",
|
|
80
|
+
"description": "Error to show when the field is invalid.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": ".helperText",
|
|
87
|
+
"description": "String used for the helper text.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": ".accessibleName",
|
|
94
|
+
"description": "String used to label the component to screen reader users.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": ".accessibleNameRef",
|
|
101
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".name",
|
|
108
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
109
|
+
"value": {
|
|
110
|
+
"kind": "expression"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": ".value",
|
|
115
|
+
"description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
116
|
+
"value": {
|
|
117
|
+
"kind": "expression"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": ".min",
|
|
122
|
+
"description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": ".max",
|
|
129
|
+
"description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
130
|
+
"value": {
|
|
131
|
+
"kind": "expression"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": ".datePlaceholder",
|
|
136
|
+
"description": "A placeholder string for the date field.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": ".timePlaceholder",
|
|
143
|
+
"description": "A placeholder string for the time field.",
|
|
144
|
+
"value": {
|
|
145
|
+
"kind": "expression"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": ".step",
|
|
150
|
+
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
|
|
151
|
+
"value": {
|
|
152
|
+
"kind": "expression"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": ".initialPosition",
|
|
157
|
+
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
|
|
158
|
+
"value": {
|
|
159
|
+
"kind": "expression"
|
|
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 or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-time-picker).",
|
|
165
|
+
"value": {
|
|
166
|
+
"kind": "expression"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": ".overlayClass",
|
|
171
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
172
|
+
"value": {
|
|
173
|
+
"kind": "expression"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": "@validated",
|
|
178
|
+
"description": "Fired whenever the field is validated.",
|
|
179
|
+
"value": {
|
|
180
|
+
"kind": "expression"
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "@change",
|
|
185
|
+
"description": "Fired when the user commits a value change.",
|
|
186
|
+
"value": {
|
|
187
|
+
"kind": "expression"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": "@value-changed",
|
|
192
|
+
"description": "Fired when the `value` property changes.",
|
|
193
|
+
"value": {
|
|
194
|
+
"kind": "expression"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"name": "@invalid-changed",
|
|
199
|
+
"description": "Fired when the `invalid` property changes.",
|
|
200
|
+
"value": {
|
|
201
|
+
"kind": "expression"
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
]
|
|
205
|
+
}
|
|
206
|
+
]
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|