@vaadin/date-picker 24.3.0-alpha3 → 24.3.0-alpha5
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 +13 -13
- package/src/vaadin-date-picker-mixin.js +59 -21
- package/src/vaadin-date-picker.d.ts +24 -0
- package/src/vaadin-date-picker.js +17 -0
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.3.0-
|
|
3
|
+
"version": "24.3.0-alpha5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"!src/vaadin-lit-date-picker-overlay-content.js",
|
|
25
25
|
"!src/vaadin-lit-date-picker-overlay.js",
|
|
26
|
-
"!src/vaadin-lit-month-calendar.js",
|
|
27
26
|
"!src/vaadin-lit-date-picker.js",
|
|
27
|
+
"!src/vaadin-lit-month-calendar.js",
|
|
28
28
|
"theme",
|
|
29
29
|
"vaadin-*.d.ts",
|
|
30
30
|
"vaadin-*.js",
|
|
@@ -40,24 +40,24 @@
|
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
42
42
|
"@polymer/polymer": "^3.2.0",
|
|
43
|
-
"@vaadin/a11y-base": "24.3.0-
|
|
44
|
-
"@vaadin/button": "24.3.0-
|
|
45
|
-
"@vaadin/component-base": "24.3.0-
|
|
46
|
-
"@vaadin/field-base": "24.3.0-
|
|
47
|
-
"@vaadin/input-container": "24.3.0-
|
|
48
|
-
"@vaadin/overlay": "24.3.0-
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "24.3.0-
|
|
50
|
-
"@vaadin/vaadin-material-styles": "24.3.0-
|
|
51
|
-
"@vaadin/vaadin-themable-mixin": "24.3.0-
|
|
43
|
+
"@vaadin/a11y-base": "24.3.0-alpha5",
|
|
44
|
+
"@vaadin/button": "24.3.0-alpha5",
|
|
45
|
+
"@vaadin/component-base": "24.3.0-alpha5",
|
|
46
|
+
"@vaadin/field-base": "24.3.0-alpha5",
|
|
47
|
+
"@vaadin/input-container": "24.3.0-alpha5",
|
|
48
|
+
"@vaadin/overlay": "24.3.0-alpha5",
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "24.3.0-alpha5",
|
|
50
|
+
"@vaadin/vaadin-material-styles": "24.3.0-alpha5",
|
|
51
|
+
"@vaadin/vaadin-themable-mixin": "24.3.0-alpha5"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@esm-bundle/chai": "^4.3.4",
|
|
55
|
-
"@vaadin/testing-helpers": "^0.
|
|
55
|
+
"@vaadin/testing-helpers": "^0.6.0",
|
|
56
56
|
"sinon": "^13.0.2"
|
|
57
57
|
},
|
|
58
58
|
"web-types": [
|
|
59
59
|
"web-types.json",
|
|
60
60
|
"web-types.lit.json"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "b1fb1be6cc5dc69a82952571fbbda4ffd8e7527c"
|
|
63
63
|
}
|
|
@@ -427,6 +427,20 @@ export const DatePickerMixin = (subclass) =>
|
|
|
427
427
|
return null;
|
|
428
428
|
}
|
|
429
429
|
|
|
430
|
+
/**
|
|
431
|
+
* The input element's value when it cannot be parsed as a date, and an empty string otherwise.
|
|
432
|
+
*
|
|
433
|
+
* @return {string}
|
|
434
|
+
* @private
|
|
435
|
+
*/
|
|
436
|
+
get __unparsableValue() {
|
|
437
|
+
if (!this._inputElementValue || this.__parseDate(this._inputElementValue)) {
|
|
438
|
+
return '';
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
return this._inputElementValue;
|
|
442
|
+
}
|
|
443
|
+
|
|
430
444
|
/**
|
|
431
445
|
* Override an event listener from `DelegateFocusMixin`
|
|
432
446
|
* @protected
|
|
@@ -645,27 +659,52 @@ export const DatePickerMixin = (subclass) =>
|
|
|
645
659
|
this._shouldKeepFocusRing = focused && this._keyboardActive;
|
|
646
660
|
}
|
|
647
661
|
|
|
648
|
-
/**
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
662
|
+
/**
|
|
663
|
+
* Depending on the nature of the value change that has occurred since
|
|
664
|
+
* the last commit attempt, triggers validation and fires an event:
|
|
665
|
+
*
|
|
666
|
+
* Value change | Event
|
|
667
|
+
* :------------------------|:------------------
|
|
668
|
+
* empty => parsable | change
|
|
669
|
+
* empty => unparsable | unparsable-change
|
|
670
|
+
* parsable => empty | change
|
|
671
|
+
* parsable => parsable | change
|
|
672
|
+
* parsable => unparsable | change
|
|
673
|
+
* unparsable => empty | unparsable-change
|
|
674
|
+
* unparsable => parsable | change
|
|
675
|
+
* unparsable => unparsable | unparsable-change
|
|
676
|
+
*
|
|
677
|
+
* @private
|
|
678
|
+
*/
|
|
679
|
+
__commitValueChange() {
|
|
680
|
+
const unparsableValue = this.__unparsableValue;
|
|
681
|
+
|
|
682
|
+
if (this.__committedValue !== this.value) {
|
|
683
|
+
this.validate();
|
|
684
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
|
|
685
|
+
} else if (this.__committedUnparsableValue !== unparsableValue) {
|
|
686
|
+
this.validate();
|
|
687
|
+
this.dispatchEvent(new CustomEvent('unparsable-change'));
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
this.__committedValue = this.value;
|
|
691
|
+
this.__committedUnparsableValue = unparsableValue;
|
|
652
692
|
}
|
|
653
693
|
|
|
654
694
|
/**
|
|
655
|
-
* Sets the given date as the value and
|
|
656
|
-
* if the value has changed.
|
|
695
|
+
* Sets the given date as the value and commits it.
|
|
657
696
|
*
|
|
658
697
|
* @param {Date} date
|
|
659
698
|
* @private
|
|
660
699
|
*/
|
|
661
700
|
__commitDate(date) {
|
|
662
|
-
|
|
663
|
-
|
|
701
|
+
// Prevent the value observer from treating the following value change
|
|
702
|
+
// as initiated programmatically by the developer, and therefore
|
|
703
|
+
// from automatically committing it without a change event.
|
|
704
|
+
this.__keepCommittedValue = true;
|
|
664
705
|
this._selectedDate = date;
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
this.__dispatchChange();
|
|
668
|
-
}
|
|
706
|
+
this.__keepCommittedValue = false;
|
|
707
|
+
this.__commitValueChange();
|
|
669
708
|
}
|
|
670
709
|
|
|
671
710
|
/** @private */
|
|
@@ -801,6 +840,11 @@ export const DatePickerMixin = (subclass) =>
|
|
|
801
840
|
this._selectedDate = null;
|
|
802
841
|
}
|
|
803
842
|
|
|
843
|
+
if (!this.__keepCommittedValue) {
|
|
844
|
+
this.__committedValue = this.value;
|
|
845
|
+
this.__committedUnparsableValue = '';
|
|
846
|
+
}
|
|
847
|
+
|
|
804
848
|
this._toggleHasValue(this._hasValue);
|
|
805
849
|
}
|
|
806
850
|
|
|
@@ -892,9 +936,9 @@ export const DatePickerMixin = (subclass) =>
|
|
|
892
936
|
}
|
|
893
937
|
|
|
894
938
|
/**
|
|
895
|
-
* Tries to parse the input element's value as a date.
|
|
896
|
-
*
|
|
897
|
-
*
|
|
939
|
+
* Tries to parse the input element's value as a date. If the input value
|
|
940
|
+
* is parsable, commits the resulting date as the value. Otherwise, commits
|
|
941
|
+
* an empty string as the value. If no i18n parser is provided, commits
|
|
898
942
|
* the focused date as the value.
|
|
899
943
|
*
|
|
900
944
|
* @private
|
|
@@ -911,7 +955,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
911
955
|
} else {
|
|
912
956
|
this.__keepInputValue = true;
|
|
913
957
|
this.__commitDate(null);
|
|
914
|
-
this._selectedDate = null;
|
|
915
958
|
this.__keepInputValue = false;
|
|
916
959
|
}
|
|
917
960
|
} else if (this._focusedDate) {
|
|
@@ -927,7 +970,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
927
970
|
this.__showOthers();
|
|
928
971
|
this.__showOthers = null;
|
|
929
972
|
}
|
|
930
|
-
|
|
931
973
|
window.removeEventListener('scroll', this._boundOnScroll, true);
|
|
932
974
|
|
|
933
975
|
this.__commitParsedOrFocusedDate();
|
|
@@ -1080,16 +1122,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1080
1122
|
* @override
|
|
1081
1123
|
*/
|
|
1082
1124
|
_onEnter(_event) {
|
|
1083
|
-
const oldValue = this.value;
|
|
1084
1125
|
if (this.opened) {
|
|
1085
1126
|
// Closing will implicitly select parsed or focused date
|
|
1086
1127
|
this.close();
|
|
1087
1128
|
} else {
|
|
1088
1129
|
this.__commitParsedOrFocusedDate();
|
|
1089
1130
|
}
|
|
1090
|
-
if (oldValue === this.value) {
|
|
1091
|
-
this.validate();
|
|
1092
|
-
}
|
|
1093
1131
|
}
|
|
1094
1132
|
|
|
1095
1133
|
/**
|
|
@@ -16,6 +16,11 @@ export type DatePickerChangeEvent = Event & {
|
|
|
16
16
|
target: DatePicker;
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
+
/**
|
|
20
|
+
* Fired when the user commits an unparsable value change and there is no change event.
|
|
21
|
+
*/
|
|
22
|
+
export type DatePickerUnparsableChangeEvent = CustomEvent;
|
|
23
|
+
|
|
19
24
|
/**
|
|
20
25
|
* Fired when the `opened` property changes.
|
|
21
26
|
*/
|
|
@@ -43,6 +48,8 @@ export interface DatePickerCustomEventMap {
|
|
|
43
48
|
|
|
44
49
|
'value-changed': DatePickerValueChangedEvent;
|
|
45
50
|
|
|
51
|
+
'unparsable-change': DatePickerUnparsableChangeEvent;
|
|
52
|
+
|
|
46
53
|
validated: DatePickerValidatedEvent;
|
|
47
54
|
}
|
|
48
55
|
|
|
@@ -148,7 +155,24 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
|
|
|
148
155
|
*
|
|
149
156
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
150
157
|
*
|
|
158
|
+
* ### Change events
|
|
159
|
+
*
|
|
160
|
+
* Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
|
|
161
|
+
* the component can fire either a `change` event or an `unparsable-change` event:
|
|
162
|
+
*
|
|
163
|
+
* Value change | Event
|
|
164
|
+
* :------------------------|:------------------
|
|
165
|
+
* empty => parsable | change
|
|
166
|
+
* empty => unparsable | unparsable-change
|
|
167
|
+
* parsable => empty | change
|
|
168
|
+
* parsable => parsable | change
|
|
169
|
+
* parsable => unparsable | change
|
|
170
|
+
* unparsable => empty | unparsable-change
|
|
171
|
+
* unparsable => parsable | change
|
|
172
|
+
* unparsable => unparsable | unparsable-change
|
|
173
|
+
*
|
|
151
174
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
175
|
+
* @fires {Event} unparsable-change Fired when the user commits an unparsable value change and there is no change event.
|
|
152
176
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
153
177
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
154
178
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
@@ -118,7 +118,24 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
|
|
|
118
118
|
*
|
|
119
119
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
120
120
|
*
|
|
121
|
+
* ### Change events
|
|
122
|
+
*
|
|
123
|
+
* Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
|
|
124
|
+
* the component can fire either a `change` event or an `unparsable-change` event:
|
|
125
|
+
*
|
|
126
|
+
* Value change | Event
|
|
127
|
+
* :------------------------|:------------------
|
|
128
|
+
* empty => parsable | change
|
|
129
|
+
* empty => unparsable | unparsable-change
|
|
130
|
+
* parsable => empty | change
|
|
131
|
+
* parsable => parsable | change
|
|
132
|
+
* parsable => unparsable | change
|
|
133
|
+
* unparsable => empty | unparsable-change
|
|
134
|
+
* unparsable => parsable | change
|
|
135
|
+
* unparsable => unparsable | unparsable-change
|
|
136
|
+
*
|
|
121
137
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
138
|
+
* @fires {Event} unparsable-change Fired when the user commits an unparsable value change and there is no change event.
|
|
122
139
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
123
140
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
124
141
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
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.3.0-
|
|
4
|
+
"version": "24.3.0-alpha5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
},
|
|
335
335
|
{
|
|
336
336
|
"name": "vaadin-date-picker",
|
|
337
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-
|
|
337
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha5/#/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.3.0-alpha5/#/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.3.0-alpha5/#/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.3.0-alpha5/#/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/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
|
|
338
338
|
"attributes": [
|
|
339
339
|
{
|
|
340
340
|
"name": "disabled",
|
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.3.0-
|
|
4
|
+
"version": "24.3.0-alpha5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"name": "vaadin-date-picker",
|
|
159
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-
|
|
159
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha5/#/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.3.0-alpha5/#/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.3.0-alpha5/#/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.3.0-alpha5/#/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/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
|
|
160
160
|
"extension": true,
|
|
161
161
|
"attributes": [
|
|
162
162
|
{
|