@vaadin/date-time-picker 23.2.0-dev.53560527d → 23.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/package.json +17 -11
- package/src/vaadin-date-time-picker.d.ts +13 -5
- package/src/vaadin-date-time-picker.js +15 -7
- package/web-types.json +436 -0
- package/web-types.lit.json +181 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
An input field web component for selecting both a date and a time.
|
|
4
4
|
|
|
5
|
-
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/
|
|
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
8
|
[](https://discord.gg/PHmkCKC)
|
|
@@ -27,7 +27,7 @@ import '@vaadin/date-time-picker';
|
|
|
27
27
|
|
|
28
28
|
## Themes
|
|
29
29
|
|
|
30
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/
|
|
30
|
+
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
31
31
|
The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/date-time-picker/vaadin-date-time-picker.js) of the package uses the Lumo theme.
|
|
32
32
|
|
|
33
33
|
To use the Material theme, import the component from the `theme/material` folder:
|
|
@@ -50,7 +50,7 @@ import '@vaadin/date-time-picker/src/vaadin-date-time-picker.js';
|
|
|
50
50
|
|
|
51
51
|
## Contributing
|
|
52
52
|
|
|
53
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/
|
|
53
|
+
Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
|
54
54
|
|
|
55
55
|
## License
|
|
56
56
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-time-picker",
|
|
3
|
-
"version": "23.2.0
|
|
3
|
+
"version": "23.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"theme",
|
|
25
25
|
"vaadin-*.d.ts",
|
|
26
|
-
"vaadin-*.js"
|
|
26
|
+
"vaadin-*.js",
|
|
27
|
+
"web-types.json",
|
|
28
|
+
"web-types.lit.json"
|
|
27
29
|
],
|
|
28
30
|
"keywords": [
|
|
29
31
|
"Vaadin",
|
|
@@ -34,19 +36,23 @@
|
|
|
34
36
|
],
|
|
35
37
|
"dependencies": {
|
|
36
38
|
"@polymer/polymer": "^3.0.0",
|
|
37
|
-
"@vaadin/component-base": "23.2.0
|
|
38
|
-
"@vaadin/custom-field": "23.2.0
|
|
39
|
-
"@vaadin/date-picker": "23.2.0
|
|
40
|
-
"@vaadin/field-base": "23.2.0
|
|
41
|
-
"@vaadin/time-picker": "23.2.0
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "23.2.0
|
|
43
|
-
"@vaadin/vaadin-material-styles": "23.2.0
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "23.2.0
|
|
39
|
+
"@vaadin/component-base": "^23.2.0",
|
|
40
|
+
"@vaadin/custom-field": "^23.2.0",
|
|
41
|
+
"@vaadin/date-picker": "^23.2.0",
|
|
42
|
+
"@vaadin/field-base": "^23.2.0",
|
|
43
|
+
"@vaadin/time-picker": "^23.2.0",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "^23.2.0",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "^23.2.0",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "^23.2.0"
|
|
45
47
|
},
|
|
46
48
|
"devDependencies": {
|
|
47
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
48
50
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
49
51
|
"sinon": "^13.0.2"
|
|
50
52
|
},
|
|
51
|
-
"
|
|
53
|
+
"web-types": [
|
|
54
|
+
"web-types.json",
|
|
55
|
+
"web-types.lit.json"
|
|
56
|
+
],
|
|
57
|
+
"gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
|
|
52
58
|
}
|
|
@@ -7,9 +7,9 @@ import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
|
|
|
7
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
8
|
import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
|
|
9
9
|
import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
|
|
10
|
-
import { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
10
|
+
import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
11
11
|
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
12
|
-
import { TimePickerI18n } from '@vaadin/time-picker/src/vaadin-time-picker.js';
|
|
12
|
+
import type { TimePickerI18n } from '@vaadin/time-picker/src/vaadin-time-picker.js';
|
|
13
13
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
14
|
|
|
15
15
|
export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {}
|
|
@@ -31,10 +31,17 @@ export type DateTimePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
|
31
31
|
*/
|
|
32
32
|
export type DateTimePickerValueChangedEvent = CustomEvent<{ value: string }>;
|
|
33
33
|
|
|
34
|
+
/**
|
|
35
|
+
* Fired whenever the field is validated.
|
|
36
|
+
*/
|
|
37
|
+
export type DateTimePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
|
|
38
|
+
|
|
34
39
|
export interface DateTimePickerCustomEventMap {
|
|
35
40
|
'invalid-changed': DateTimePickerInvalidChangedEvent;
|
|
36
41
|
|
|
37
42
|
'value-changed': DateTimePickerValueChangedEvent;
|
|
43
|
+
|
|
44
|
+
validated: DateTimePickerValidatedEvent;
|
|
38
45
|
}
|
|
39
46
|
|
|
40
47
|
export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HTMLElementEventMap {
|
|
@@ -90,11 +97,12 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
|
|
|
90
97
|
* Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
|
|
91
98
|
* propagated to the internal components listed above.
|
|
92
99
|
*
|
|
93
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
100
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
94
101
|
*
|
|
95
102
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
96
103
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
97
104
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
105
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
98
106
|
*/
|
|
99
107
|
declare class DateTimePicker extends FieldMixin(
|
|
100
108
|
SlotMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))),
|
|
@@ -210,13 +218,13 @@ declare class DateTimePicker extends FieldMixin(
|
|
|
210
218
|
addEventListener<K extends keyof DateTimePickerEventMap>(
|
|
211
219
|
type: K,
|
|
212
220
|
listener: (this: DateTimePicker, ev: DateTimePickerEventMap[K]) => void,
|
|
213
|
-
options?:
|
|
221
|
+
options?: AddEventListenerOptions | boolean,
|
|
214
222
|
): void;
|
|
215
223
|
|
|
216
224
|
removeEventListener<K extends keyof DateTimePickerEventMap>(
|
|
217
225
|
type: K,
|
|
218
226
|
listener: (this: DateTimePicker, ev: DateTimePickerEventMap[K]) => void,
|
|
219
|
-
options?:
|
|
227
|
+
options?: EventListenerOptions | boolean,
|
|
220
228
|
): void;
|
|
221
229
|
}
|
|
222
230
|
|
|
@@ -92,11 +92,12 @@ const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
|
|
|
92
92
|
* Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
|
|
93
93
|
* propagated to the internal components listed above.
|
|
94
94
|
*
|
|
95
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
95
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
96
96
|
*
|
|
97
97
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
98
98
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
99
99
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
100
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
100
101
|
*
|
|
101
102
|
* @extends HTMLElement
|
|
102
103
|
* @mixes ElementMixin
|
|
@@ -431,11 +432,6 @@ class DateTimePicker extends FieldMixin(
|
|
|
431
432
|
this.ariaTarget = this;
|
|
432
433
|
}
|
|
433
434
|
|
|
434
|
-
/** @private */
|
|
435
|
-
__filterElements(node) {
|
|
436
|
-
return node.nodeType === Node.ELEMENT_NODE;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
435
|
focus() {
|
|
440
436
|
this.__datePicker.focus();
|
|
441
437
|
}
|
|
@@ -509,6 +505,10 @@ class DateTimePicker extends FieldMixin(
|
|
|
509
505
|
this.__timePicker = node;
|
|
510
506
|
}
|
|
511
507
|
});
|
|
508
|
+
|
|
509
|
+
if (this.value && (this.min || this.max)) {
|
|
510
|
+
this.validate();
|
|
511
|
+
}
|
|
512
512
|
}
|
|
513
513
|
|
|
514
514
|
/** @private */
|
|
@@ -756,7 +756,7 @@ class DateTimePicker extends FieldMixin(
|
|
|
756
756
|
*/
|
|
757
757
|
__parseDateTime(str) {
|
|
758
758
|
const [dateValue, timeValue] = str.split('T');
|
|
759
|
-
/*
|
|
759
|
+
/* c8 ignore next 3 */
|
|
760
760
|
if (!(dateValue && timeValue)) {
|
|
761
761
|
return;
|
|
762
762
|
}
|
|
@@ -928,6 +928,10 @@ class DateTimePicker extends FieldMixin(
|
|
|
928
928
|
this.__datePicker.min = this.__formatDateISO(this.__minDateTime, this.__defaultDateMinMaxValue);
|
|
929
929
|
}
|
|
930
930
|
this.__updateTimePickerMinMax();
|
|
931
|
+
|
|
932
|
+
if (this.__datePicker && this.__timePicker && this.value) {
|
|
933
|
+
this.validate();
|
|
934
|
+
}
|
|
931
935
|
}
|
|
932
936
|
|
|
933
937
|
/** @private */
|
|
@@ -937,6 +941,10 @@ class DateTimePicker extends FieldMixin(
|
|
|
937
941
|
this.__datePicker.max = this.__formatDateISO(this.__maxDateTime, this.__defaultDateMinMaxValue);
|
|
938
942
|
}
|
|
939
943
|
this.__updateTimePickerMinMax();
|
|
944
|
+
|
|
945
|
+
if (this.__datePicker && this.__timePicker && this.value) {
|
|
946
|
+
this.validate();
|
|
947
|
+
}
|
|
940
948
|
}
|
|
941
949
|
|
|
942
950
|
/** @private */
|
package/web-types.json
ADDED
|
@@ -0,0 +1,436 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/date-time-picker",
|
|
4
|
+
"version": "23.2.0",
|
|
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\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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": "name",
|
|
81
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"string",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "value",
|
|
92
|
+
"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\"`",
|
|
93
|
+
"value": {
|
|
94
|
+
"type": [
|
|
95
|
+
"string"
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "min",
|
|
101
|
+
"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\"`",
|
|
102
|
+
"value": {
|
|
103
|
+
"type": [
|
|
104
|
+
"string",
|
|
105
|
+
"undefined"
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"name": "max",
|
|
111
|
+
"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\"`",
|
|
112
|
+
"value": {
|
|
113
|
+
"type": [
|
|
114
|
+
"string",
|
|
115
|
+
"undefined"
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"name": "date-placeholder",
|
|
121
|
+
"description": "A placeholder string for the date field.",
|
|
122
|
+
"value": {
|
|
123
|
+
"type": [
|
|
124
|
+
"string",
|
|
125
|
+
"null",
|
|
126
|
+
"undefined"
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"name": "time-placeholder",
|
|
132
|
+
"description": "A placeholder string for the time field.",
|
|
133
|
+
"value": {
|
|
134
|
+
"type": [
|
|
135
|
+
"string",
|
|
136
|
+
"null",
|
|
137
|
+
"undefined"
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "step",
|
|
143
|
+
"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.",
|
|
144
|
+
"value": {
|
|
145
|
+
"type": [
|
|
146
|
+
"number",
|
|
147
|
+
"null",
|
|
148
|
+
"undefined"
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "initial-position",
|
|
154
|
+
"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.",
|
|
155
|
+
"value": {
|
|
156
|
+
"type": [
|
|
157
|
+
"string",
|
|
158
|
+
"null",
|
|
159
|
+
"undefined"
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"name": "show-week-numbers",
|
|
165
|
+
"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).",
|
|
166
|
+
"value": {
|
|
167
|
+
"type": [
|
|
168
|
+
"boolean",
|
|
169
|
+
"null",
|
|
170
|
+
"undefined"
|
|
171
|
+
]
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"name": "auto-open-disabled",
|
|
176
|
+
"description": "Set to true to prevent the overlays from opening automatically.",
|
|
177
|
+
"value": {
|
|
178
|
+
"type": [
|
|
179
|
+
"boolean",
|
|
180
|
+
"null",
|
|
181
|
+
"undefined"
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"name": "readonly",
|
|
187
|
+
"description": "Set to true to make this element read-only.",
|
|
188
|
+
"value": {
|
|
189
|
+
"type": [
|
|
190
|
+
"boolean"
|
|
191
|
+
]
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"name": "autofocus",
|
|
196
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
197
|
+
"value": {
|
|
198
|
+
"type": [
|
|
199
|
+
"boolean"
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"name": "theme",
|
|
205
|
+
"description": "The theme variants to apply to the component.",
|
|
206
|
+
"value": {
|
|
207
|
+
"type": [
|
|
208
|
+
"string",
|
|
209
|
+
"null",
|
|
210
|
+
"undefined"
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
],
|
|
215
|
+
"js": {
|
|
216
|
+
"properties": [
|
|
217
|
+
{
|
|
218
|
+
"name": "disabled",
|
|
219
|
+
"description": "If true, the user cannot interact with this element.",
|
|
220
|
+
"value": {
|
|
221
|
+
"type": [
|
|
222
|
+
"boolean",
|
|
223
|
+
"null",
|
|
224
|
+
"undefined"
|
|
225
|
+
]
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"name": "label",
|
|
230
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
231
|
+
"value": {
|
|
232
|
+
"type": [
|
|
233
|
+
"string",
|
|
234
|
+
"null",
|
|
235
|
+
"undefined"
|
|
236
|
+
]
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"name": "invalid",
|
|
241
|
+
"description": "Set to true when the field is invalid.",
|
|
242
|
+
"value": {
|
|
243
|
+
"type": [
|
|
244
|
+
"boolean",
|
|
245
|
+
"null",
|
|
246
|
+
"undefined"
|
|
247
|
+
]
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"name": "required",
|
|
252
|
+
"description": "Specifies that the user must fill in a value.",
|
|
253
|
+
"value": {
|
|
254
|
+
"type": [
|
|
255
|
+
"boolean",
|
|
256
|
+
"null",
|
|
257
|
+
"undefined"
|
|
258
|
+
]
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"name": "errorMessage",
|
|
263
|
+
"description": "Error to show when the field is invalid.",
|
|
264
|
+
"value": {
|
|
265
|
+
"type": [
|
|
266
|
+
"string",
|
|
267
|
+
"null",
|
|
268
|
+
"undefined"
|
|
269
|
+
]
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"name": "helperText",
|
|
274
|
+
"description": "String used for the helper text.",
|
|
275
|
+
"value": {
|
|
276
|
+
"type": [
|
|
277
|
+
"string",
|
|
278
|
+
"null",
|
|
279
|
+
"undefined"
|
|
280
|
+
]
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
"name": "name",
|
|
285
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
286
|
+
"value": {
|
|
287
|
+
"type": [
|
|
288
|
+
"string",
|
|
289
|
+
"null",
|
|
290
|
+
"undefined"
|
|
291
|
+
]
|
|
292
|
+
}
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
"name": "value",
|
|
296
|
+
"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\"`",
|
|
297
|
+
"value": {
|
|
298
|
+
"type": [
|
|
299
|
+
"string"
|
|
300
|
+
]
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
"name": "min",
|
|
305
|
+
"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\"`",
|
|
306
|
+
"value": {
|
|
307
|
+
"type": [
|
|
308
|
+
"string",
|
|
309
|
+
"undefined"
|
|
310
|
+
]
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
"name": "max",
|
|
315
|
+
"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\"`",
|
|
316
|
+
"value": {
|
|
317
|
+
"type": [
|
|
318
|
+
"string",
|
|
319
|
+
"undefined"
|
|
320
|
+
]
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"name": "datePlaceholder",
|
|
325
|
+
"description": "A placeholder string for the date field.",
|
|
326
|
+
"value": {
|
|
327
|
+
"type": [
|
|
328
|
+
"string",
|
|
329
|
+
"null",
|
|
330
|
+
"undefined"
|
|
331
|
+
]
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
"name": "timePlaceholder",
|
|
336
|
+
"description": "A placeholder string for the time field.",
|
|
337
|
+
"value": {
|
|
338
|
+
"type": [
|
|
339
|
+
"string",
|
|
340
|
+
"null",
|
|
341
|
+
"undefined"
|
|
342
|
+
]
|
|
343
|
+
}
|
|
344
|
+
},
|
|
345
|
+
{
|
|
346
|
+
"name": "step",
|
|
347
|
+
"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.",
|
|
348
|
+
"value": {
|
|
349
|
+
"type": [
|
|
350
|
+
"number",
|
|
351
|
+
"null",
|
|
352
|
+
"undefined"
|
|
353
|
+
]
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
{
|
|
357
|
+
"name": "initialPosition",
|
|
358
|
+
"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.",
|
|
359
|
+
"value": {
|
|
360
|
+
"type": [
|
|
361
|
+
"string",
|
|
362
|
+
"null",
|
|
363
|
+
"undefined"
|
|
364
|
+
]
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
"name": "showWeekNumbers",
|
|
369
|
+
"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).",
|
|
370
|
+
"value": {
|
|
371
|
+
"type": [
|
|
372
|
+
"boolean",
|
|
373
|
+
"null",
|
|
374
|
+
"undefined"
|
|
375
|
+
]
|
|
376
|
+
}
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"name": "autoOpenDisabled",
|
|
380
|
+
"description": "Set to true to prevent the overlays from opening automatically.",
|
|
381
|
+
"value": {
|
|
382
|
+
"type": [
|
|
383
|
+
"boolean",
|
|
384
|
+
"null",
|
|
385
|
+
"undefined"
|
|
386
|
+
]
|
|
387
|
+
}
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"name": "readonly",
|
|
391
|
+
"description": "Set to true to make this element read-only.",
|
|
392
|
+
"value": {
|
|
393
|
+
"type": [
|
|
394
|
+
"boolean"
|
|
395
|
+
]
|
|
396
|
+
}
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"name": "autofocus",
|
|
400
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
401
|
+
"value": {
|
|
402
|
+
"type": [
|
|
403
|
+
"boolean"
|
|
404
|
+
]
|
|
405
|
+
}
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"name": "i18n",
|
|
409
|
+
"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/23.2.0/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/elements/vaadin-time-picker).",
|
|
410
|
+
"value": {
|
|
411
|
+
"type": [
|
|
412
|
+
"DateTimePickerI18n"
|
|
413
|
+
]
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
],
|
|
417
|
+
"events": [
|
|
418
|
+
{
|
|
419
|
+
"name": "validated",
|
|
420
|
+
"description": "Fired whenever the field is validated."
|
|
421
|
+
},
|
|
422
|
+
{
|
|
423
|
+
"name": "change",
|
|
424
|
+
"description": "Fired when the user commits a value change."
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
"name": "value-changed",
|
|
428
|
+
"description": "Fired when the `value` property changes."
|
|
429
|
+
}
|
|
430
|
+
]
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
]
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
}
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/date-time-picker",
|
|
4
|
+
"version": "23.2.0",
|
|
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\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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": ".name",
|
|
94
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": ".value",
|
|
101
|
+
"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\"`",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".min",
|
|
108
|
+
"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\"`",
|
|
109
|
+
"value": {
|
|
110
|
+
"kind": "expression"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": ".max",
|
|
115
|
+
"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\"`",
|
|
116
|
+
"value": {
|
|
117
|
+
"kind": "expression"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": ".datePlaceholder",
|
|
122
|
+
"description": "A placeholder string for the date field.",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": ".timePlaceholder",
|
|
129
|
+
"description": "A placeholder string for the time field.",
|
|
130
|
+
"value": {
|
|
131
|
+
"kind": "expression"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": ".step",
|
|
136
|
+
"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.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": ".initialPosition",
|
|
143
|
+
"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.",
|
|
144
|
+
"value": {
|
|
145
|
+
"kind": "expression"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": ".i18n",
|
|
150
|
+
"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/23.2.0/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/elements/vaadin-time-picker).",
|
|
151
|
+
"value": {
|
|
152
|
+
"kind": "expression"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "@validated",
|
|
157
|
+
"description": "Fired whenever the field is validated.",
|
|
158
|
+
"value": {
|
|
159
|
+
"kind": "expression"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": "@change",
|
|
164
|
+
"description": "Fired when the user commits a value change.",
|
|
165
|
+
"value": {
|
|
166
|
+
"kind": "expression"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": "@value-changed",
|
|
171
|
+
"description": "Fired when the `value` property changes.",
|
|
172
|
+
"value": {
|
|
173
|
+
"kind": "expression"
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
]
|
|
177
|
+
}
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|