@vaadin/date-picker 24.0.0-rc2 → 24.1.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 +2 -2
- package/package.json +11 -10
- package/src/vaadin-date-picker-light.js +10 -9
- package/src/vaadin-date-picker-mixin.d.ts +4 -4
- package/src/vaadin-date-picker-mixin.js +33 -31
- package/src/vaadin-month-calendar.js +1 -1
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ A web component that allows to enter a date by typing or by selecting from a cal
|
|
|
11
11
|
<vaadin-date-picker label="Label" value="2018-12-03" clear-button-visible></vaadin-date-picker>
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
[<img src="https://raw.githubusercontent.com/vaadin/web-components/
|
|
14
|
+
[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/date-picker/screenshot.png" width="343" alt="Screenshot of vaadin-date-picker">](https://vaadin.com/docs/latest/components/date-picker)
|
|
15
15
|
|
|
16
16
|
## Installation
|
|
17
17
|
|
|
@@ -30,7 +30,7 @@ import '@vaadin/date-picker';
|
|
|
30
30
|
## Themes
|
|
31
31
|
|
|
32
32
|
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
33
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/
|
|
33
|
+
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/date-picker/vaadin-date-picker.js) of the package uses the Lumo theme.
|
|
34
34
|
|
|
35
35
|
To use the Material theme, import the component from the `theme/material` folder:
|
|
36
36
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.1.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,14 +36,15 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/
|
|
40
|
-
"@vaadin/
|
|
41
|
-
"@vaadin/
|
|
42
|
-
"@vaadin/
|
|
43
|
-
"@vaadin/
|
|
44
|
-
"@vaadin/
|
|
45
|
-
"@vaadin/vaadin-
|
|
46
|
-
"@vaadin/vaadin-
|
|
39
|
+
"@vaadin/a11y-base": "24.1.0-alpha1",
|
|
40
|
+
"@vaadin/button": "24.1.0-alpha1",
|
|
41
|
+
"@vaadin/component-base": "24.1.0-alpha1",
|
|
42
|
+
"@vaadin/field-base": "24.1.0-alpha1",
|
|
43
|
+
"@vaadin/input-container": "24.1.0-alpha1",
|
|
44
|
+
"@vaadin/overlay": "24.1.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.1.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.1.0-alpha1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.1.0-alpha1"
|
|
47
48
|
},
|
|
48
49
|
"devDependencies": {
|
|
49
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -54,5 +55,5 @@
|
|
|
54
55
|
"web-types.json",
|
|
55
56
|
"web-types.lit.json"
|
|
56
57
|
],
|
|
57
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "599a339181595923b9ad6373d6888d8a79540141"
|
|
58
59
|
}
|
|
@@ -96,15 +96,16 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
|
|
|
96
96
|
};
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
/**
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
99
|
+
/**
|
|
100
|
+
* This method from InputMixin is overridden to make
|
|
101
|
+
* the input element value property customizable.
|
|
102
|
+
*
|
|
103
|
+
* @protected
|
|
104
|
+
* @override
|
|
105
|
+
* @return {string}
|
|
106
|
+
*/
|
|
107
|
+
get _inputElementValueProperty() {
|
|
108
|
+
return dashToCamelCase(this.attrForValue);
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
/** @protected */
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
|
-
import type { DelegateFocusMixinClass } from '@vaadin/
|
|
8
|
-
import type { DisabledMixinClass } from '@vaadin/
|
|
9
|
-
import type { FocusMixinClass } from '@vaadin/
|
|
10
|
-
import type { KeyboardMixinClass } from '@vaadin/
|
|
7
|
+
import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
9
|
+
import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
10
|
+
import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
11
11
|
import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
12
12
|
import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
13
13
|
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
* Copyright (c) 2016 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
+
import { hideOthers } from '@vaadin/a11y-base/src/aria-hidden.js';
|
|
7
|
+
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
6
9
|
import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
|
|
7
10
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
8
|
-
import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
|
|
9
|
-
import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
10
11
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
11
12
|
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
12
13
|
import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
@@ -372,18 +373,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
372
373
|
return null;
|
|
373
374
|
}
|
|
374
375
|
|
|
375
|
-
/** @protected */
|
|
376
|
-
get _inputValue() {
|
|
377
|
-
return this.inputElement ? this.inputElement.value : undefined;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
/** @protected */
|
|
381
|
-
set _inputValue(value) {
|
|
382
|
-
if (this.inputElement) {
|
|
383
|
-
this.inputElement.value = value;
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
|
|
387
376
|
/**
|
|
388
377
|
* Override an event listener from `DelegateFocusMixin`
|
|
389
378
|
* @protected
|
|
@@ -410,7 +399,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
410
399
|
|
|
411
400
|
this.validate();
|
|
412
401
|
|
|
413
|
-
if (this.
|
|
402
|
+
if (this._inputElementValue === '' && this.value !== '') {
|
|
414
403
|
this.value = '';
|
|
415
404
|
}
|
|
416
405
|
}
|
|
@@ -537,9 +526,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
537
526
|
* @return {boolean} True if the value is valid
|
|
538
527
|
*/
|
|
539
528
|
checkValidity() {
|
|
529
|
+
const inputValue = this._inputElementValue;
|
|
540
530
|
const inputValid =
|
|
541
|
-
!
|
|
542
|
-
(!!this._selectedDate &&
|
|
531
|
+
!inputValue ||
|
|
532
|
+
(!!this._selectedDate && inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
|
|
543
533
|
const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
|
|
544
534
|
|
|
545
535
|
let inputValidity = true;
|
|
@@ -800,32 +790,38 @@ export const DatePickerMixin = (subclass) =>
|
|
|
800
790
|
|
|
801
791
|
/** @protected */
|
|
802
792
|
_onOverlayOpened() {
|
|
793
|
+
const content = this._overlayContent;
|
|
794
|
+
|
|
803
795
|
// Detect which date to show
|
|
804
796
|
const initialPosition = this._getInitialPosition();
|
|
805
|
-
|
|
797
|
+
content.initialPosition = initialPosition;
|
|
806
798
|
|
|
807
799
|
// Scroll the date into view
|
|
808
|
-
const scrollFocusDate =
|
|
809
|
-
|
|
800
|
+
const scrollFocusDate = content.focusedDate || initialPosition;
|
|
801
|
+
content.scrollToDate(scrollFocusDate);
|
|
810
802
|
|
|
811
803
|
// Ensure the date is focused
|
|
812
804
|
this._ignoreFocusedDateChange = true;
|
|
813
|
-
|
|
805
|
+
content.focusedDate = scrollFocusDate;
|
|
814
806
|
this._ignoreFocusedDateChange = false;
|
|
815
807
|
|
|
816
808
|
window.addEventListener('scroll', this._boundOnScroll, true);
|
|
817
809
|
|
|
818
810
|
if (this._focusOverlayOnOpen) {
|
|
819
|
-
|
|
811
|
+
content.focusDateElement();
|
|
820
812
|
this._focusOverlayOnOpen = false;
|
|
821
813
|
} else {
|
|
822
814
|
this._focus();
|
|
823
815
|
}
|
|
824
816
|
|
|
825
|
-
|
|
826
|
-
|
|
817
|
+
const input = this._nativeInput;
|
|
818
|
+
if (this._noInput && input) {
|
|
819
|
+
input.blur();
|
|
827
820
|
this._overlayContent.focusDateElement();
|
|
828
821
|
}
|
|
822
|
+
|
|
823
|
+
const focusables = this._noInput ? content : [input, content];
|
|
824
|
+
this.__showOthers = hideOthers(focusables);
|
|
829
825
|
}
|
|
830
826
|
|
|
831
827
|
/** @private */
|
|
@@ -845,7 +841,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
845
841
|
// Select the parsed input or focused date
|
|
846
842
|
this._ignoreFocusedDateChange = true;
|
|
847
843
|
if (this.i18n.parseDate) {
|
|
848
|
-
const inputValue = this.
|
|
844
|
+
const inputValue = this._inputElementValue || '';
|
|
849
845
|
const parsedDate = this._getParsedDate(inputValue);
|
|
850
846
|
|
|
851
847
|
if (this._isValidDate(parsedDate)) {
|
|
@@ -864,6 +860,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
864
860
|
|
|
865
861
|
/** @protected */
|
|
866
862
|
_onOverlayClosed() {
|
|
863
|
+
// Reset `aria-hidden` state.
|
|
864
|
+
if (this.__showOthers) {
|
|
865
|
+
this.__showOthers();
|
|
866
|
+
this.__showOthers = null;
|
|
867
|
+
}
|
|
868
|
+
|
|
867
869
|
window.removeEventListener('scroll', this._boundOnScroll, true);
|
|
868
870
|
|
|
869
871
|
// No need to select date on close if it was confirmed by the user.
|
|
@@ -900,12 +902,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
900
902
|
/** @private */
|
|
901
903
|
_focusAndSelect() {
|
|
902
904
|
this._focus();
|
|
903
|
-
this._setSelectionRange(0, this.
|
|
905
|
+
this._setSelectionRange(0, this._inputElementValue.length);
|
|
904
906
|
}
|
|
905
907
|
|
|
906
908
|
/** @private */
|
|
907
909
|
_applyInputValue(date) {
|
|
908
|
-
this.
|
|
910
|
+
this._inputElementValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
|
|
909
911
|
}
|
|
910
912
|
|
|
911
913
|
/** @private */
|
|
@@ -933,7 +935,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
933
935
|
_onChange(event) {
|
|
934
936
|
// For change event on the native <input> blur, after the input is cleared,
|
|
935
937
|
// we schedule change event to be dispatched on date-picker blur.
|
|
936
|
-
if (this.
|
|
938
|
+
if (this._inputElementValue === '') {
|
|
937
939
|
this.__dispatchChange = true;
|
|
938
940
|
}
|
|
939
941
|
|
|
@@ -971,7 +973,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
971
973
|
_onClearButtonClick(event) {
|
|
972
974
|
event.preventDefault();
|
|
973
975
|
this.value = '';
|
|
974
|
-
this.
|
|
976
|
+
this._inputElementValue = '';
|
|
975
977
|
this.validate();
|
|
976
978
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
|
|
977
979
|
}
|
|
@@ -1085,7 +1087,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1085
1087
|
}
|
|
1086
1088
|
|
|
1087
1089
|
/** @private */
|
|
1088
|
-
_getParsedDate(inputValue = this.
|
|
1090
|
+
_getParsedDate(inputValue = this._inputElementValue) {
|
|
1089
1091
|
const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
|
|
1090
1092
|
const parsedDate = dateObject && parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
|
|
1091
1093
|
return parsedDate;
|
|
@@ -1109,7 +1111,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1109
1111
|
|
|
1110
1112
|
/** @private */
|
|
1111
1113
|
_userInputValueChanged() {
|
|
1112
|
-
if (this.
|
|
1114
|
+
if (this._inputElementValue) {
|
|
1113
1115
|
const parsedDate = this._getParsedDate();
|
|
1114
1116
|
|
|
1115
1117
|
if (this._isValidDate(parsedDate)) {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@polymer/polymer/lib/elements/dom-repeat.js';
|
|
7
7
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
8
|
-
import { FocusMixin } from '@vaadin/
|
|
8
|
+
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
9
9
|
import { addListener } from '@vaadin/component-base/src/gestures.js';
|
|
10
10
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
11
|
import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js';
|
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.
|
|
4
|
+
"version": "24.1.0-alpha1",
|
|
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.
|
|
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.1.0-alpha1/#/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.1.0-alpha1/#/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.1.0-alpha1/#/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.1.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
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.
|
|
4
|
+
"version": "24.1.0-alpha1",
|
|
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.
|
|
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.1.0-alpha1/#/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.1.0-alpha1/#/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.1.0-alpha1/#/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.1.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
160
160
|
"extension": true,
|
|
161
161
|
"attributes": [
|
|
162
162
|
{
|