@vaadin/date-picker 24.7.0-alpha3 → 24.7.0-alpha4
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 +12 -12
- package/src/vaadin-date-picker-helper.js +1 -1
- package/src/vaadin-date-picker-light.d.ts +1 -1
- package/src/vaadin-date-picker-light.js +1 -1
- package/src/vaadin-date-picker-mixin.d.ts +1 -1
- package/src/vaadin-date-picker-mixin.js +2 -4
- package/src/vaadin-date-picker-month-scroller.js +1 -1
- package/src/vaadin-date-picker-overlay-content-mixin.js +1 -1
- package/src/vaadin-date-picker-overlay-content-styles.js +1 -1
- package/src/vaadin-date-picker-overlay-content.js +1 -1
- package/src/vaadin-date-picker-overlay-mixin.js +1 -1
- package/src/vaadin-date-picker-overlay-styles.js +1 -1
- package/src/vaadin-date-picker-overlay.js +1 -1
- package/src/vaadin-date-picker-styles.js +1 -1
- package/src/vaadin-date-picker-year-mixin.js +1 -1
- package/src/vaadin-date-picker-year-scroller.js +1 -1
- package/src/vaadin-date-picker-year.js +1 -1
- package/src/vaadin-date-picker.d.ts +1 -1
- package/src/vaadin-date-picker.js +1 -1
- package/src/vaadin-infinite-scroller.js +1 -1
- package/src/vaadin-lit-date-picker-overlay-content.js +1 -1
- package/src/vaadin-lit-date-picker-overlay.js +1 -1
- package/src/vaadin-lit-date-picker-year.js +1 -1
- package/src/vaadin-lit-date-picker.js +1 -1
- package/src/vaadin-lit-month-calendar.js +24 -49
- package/src/vaadin-month-calendar-mixin.js +82 -10
- package/src/vaadin-month-calendar-styles.js +1 -1
- package/src/vaadin-month-calendar.js +14 -113
- 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.7.0-
|
|
3
|
+
"version": "24.7.0-alpha4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,19 +36,19 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.7.0-
|
|
40
|
-
"@vaadin/button": "24.7.0-
|
|
41
|
-
"@vaadin/component-base": "24.7.0-
|
|
42
|
-
"@vaadin/field-base": "24.7.0-
|
|
43
|
-
"@vaadin/input-container": "24.7.0-
|
|
44
|
-
"@vaadin/overlay": "24.7.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.7.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.7.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.7.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.7.0-alpha4",
|
|
40
|
+
"@vaadin/button": "24.7.0-alpha4",
|
|
41
|
+
"@vaadin/component-base": "24.7.0-alpha4",
|
|
42
|
+
"@vaadin/field-base": "24.7.0-alpha4",
|
|
43
|
+
"@vaadin/input-container": "24.7.0-alpha4",
|
|
44
|
+
"@vaadin/overlay": "24.7.0-alpha4",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.7.0-alpha4",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.7.0-alpha4",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.7.0-alpha4",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/chai-plugins": "24.7.0-
|
|
51
|
+
"@vaadin/chai-plugins": "24.7.0-alpha4",
|
|
52
52
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
53
53
|
"sinon": "^18.0.0"
|
|
54
54
|
},
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "d7165cebf9dcf6a7e9e22f6353662d33404b4856"
|
|
60
60
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { hideOthers } from '@vaadin/a11y-base/src/aria-hidden.js';
|
|
@@ -326,7 +326,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
326
326
|
_minDate: {
|
|
327
327
|
type: Date,
|
|
328
328
|
computed: '__computeMinOrMaxDate(min)',
|
|
329
|
-
sync: true,
|
|
330
329
|
},
|
|
331
330
|
|
|
332
331
|
/**
|
|
@@ -337,7 +336,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
337
336
|
_maxDate: {
|
|
338
337
|
type: Date,
|
|
339
338
|
computed: '__computeMinOrMaxDate(max)',
|
|
340
|
-
sync: true,
|
|
341
339
|
},
|
|
342
340
|
|
|
343
341
|
/** @private */
|
|
@@ -1160,7 +1158,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1160
1158
|
return;
|
|
1161
1159
|
}
|
|
1162
1160
|
|
|
1163
|
-
if (this.clearButtonVisible && !!this.value) {
|
|
1161
|
+
if (this.clearButtonVisible && !!this.value && !this.readonly) {
|
|
1164
1162
|
// Stop event from propagating to the host element
|
|
1165
1163
|
// to avoid closing dialog when clearing on Esc
|
|
1166
1164
|
event.stopPropagation();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { flush } from '@polymer/polymer/lib/utils/flush.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2015 -
|
|
3
|
+
* Copyright (c) 2015 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { isElementFocusable } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/input-container/src/vaadin-input-container.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { flush } from '@polymer/polymer/lib/utils/flush.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/input-container/src/vaadin-lit-input-container.js';
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, LitElement } from 'lit';
|
|
7
7
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
8
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
9
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
-
import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
|
|
11
10
|
import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
|
|
12
11
|
import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
|
|
13
12
|
|
|
@@ -26,9 +25,9 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
|
|
|
26
25
|
|
|
27
26
|
/** @protected */
|
|
28
27
|
render() {
|
|
29
|
-
const weekDayNames = this.
|
|
28
|
+
const weekDayNames = this.__computeWeekDayNames(this.i18n, this.showWeekNumbers);
|
|
30
29
|
const weeks = this._weeks;
|
|
31
|
-
const hideWeekSeparator = !this.
|
|
30
|
+
const hideWeekSeparator = !this.__computeShowWeekSeparator(this.showWeekNumbers, this.i18n);
|
|
32
31
|
|
|
33
32
|
return html`
|
|
34
33
|
<div part="month-header" id="month-header" aria-hidden="true">${this._getTitle(this.month, this.i18n)}</div>
|
|
@@ -56,37 +55,33 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
|
|
|
56
55
|
(week) => html`
|
|
57
56
|
<tr role="row">
|
|
58
57
|
<td part="week-number" aria-hidden="true" ?hidden="${hideWeekSeparator}">
|
|
59
|
-
${this.
|
|
58
|
+
${this.__computeWeekNumber(week)}
|
|
60
59
|
</td>
|
|
61
60
|
${week.map((date) => {
|
|
62
|
-
const isFocused =
|
|
63
|
-
dateEquals(date, this.focusedDate) && (this.__hasFocus || dateEquals(date, this.enteredDate));
|
|
64
|
-
const tabIndex = dateEquals(date, this.focusedDate) ? '0' : '-1';
|
|
65
|
-
const isSelected = dateEquals(date, this.selectedDate);
|
|
66
|
-
const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled);
|
|
67
|
-
const greaterThanToday = date > normalizeDate(new Date());
|
|
68
|
-
const lessThanToday = date < normalizeDate(new Date());
|
|
69
|
-
|
|
70
|
-
const parts = [
|
|
71
|
-
'date',
|
|
72
|
-
isDisabled && 'disabled',
|
|
73
|
-
isFocused && 'focused',
|
|
74
|
-
isSelected && 'selected',
|
|
75
|
-
this._isToday(date) && 'today',
|
|
76
|
-
greaterThanToday && 'future',
|
|
77
|
-
lessThanToday && 'past',
|
|
78
|
-
].filter(Boolean);
|
|
79
|
-
|
|
80
61
|
return html`
|
|
81
62
|
<td
|
|
82
63
|
role="gridcell"
|
|
83
|
-
part="${
|
|
64
|
+
part="${this.__computeDatePart(
|
|
65
|
+
date,
|
|
66
|
+
this.focusedDate,
|
|
67
|
+
this.selectedDate,
|
|
68
|
+
this.minDate,
|
|
69
|
+
this.maxDate,
|
|
70
|
+
this.isDateDisabled,
|
|
71
|
+
this.enteredDate,
|
|
72
|
+
this.__hasFocus,
|
|
73
|
+
)}"
|
|
84
74
|
.date="${date}"
|
|
85
|
-
?disabled="${
|
|
86
|
-
tabindex="${
|
|
87
|
-
aria-selected="${
|
|
88
|
-
aria-disabled="${
|
|
89
|
-
|
|
75
|
+
?disabled="${this.__isDayDisabled(date, this.minDate, this.maxDate, this.isDateDisabled)}"
|
|
76
|
+
tabindex="${this.__computeDayTabIndex(date, this.focusedDate)}"
|
|
77
|
+
aria-selected="${this.__computeDayAriaSelected(date, this.selectedDate)}"
|
|
78
|
+
aria-disabled="${this.__computeDayAriaDisabled(
|
|
79
|
+
date,
|
|
80
|
+
this.minDate,
|
|
81
|
+
this.maxDate,
|
|
82
|
+
this.isDateDisabled,
|
|
83
|
+
)}"
|
|
84
|
+
aria-label="${this.__computeDayAriaLabel(date)}"
|
|
90
85
|
>${this._getDate(date)}</td
|
|
91
86
|
>
|
|
92
87
|
`;
|
|
@@ -98,26 +93,6 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
|
|
|
98
93
|
</table>
|
|
99
94
|
`;
|
|
100
95
|
}
|
|
101
|
-
|
|
102
|
-
/** @protected */
|
|
103
|
-
willUpdate(props) {
|
|
104
|
-
// Calculate these properties in `willUpdate()` instead of marking
|
|
105
|
-
// them as `computed` to avoid extra update because of `sync: true`
|
|
106
|
-
if (props.has('month') || props.has('i18n')) {
|
|
107
|
-
this._days = this._getDays(this.month, this.i18n);
|
|
108
|
-
this._weeks = this._getWeeks(this._days);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
if (props.has('month') || props.has('minDate') || props.has('maxDate')) {
|
|
112
|
-
this.disabled = this._isDisabled(this.month, this.minDate, this.maxDate);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
if (props.has('showWeekNumbers') || props.has('i18n')) {
|
|
116
|
-
// Currently only supported for locales that start the week on Monday.
|
|
117
|
-
this._showWeekNumbers = this.showWeekNumbers && this.i18n && this.i18n.firstDayOfWeek === 1;
|
|
118
|
-
this.toggleAttribute('week-numbers', this._showWeekNumbers);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
96
|
}
|
|
122
97
|
|
|
123
98
|
defineCustomElement(MonthCalendar);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
7
7
|
import { addListener } from '@vaadin/component-base/src/gestures.js';
|
|
8
|
-
import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js';
|
|
8
|
+
import { dateAllowed, dateEquals, getISOWeekNumber, normalizeDate } from './vaadin-date-picker-helper.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* @polymerMixin
|
|
@@ -98,16 +98,19 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
98
98
|
disabled: {
|
|
99
99
|
type: Boolean,
|
|
100
100
|
reflectToAttribute: true,
|
|
101
|
+
computed: '__computeDisabled(month, minDate, maxDate)',
|
|
101
102
|
},
|
|
102
103
|
|
|
103
104
|
/** @protected */
|
|
104
105
|
_days: {
|
|
105
106
|
type: Array,
|
|
107
|
+
computed: '__computeDays(month, i18n, minDate, maxDate, isDateDisabled)',
|
|
106
108
|
},
|
|
107
109
|
|
|
108
110
|
/** @protected */
|
|
109
111
|
_weeks: {
|
|
110
112
|
type: Array,
|
|
113
|
+
computed: '__computeWeeks(_days)',
|
|
111
114
|
},
|
|
112
115
|
|
|
113
116
|
/** @private */
|
|
@@ -123,7 +126,7 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
123
126
|
}
|
|
124
127
|
|
|
125
128
|
static get observers() {
|
|
126
|
-
return ['__focusedDateChanged(focusedDate, _days)'];
|
|
129
|
+
return ['__focusedDateChanged(focusedDate, _days)', '_showWeekNumbersChanged(showWeekNumbers, i18n)'];
|
|
127
130
|
}
|
|
128
131
|
|
|
129
132
|
get focusableDateElement() {
|
|
@@ -148,7 +151,7 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
148
151
|
* Returns true if all the dates in the month are out of the allowed range
|
|
149
152
|
* @protected
|
|
150
153
|
*/
|
|
151
|
-
|
|
154
|
+
__computeDisabled(month, minDate, maxDate) {
|
|
152
155
|
// First day of the month
|
|
153
156
|
const firstDate = new Date(0, 0);
|
|
154
157
|
firstDate.setFullYear(month.getFullYear());
|
|
@@ -205,7 +208,7 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
205
208
|
}
|
|
206
209
|
|
|
207
210
|
/** @protected */
|
|
208
|
-
|
|
211
|
+
__computeWeekDayNames(i18n, showWeekNumbers) {
|
|
209
212
|
if (i18n === undefined || showWeekNumbers === undefined) {
|
|
210
213
|
return [];
|
|
211
214
|
}
|
|
@@ -239,7 +242,7 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
239
242
|
}
|
|
240
243
|
|
|
241
244
|
/** @protected */
|
|
242
|
-
|
|
245
|
+
__computeShowWeekSeparator(showWeekNumbers, i18n) {
|
|
243
246
|
// Currently only supported for locales that start the week on Monday.
|
|
244
247
|
return showWeekNumbers && i18n && i18n.firstDayOfWeek === 1;
|
|
245
248
|
}
|
|
@@ -250,7 +253,7 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
250
253
|
}
|
|
251
254
|
|
|
252
255
|
/** @protected */
|
|
253
|
-
|
|
256
|
+
__computeDays(month, i18n) {
|
|
254
257
|
if (month === undefined || i18n === undefined) {
|
|
255
258
|
return [];
|
|
256
259
|
}
|
|
@@ -278,7 +281,7 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
278
281
|
}
|
|
279
282
|
|
|
280
283
|
/** @protected */
|
|
281
|
-
|
|
284
|
+
__computeWeeks(days) {
|
|
282
285
|
return days.reduce((acc, day, i) => {
|
|
283
286
|
if (i % 7 === 0) {
|
|
284
287
|
acc.push([]);
|
|
@@ -304,7 +307,7 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
304
307
|
}
|
|
305
308
|
|
|
306
309
|
/** @protected */
|
|
307
|
-
|
|
310
|
+
__computeWeekNumber(days) {
|
|
308
311
|
const date = days.reduce((acc, d) => {
|
|
309
312
|
return !acc && d ? d : acc;
|
|
310
313
|
});
|
|
@@ -313,7 +316,7 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
313
316
|
}
|
|
314
317
|
|
|
315
318
|
/** @protected */
|
|
316
|
-
|
|
319
|
+
__computeDayAriaLabel(date) {
|
|
317
320
|
if (!date) {
|
|
318
321
|
return '';
|
|
319
322
|
}
|
|
@@ -328,4 +331,73 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
328
331
|
|
|
329
332
|
return ariaLabel;
|
|
330
333
|
}
|
|
334
|
+
|
|
335
|
+
/** @private */
|
|
336
|
+
_showWeekNumbersChanged(showWeekNumbers, i18n) {
|
|
337
|
+
if (this.__computeShowWeekSeparator(showWeekNumbers, i18n)) {
|
|
338
|
+
this.setAttribute('week-numbers', '');
|
|
339
|
+
} else {
|
|
340
|
+
this.removeAttribute('week-numbers');
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
345
|
+
__computeDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) {
|
|
346
|
+
const result = ['date'];
|
|
347
|
+
|
|
348
|
+
if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
|
|
349
|
+
result.push('disabled');
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
|
|
353
|
+
result.push('focused');
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
if (this.__isDaySelected(date, selectedDate)) {
|
|
357
|
+
result.push('selected');
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
if (this._isToday(date)) {
|
|
361
|
+
result.push('today');
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
if (date < normalizeDate(new Date())) {
|
|
365
|
+
result.push('past');
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
if (date > normalizeDate(new Date())) {
|
|
369
|
+
result.push('future');
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
return result.join(' ');
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
/** @private */
|
|
376
|
+
__isDaySelected(date, selectedDate) {
|
|
377
|
+
return dateEquals(date, selectedDate);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/** @private */
|
|
381
|
+
__computeDayAriaSelected(date, selectedDate) {
|
|
382
|
+
return String(this.__isDaySelected(date, selectedDate));
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
/** @private */
|
|
386
|
+
__isDayDisabled(date, minDate, maxDate, isDateDisabled) {
|
|
387
|
+
return !dateAllowed(date, minDate, maxDate, isDateDisabled);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
/** @private */
|
|
391
|
+
__computeDayAriaDisabled(date, min, max, isDateDisabled) {
|
|
392
|
+
if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) {
|
|
393
|
+
return 'false';
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
return String(this.__isDayDisabled(date, min, max, isDateDisabled));
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/** @private */
|
|
400
|
+
__computeDayTabIndex(date, focusedDate) {
|
|
401
|
+
return dateEquals(date, focusedDate) ? '0' : '-1';
|
|
402
|
+
}
|
|
331
403
|
};
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import '@polymer/polymer/lib/elements/dom-repeat.js';
|
|
7
7
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
8
8
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
9
|
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
-
import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
|
|
11
10
|
import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
|
|
12
11
|
import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
|
|
13
12
|
|
|
@@ -33,8 +32,8 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
|
|
|
33
32
|
>
|
|
34
33
|
<thead id="weekdays-container">
|
|
35
34
|
<tr role="row" part="weekdays">
|
|
36
|
-
<th part="weekday" aria-hidden="true" hidden$="[[!
|
|
37
|
-
<template is="dom-repeat" items="[[
|
|
35
|
+
<th part="weekday" aria-hidden="true" hidden$="[[!__computeShowWeekSeparator(showWeekNumbers, i18n)]]"></th>
|
|
36
|
+
<template is="dom-repeat" items="[[__computeWeekDayNames(i18n, showWeekNumbers)]]">
|
|
38
37
|
<th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]" aria-hidden="true">
|
|
39
38
|
[[item.weekDayShort]]
|
|
40
39
|
</th>
|
|
@@ -44,19 +43,23 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
|
|
|
44
43
|
<tbody id="days-container">
|
|
45
44
|
<template is="dom-repeat" items="[[_weeks]]" as="week">
|
|
46
45
|
<tr role="row">
|
|
47
|
-
<td
|
|
48
|
-
|
|
46
|
+
<td
|
|
47
|
+
part="week-number"
|
|
48
|
+
aria-hidden="true"
|
|
49
|
+
hidden$="[[!__computeShowWeekSeparator(showWeekNumbers, i18n)]]"
|
|
50
|
+
>
|
|
51
|
+
[[__computeWeekNumber(week)]]
|
|
49
52
|
</td>
|
|
50
53
|
<template is="dom-repeat" items="[[week]]">
|
|
51
54
|
<td
|
|
52
55
|
role="gridcell"
|
|
53
|
-
part$="[[
|
|
56
|
+
part$="[[__computeDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]"
|
|
54
57
|
date="[[item]]"
|
|
55
|
-
tabindex$="[[
|
|
58
|
+
tabindex$="[[__computeDayTabIndex(item, focusedDate)]]"
|
|
56
59
|
disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
|
|
57
|
-
aria-selected$="[[
|
|
58
|
-
aria-disabled$="[[
|
|
59
|
-
aria-label$="[[
|
|
60
|
+
aria-selected$="[[__computeDayAriaSelected(item, selectedDate)]]"
|
|
61
|
+
aria-disabled$="[[__computeDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]"
|
|
62
|
+
aria-label$="[[__computeDayAriaLabel(item)]]"
|
|
60
63
|
>[[_getDate(item)]]</td
|
|
61
64
|
>
|
|
62
65
|
</template>
|
|
@@ -70,108 +73,6 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
|
|
|
70
73
|
static get is() {
|
|
71
74
|
return 'vaadin-month-calendar';
|
|
72
75
|
}
|
|
73
|
-
|
|
74
|
-
static get properties() {
|
|
75
|
-
return {
|
|
76
|
-
/** @protected */
|
|
77
|
-
_days: {
|
|
78
|
-
type: Array,
|
|
79
|
-
computed: '_getDays(month, i18n, minDate, maxDate, isDateDisabled)',
|
|
80
|
-
},
|
|
81
|
-
|
|
82
|
-
/** @protected */
|
|
83
|
-
_weeks: {
|
|
84
|
-
type: Array,
|
|
85
|
-
computed: '_getWeeks(_days)',
|
|
86
|
-
},
|
|
87
|
-
|
|
88
|
-
disabled: {
|
|
89
|
-
type: Boolean,
|
|
90
|
-
reflectToAttribute: true,
|
|
91
|
-
computed: '_isDisabled(month, minDate, maxDate)',
|
|
92
|
-
},
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
static get observers() {
|
|
97
|
-
return ['_showWeekNumbersChanged(showWeekNumbers, i18n)'];
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/** @private */
|
|
101
|
-
_showWeekNumbersChanged(showWeekNumbers, i18n) {
|
|
102
|
-
if (showWeekNumbers && i18n && i18n.firstDayOfWeek === 1) {
|
|
103
|
-
this.setAttribute('week-numbers', '');
|
|
104
|
-
} else {
|
|
105
|
-
this.removeAttribute('week-numbers');
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/** @private */
|
|
110
|
-
// eslint-disable-next-line @typescript-eslint/max-params
|
|
111
|
-
__getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) {
|
|
112
|
-
const result = ['date'];
|
|
113
|
-
const greaterThanToday = date > normalizeDate(new Date());
|
|
114
|
-
const lessThanToday = date < normalizeDate(new Date());
|
|
115
|
-
|
|
116
|
-
if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
|
|
117
|
-
result.push('disabled');
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
|
|
121
|
-
result.push('focused');
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
if (this.__isDaySelected(date, selectedDate)) {
|
|
125
|
-
result.push('selected');
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
if (this._isToday(date)) {
|
|
129
|
-
result.push('today');
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
if (lessThanToday) {
|
|
133
|
-
result.push('past');
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
if (greaterThanToday) {
|
|
137
|
-
result.push('future');
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
return result.join(' ');
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/** @private */
|
|
144
|
-
__isDaySelected(date, selectedDate) {
|
|
145
|
-
return dateEquals(date, selectedDate);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
/** @private */
|
|
149
|
-
__getDayAriaSelected(date, selectedDate) {
|
|
150
|
-
if (this.__isDaySelected(date, selectedDate)) {
|
|
151
|
-
return 'true';
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
/** @private */
|
|
156
|
-
__isDayDisabled(date, minDate, maxDate, isDateDisabled) {
|
|
157
|
-
return !dateAllowed(date, minDate, maxDate, isDateDisabled);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
/** @private */
|
|
161
|
-
__getDayAriaDisabled(date, min, max, isDateDisabled) {
|
|
162
|
-
if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) {
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
if (this.__isDayDisabled(date, min, max, isDateDisabled)) {
|
|
167
|
-
return 'true';
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
/** @private */
|
|
172
|
-
__getDayTabindex(date, focusedDate) {
|
|
173
|
-
return dateEquals(date, focusedDate) ? '0' : '-1';
|
|
174
|
-
}
|
|
175
76
|
}
|
|
176
77
|
|
|
177
78
|
defineCustomElement(MonthCalendar);
|
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.7.0-
|
|
4
|
+
"version": "24.7.0-alpha4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -366,7 +366,7 @@
|
|
|
366
366
|
},
|
|
367
367
|
{
|
|
368
368
|
"name": "vaadin-date-picker",
|
|
369
|
-
"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.7.0-
|
|
369
|
+
"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.7.0-alpha4/#/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.7.0-alpha4/#/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.7.0-alpha4/#/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.7.0-alpha4/#/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`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\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",
|
|
370
370
|
"attributes": [
|
|
371
371
|
{
|
|
372
372
|
"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.7.0-
|
|
4
|
+
"version": "24.7.0-alpha4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
},
|
|
171
171
|
{
|
|
172
172
|
"name": "vaadin-date-picker",
|
|
173
|
-
"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.7.0-
|
|
173
|
+
"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.7.0-alpha4/#/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.7.0-alpha4/#/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.7.0-alpha4/#/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.7.0-alpha4/#/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`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\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",
|
|
174
174
|
"extension": true,
|
|
175
175
|
"attributes": [
|
|
176
176
|
{
|