@vaadin/date-picker 24.0.0 → 24.1.0-alpha2
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 +71 -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-alpha2",
|
|
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-alpha2",
|
|
40
|
+
"@vaadin/button": "24.1.0-alpha2",
|
|
41
|
+
"@vaadin/component-base": "24.1.0-alpha2",
|
|
42
|
+
"@vaadin/field-base": "24.1.0-alpha2",
|
|
43
|
+
"@vaadin/input-container": "24.1.0-alpha2",
|
|
44
|
+
"@vaadin/overlay": "24.1.0-alpha2",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.1.0-alpha2",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.1.0-alpha2",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.1.0-alpha2"
|
|
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": "9e3ee2557109030f2aba59e17a84e4e121d699c0"
|
|
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';
|
|
@@ -327,6 +328,20 @@ export const DatePickerMixin = (subclass) =>
|
|
|
327
328
|
|
|
328
329
|
/** @private */
|
|
329
330
|
_overlayContent: Object,
|
|
331
|
+
|
|
332
|
+
/**
|
|
333
|
+
* In date-picker, unlike other components extending `InputMixin`,
|
|
334
|
+
* the property indicates true only if the input has been entered by the user.
|
|
335
|
+
* In the case of programmatic changes, the property is reset to false.
|
|
336
|
+
* Read more about why this workaround is needed:
|
|
337
|
+
* https://github.com/vaadin/web-components/issues/5639
|
|
338
|
+
*
|
|
339
|
+
* @protected
|
|
340
|
+
* @override
|
|
341
|
+
*/
|
|
342
|
+
_hasInputValue: {
|
|
343
|
+
type: Boolean,
|
|
344
|
+
},
|
|
330
345
|
};
|
|
331
346
|
}
|
|
332
347
|
|
|
@@ -352,6 +367,30 @@ export const DatePickerMixin = (subclass) =>
|
|
|
352
367
|
this._boundOverlayRenderer = this._overlayRenderer.bind(this);
|
|
353
368
|
}
|
|
354
369
|
|
|
370
|
+
/**
|
|
371
|
+
* @override
|
|
372
|
+
* @protected
|
|
373
|
+
*/
|
|
374
|
+
get _inputElementValue() {
|
|
375
|
+
return super._inputElementValue;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* The setter is overridden to reset the `_hasInputValue` property
|
|
380
|
+
* to false when the input element's value is updated programmatically.
|
|
381
|
+
* In date-picker, `_hasInputValue` is supposed to indicate true only
|
|
382
|
+
* if the input has been entered by the user.
|
|
383
|
+
* Read more about why this workaround is needed:
|
|
384
|
+
* https://github.com/vaadin/web-components/issues/5639
|
|
385
|
+
*
|
|
386
|
+
* @override
|
|
387
|
+
* @protected
|
|
388
|
+
*/
|
|
389
|
+
set _inputElementValue(value) {
|
|
390
|
+
super._inputElementValue = value;
|
|
391
|
+
this._hasInputValue = false;
|
|
392
|
+
}
|
|
393
|
+
|
|
355
394
|
/**
|
|
356
395
|
* Override a getter from `InputControlMixin` to make it optional
|
|
357
396
|
* and to prevent warning when a clear button is missing,
|
|
@@ -372,18 +411,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
372
411
|
return null;
|
|
373
412
|
}
|
|
374
413
|
|
|
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
414
|
/**
|
|
388
415
|
* Override an event listener from `DelegateFocusMixin`
|
|
389
416
|
* @protected
|
|
@@ -410,7 +437,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
410
437
|
|
|
411
438
|
this.validate();
|
|
412
439
|
|
|
413
|
-
if (this.
|
|
440
|
+
if (this._inputElementValue === '' && this.value !== '') {
|
|
414
441
|
this.value = '';
|
|
415
442
|
}
|
|
416
443
|
}
|
|
@@ -537,9 +564,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
537
564
|
* @return {boolean} True if the value is valid
|
|
538
565
|
*/
|
|
539
566
|
checkValidity() {
|
|
567
|
+
const inputValue = this._inputElementValue;
|
|
540
568
|
const inputValid =
|
|
541
|
-
!
|
|
542
|
-
(!!this._selectedDate &&
|
|
569
|
+
!inputValue ||
|
|
570
|
+
(!!this._selectedDate && inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
|
|
543
571
|
const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
|
|
544
572
|
|
|
545
573
|
let inputValidity = true;
|
|
@@ -800,32 +828,38 @@ export const DatePickerMixin = (subclass) =>
|
|
|
800
828
|
|
|
801
829
|
/** @protected */
|
|
802
830
|
_onOverlayOpened() {
|
|
831
|
+
const content = this._overlayContent;
|
|
832
|
+
|
|
803
833
|
// Detect which date to show
|
|
804
834
|
const initialPosition = this._getInitialPosition();
|
|
805
|
-
|
|
835
|
+
content.initialPosition = initialPosition;
|
|
806
836
|
|
|
807
837
|
// Scroll the date into view
|
|
808
|
-
const scrollFocusDate =
|
|
809
|
-
|
|
838
|
+
const scrollFocusDate = content.focusedDate || initialPosition;
|
|
839
|
+
content.scrollToDate(scrollFocusDate);
|
|
810
840
|
|
|
811
841
|
// Ensure the date is focused
|
|
812
842
|
this._ignoreFocusedDateChange = true;
|
|
813
|
-
|
|
843
|
+
content.focusedDate = scrollFocusDate;
|
|
814
844
|
this._ignoreFocusedDateChange = false;
|
|
815
845
|
|
|
816
846
|
window.addEventListener('scroll', this._boundOnScroll, true);
|
|
817
847
|
|
|
818
848
|
if (this._focusOverlayOnOpen) {
|
|
819
|
-
|
|
849
|
+
content.focusDateElement();
|
|
820
850
|
this._focusOverlayOnOpen = false;
|
|
821
851
|
} else {
|
|
822
852
|
this._focus();
|
|
823
853
|
}
|
|
824
854
|
|
|
825
|
-
|
|
826
|
-
|
|
855
|
+
const input = this._nativeInput;
|
|
856
|
+
if (this._noInput && input) {
|
|
857
|
+
input.blur();
|
|
827
858
|
this._overlayContent.focusDateElement();
|
|
828
859
|
}
|
|
860
|
+
|
|
861
|
+
const focusables = this._noInput ? content : [input, content];
|
|
862
|
+
this.__showOthers = hideOthers(focusables);
|
|
829
863
|
}
|
|
830
864
|
|
|
831
865
|
/** @private */
|
|
@@ -845,7 +879,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
845
879
|
// Select the parsed input or focused date
|
|
846
880
|
this._ignoreFocusedDateChange = true;
|
|
847
881
|
if (this.i18n.parseDate) {
|
|
848
|
-
const inputValue = this.
|
|
882
|
+
const inputValue = this._inputElementValue || '';
|
|
849
883
|
const parsedDate = this._getParsedDate(inputValue);
|
|
850
884
|
|
|
851
885
|
if (this._isValidDate(parsedDate)) {
|
|
@@ -864,6 +898,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
864
898
|
|
|
865
899
|
/** @protected */
|
|
866
900
|
_onOverlayClosed() {
|
|
901
|
+
// Reset `aria-hidden` state.
|
|
902
|
+
if (this.__showOthers) {
|
|
903
|
+
this.__showOthers();
|
|
904
|
+
this.__showOthers = null;
|
|
905
|
+
}
|
|
906
|
+
|
|
867
907
|
window.removeEventListener('scroll', this._boundOnScroll, true);
|
|
868
908
|
|
|
869
909
|
// No need to select date on close if it was confirmed by the user.
|
|
@@ -900,12 +940,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
900
940
|
/** @private */
|
|
901
941
|
_focusAndSelect() {
|
|
902
942
|
this._focus();
|
|
903
|
-
this._setSelectionRange(0, this.
|
|
943
|
+
this._setSelectionRange(0, this._inputElementValue.length);
|
|
904
944
|
}
|
|
905
945
|
|
|
906
946
|
/** @private */
|
|
907
947
|
_applyInputValue(date) {
|
|
908
|
-
this.
|
|
948
|
+
this._inputElementValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
|
|
909
949
|
}
|
|
910
950
|
|
|
911
951
|
/** @private */
|
|
@@ -933,7 +973,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
933
973
|
_onChange(event) {
|
|
934
974
|
// For change event on the native <input> blur, after the input is cleared,
|
|
935
975
|
// we schedule change event to be dispatched on date-picker blur.
|
|
936
|
-
if (this.
|
|
976
|
+
if (this._inputElementValue === '') {
|
|
937
977
|
this.__dispatchChange = true;
|
|
938
978
|
}
|
|
939
979
|
|
|
@@ -970,8 +1010,8 @@ export const DatePickerMixin = (subclass) =>
|
|
|
970
1010
|
*/
|
|
971
1011
|
_onClearButtonClick(event) {
|
|
972
1012
|
event.preventDefault();
|
|
1013
|
+
this._inputElementValue = '';
|
|
973
1014
|
this.value = '';
|
|
974
|
-
this._inputValue = '';
|
|
975
1015
|
this.validate();
|
|
976
1016
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
|
|
977
1017
|
}
|
|
@@ -1085,7 +1125,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1085
1125
|
}
|
|
1086
1126
|
|
|
1087
1127
|
/** @private */
|
|
1088
|
-
_getParsedDate(inputValue = this.
|
|
1128
|
+
_getParsedDate(inputValue = this._inputElementValue) {
|
|
1089
1129
|
const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
|
|
1090
1130
|
const parsedDate = dateObject && parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
|
|
1091
1131
|
return parsedDate;
|
|
@@ -1109,7 +1149,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1109
1149
|
|
|
1110
1150
|
/** @private */
|
|
1111
1151
|
_userInputValueChanged() {
|
|
1112
|
-
if (this.
|
|
1152
|
+
if (this._inputElementValue) {
|
|
1113
1153
|
const parsedDate = this._getParsedDate();
|
|
1114
1154
|
|
|
1115
1155
|
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-alpha2",
|
|
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-alpha2/#/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-alpha2/#/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-alpha2/#/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-alpha2/#/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-alpha2",
|
|
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-alpha2/#/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-alpha2/#/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-alpha2/#/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-alpha2/#/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
|
{
|