@vaadin/date-picker 24.0.0-alpha1 → 24.0.0-alpha3
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 +10 -10
- package/src/vaadin-date-picker-helper.d.ts +17 -0
- package/src/vaadin-date-picker-helper.js +47 -0
- package/src/vaadin-date-picker-mixin.d.ts +11 -0
- package/src/vaadin-date-picker-mixin.js +29 -25
- package/src/vaadin-date-picker-overlay-content.js +16 -24
- package/src/vaadin-date-picker.d.ts +4 -2
- package/src/vaadin-date-picker.js +4 -2
- package/src/vaadin-month-calendar.js +31 -8
- package/theme/lumo/vaadin-month-calendar-styles.js +16 -16
- package/theme/material/vaadin-month-calendar-styles.js +14 -14
- package/web-types.json +4 -4
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.0.0-
|
|
3
|
+
"version": "24.0.0-alpha3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/button": "24.0.0-
|
|
40
|
-
"@vaadin/component-base": "24.0.0-
|
|
41
|
-
"@vaadin/field-base": "24.0.0-
|
|
42
|
-
"@vaadin/input-container": "24.0.0-
|
|
43
|
-
"@vaadin/overlay": "24.0.0-
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "24.0.0-
|
|
45
|
-
"@vaadin/vaadin-material-styles": "24.0.0-
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "24.0.0-
|
|
39
|
+
"@vaadin/button": "24.0.0-alpha3",
|
|
40
|
+
"@vaadin/component-base": "24.0.0-alpha3",
|
|
41
|
+
"@vaadin/field-base": "24.0.0-alpha3",
|
|
42
|
+
"@vaadin/input-container": "24.0.0-alpha3",
|
|
43
|
+
"@vaadin/overlay": "24.0.0-alpha3",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha3",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "24.0.0-alpha3",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha3"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "7a013a3c5a56abd61dd4f7773c6ec77c3541bdf2"
|
|
58
58
|
}
|
|
@@ -48,3 +48,20 @@ declare function extractDateParts(date: Date): { day: number; month: number; yea
|
|
|
48
48
|
declare function dateAfterXMonths(months: number): number;
|
|
49
49
|
|
|
50
50
|
export { dateAfterXMonths };
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Calculate the year of the date based on the provided reference date
|
|
54
|
+
* Gets a two-digit year and returns a full year.
|
|
55
|
+
*/
|
|
56
|
+
declare function getAdjustedYear(referenceDate: Date, year: number, month?: number, day?: number): Date;
|
|
57
|
+
|
|
58
|
+
export { getAdjustedYear };
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Parse date string of one of the following date formats:
|
|
62
|
+
* - ISO 8601 `"YYYY-MM-DD"`
|
|
63
|
+
* - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
|
|
64
|
+
*/
|
|
65
|
+
declare function parseDate(str: string): Date;
|
|
66
|
+
|
|
67
|
+
export { parseDate };
|
|
@@ -117,3 +117,50 @@ export function dateAfterXMonths(months) {
|
|
|
117
117
|
result.setMonth(parseInt(months) + today.getMonth());
|
|
118
118
|
return result;
|
|
119
119
|
}
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* Calculate the year of the date based on the provided reference date.
|
|
123
|
+
* Gets a two-digit year and returns a full year.
|
|
124
|
+
* @param {!Date} referenceDate The date to act as basis in the calculation
|
|
125
|
+
* @param {!number} year Should be in the range of [0, 99]
|
|
126
|
+
* @param {number} month
|
|
127
|
+
* @param {number} day
|
|
128
|
+
* @return {!number} Adjusted year value
|
|
129
|
+
*/
|
|
130
|
+
export function getAdjustedYear(referenceDate, year, month = 0, day = 1) {
|
|
131
|
+
if (year > 99) {
|
|
132
|
+
throw new Error('The provided year cannot have more than 2 digits.');
|
|
133
|
+
}
|
|
134
|
+
if (year < 0) {
|
|
135
|
+
throw new Error('The provided year cannot be negative.');
|
|
136
|
+
}
|
|
137
|
+
// Year values up to 2 digits are parsed based on the reference date.
|
|
138
|
+
let adjustedYear = year + Math.floor(referenceDate.getFullYear() / 100) * 100;
|
|
139
|
+
if (referenceDate < new Date(adjustedYear - 50, month, day)) {
|
|
140
|
+
adjustedYear -= 100;
|
|
141
|
+
} else if (referenceDate > new Date(adjustedYear + 50, month, day)) {
|
|
142
|
+
adjustedYear += 100;
|
|
143
|
+
}
|
|
144
|
+
return adjustedYear;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* Parse date string of one of the following date formats:
|
|
149
|
+
* - ISO 8601 `"YYYY-MM-DD"`
|
|
150
|
+
* - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
|
|
151
|
+
* @param {!string} str Date string to parse
|
|
152
|
+
* @return {Date} Parsed date
|
|
153
|
+
*/
|
|
154
|
+
export function parseDate(str) {
|
|
155
|
+
// Parsing with RegExp to ensure correct format
|
|
156
|
+
const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(str);
|
|
157
|
+
if (!parts) {
|
|
158
|
+
return undefined;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
const date = new Date(0, 0); // Wrong date (1900-01-01), but with midnight in local time
|
|
162
|
+
date.setFullYear(parseInt(parts[1], 10));
|
|
163
|
+
date.setMonth(parseInt(parts[2], 10) - 1);
|
|
164
|
+
date.setDate(parseInt(parts[3], 10));
|
|
165
|
+
return date;
|
|
166
|
+
}
|
|
@@ -24,6 +24,7 @@ export interface DatePickerI18n {
|
|
|
24
24
|
firstDayOfWeek: number;
|
|
25
25
|
today: string;
|
|
26
26
|
cancel: string;
|
|
27
|
+
referenceDate: string;
|
|
27
28
|
parseDate(date: string): DatePickerDate | undefined;
|
|
28
29
|
formatDate(date: DatePickerDate): string;
|
|
29
30
|
formatTitle(monthName: string, fullYear: number): string;
|
|
@@ -125,6 +126,16 @@ export declare class DatePickerMixinClass {
|
|
|
125
126
|
* // Translation of the Cancel button text.
|
|
126
127
|
* cancel: 'Cancel',
|
|
127
128
|
*
|
|
129
|
+
* // Used for adjusting the year value when parsing dates with short years.
|
|
130
|
+
* // The year values between 0 and 99 are evaluated and adjusted.
|
|
131
|
+
* // Example: for a referenceDate of 1970-10-30;
|
|
132
|
+
* // dateToBeParsed: 40-10-30, result: 1940-10-30
|
|
133
|
+
* // dateToBeParsed: 80-10-30, result: 1980-10-30
|
|
134
|
+
* // dateToBeParsed: 10-10-30, result: 2010-10-30
|
|
135
|
+
* // Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
|
|
136
|
+
* // The default value is the current date.
|
|
137
|
+
* referenceDate: '',
|
|
138
|
+
*
|
|
128
139
|
* // A function to format given `Object` as
|
|
129
140
|
* // date string. Object is in the format `{ day: ..., month: ..., year: ... }`
|
|
130
141
|
* // Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
@@ -10,7 +10,14 @@ import { MediaQueryController } from '@vaadin/component-base/src/media-query-con
|
|
|
10
10
|
import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
|
|
11
11
|
import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
12
12
|
import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
|
|
13
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
dateAllowed,
|
|
15
|
+
dateEquals,
|
|
16
|
+
extractDateParts,
|
|
17
|
+
getAdjustedYear,
|
|
18
|
+
getClosestDate,
|
|
19
|
+
parseDate,
|
|
20
|
+
} from './vaadin-date-picker-helper.js';
|
|
14
21
|
|
|
15
22
|
/**
|
|
16
23
|
* @polymerMixin
|
|
@@ -152,6 +159,16 @@ export const DatePickerMixin = (subclass) =>
|
|
|
152
159
|
* // Translation of the Cancel button text.
|
|
153
160
|
* cancel: 'Cancel',
|
|
154
161
|
*
|
|
162
|
+
* // Used for adjusting the year value when parsing dates with short years.
|
|
163
|
+
* // The year values between 0 and 99 are evaluated and adjusted.
|
|
164
|
+
* // Example: for a referenceDate of 1970-10-30;
|
|
165
|
+
* // dateToBeParsed: 40-10-30, result: 1940-10-30
|
|
166
|
+
* // dateToBeParsed: 80-10-30, result: 1980-10-30
|
|
167
|
+
* // dateToBeParsed: 10-10-30, result: 2010-10-30
|
|
168
|
+
* // Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
|
|
169
|
+
* // The default value is the current date.
|
|
170
|
+
* referenceDate: '',
|
|
171
|
+
*
|
|
155
172
|
* // A function to format given `Object` as
|
|
156
173
|
* // date string. Object is in the format `{ day: ..., month: ..., year: ... }`
|
|
157
174
|
* // Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
@@ -203,11 +220,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
203
220
|
firstDayOfWeek: 0,
|
|
204
221
|
today: 'Today',
|
|
205
222
|
cancel: 'Cancel',
|
|
206
|
-
|
|
223
|
+
referenceDate: '',
|
|
224
|
+
formatDate(d) {
|
|
207
225
|
const yearStr = String(d.year).replace(/\d+/, (y) => '0000'.substr(y.length) + y);
|
|
208
226
|
return [d.month + 1, d.day, yearStr].join('/');
|
|
209
227
|
},
|
|
210
|
-
parseDate
|
|
228
|
+
parseDate(text) {
|
|
211
229
|
const parts = text.split('/');
|
|
212
230
|
const today = new Date();
|
|
213
231
|
let date,
|
|
@@ -215,12 +233,13 @@ export const DatePickerMixin = (subclass) =>
|
|
|
215
233
|
year = today.getFullYear();
|
|
216
234
|
|
|
217
235
|
if (parts.length === 3) {
|
|
236
|
+
month = parseInt(parts[0]) - 1;
|
|
237
|
+
date = parseInt(parts[1]);
|
|
218
238
|
year = parseInt(parts[2]);
|
|
219
239
|
if (parts[2].length < 3 && year >= 0) {
|
|
220
|
-
|
|
240
|
+
const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
|
|
241
|
+
year = getAdjustedYear(usedReferenceDate, year, month, date);
|
|
221
242
|
}
|
|
222
|
-
month = parseInt(parts[0]) - 1;
|
|
223
|
-
date = parseInt(parts[1]);
|
|
224
243
|
} else if (parts.length === 2) {
|
|
225
244
|
month = parseInt(parts[0]) - 1;
|
|
226
245
|
date = parseInt(parts[1]);
|
|
@@ -606,21 +625,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
606
625
|
});
|
|
607
626
|
}
|
|
608
627
|
|
|
609
|
-
/** @private */
|
|
610
|
-
_parseDate(str) {
|
|
611
|
-
// Parsing with RegExp to ensure correct format
|
|
612
|
-
const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(str);
|
|
613
|
-
if (!parts) {
|
|
614
|
-
return;
|
|
615
|
-
}
|
|
616
|
-
|
|
617
|
-
const date = new Date(0, 0); // Wrong date (1900-01-01), but with midnight in local time
|
|
618
|
-
date.setFullYear(parseInt(parts[1], 10));
|
|
619
|
-
date.setMonth(parseInt(parts[2], 10) - 1);
|
|
620
|
-
date.setDate(parseInt(parts[3], 10));
|
|
621
|
-
return date;
|
|
622
|
-
}
|
|
623
|
-
|
|
624
628
|
/** @private */
|
|
625
629
|
// eslint-disable-next-line max-params
|
|
626
630
|
_isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
|
|
@@ -723,7 +727,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
723
727
|
* @override
|
|
724
728
|
*/
|
|
725
729
|
_valueChanged(value, oldValue) {
|
|
726
|
-
const newDate =
|
|
730
|
+
const newDate = parseDate(value);
|
|
727
731
|
|
|
728
732
|
if (value && !newDate) {
|
|
729
733
|
// The new value cannot be parsed, revert the old value.
|
|
@@ -790,7 +794,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
790
794
|
|
|
791
795
|
/** @protected */
|
|
792
796
|
_onOverlayOpened() {
|
|
793
|
-
const parsedInitialPosition =
|
|
797
|
+
const parsedInitialPosition = parseDate(this.initialPosition);
|
|
794
798
|
|
|
795
799
|
const initialPosition =
|
|
796
800
|
this._selectedDate || this._overlayContent.initialPosition || parsedInitialPosition || new Date();
|
|
@@ -1075,7 +1079,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1075
1079
|
/** @private */
|
|
1076
1080
|
_getParsedDate(inputValue = this._inputValue) {
|
|
1077
1081
|
const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
|
|
1078
|
-
const parsedDate = dateObject &&
|
|
1082
|
+
const parsedDate = dateObject && parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
|
|
1079
1083
|
return parsedDate;
|
|
1080
1084
|
}
|
|
1081
1085
|
|
|
@@ -1112,7 +1116,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1112
1116
|
|
|
1113
1117
|
/** @private */
|
|
1114
1118
|
__computeMinOrMaxDate(dateString) {
|
|
1115
|
-
return
|
|
1119
|
+
return parseDate(dateString);
|
|
1116
1120
|
}
|
|
1117
1121
|
|
|
1118
1122
|
/**
|
|
@@ -272,31 +272,27 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
272
272
|
);
|
|
273
273
|
|
|
274
274
|
this.addController(
|
|
275
|
-
new SlotController(
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
() => document.createElement('vaadin-button'),
|
|
279
|
-
(_, btn) => {
|
|
275
|
+
new SlotController(this, 'today-button', 'vaadin-button', {
|
|
276
|
+
observe: false,
|
|
277
|
+
initializer: (btn) => {
|
|
280
278
|
btn.setAttribute('theme', 'tertiary');
|
|
281
279
|
btn.addEventListener('keydown', (e) => this.__onTodayButtonKeyDown(e));
|
|
282
280
|
addListener(btn, 'tap', this._onTodayTap.bind(this));
|
|
283
281
|
this._todayButton = btn;
|
|
284
282
|
},
|
|
285
|
-
),
|
|
283
|
+
}),
|
|
286
284
|
);
|
|
287
285
|
|
|
288
286
|
this.addController(
|
|
289
|
-
new SlotController(
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
() => document.createElement('vaadin-button'),
|
|
293
|
-
(_, btn) => {
|
|
287
|
+
new SlotController(this, 'cancel-button', 'vaadin-button', {
|
|
288
|
+
observe: false,
|
|
289
|
+
initializer: (btn) => {
|
|
294
290
|
btn.setAttribute('theme', 'tertiary');
|
|
295
291
|
btn.addEventListener('keydown', (e) => this.__onCancelButtonKeyDown(e));
|
|
296
292
|
addListener(btn, 'tap', this._cancel.bind(this));
|
|
297
293
|
this._cancelButton = btn;
|
|
298
294
|
},
|
|
299
|
-
),
|
|
295
|
+
}),
|
|
300
296
|
);
|
|
301
297
|
|
|
302
298
|
this.__initMonthScroller();
|
|
@@ -335,11 +331,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
335
331
|
|
|
336
332
|
__initMonthScroller() {
|
|
337
333
|
this.addController(
|
|
338
|
-
new SlotController(
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
() => document.createElement('vaadin-date-picker-month-scroller'),
|
|
342
|
-
(_, scroller) => {
|
|
334
|
+
new SlotController(this, 'months', 'vaadin-date-picker-month-scroller', {
|
|
335
|
+
observe: false,
|
|
336
|
+
initializer: (scroller) => {
|
|
343
337
|
scroller.addEventListener('custom-scroll', () => {
|
|
344
338
|
this._onMonthScroll();
|
|
345
339
|
});
|
|
@@ -367,17 +361,15 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
367
361
|
|
|
368
362
|
this._monthScroller = scroller;
|
|
369
363
|
},
|
|
370
|
-
),
|
|
364
|
+
}),
|
|
371
365
|
);
|
|
372
366
|
}
|
|
373
367
|
|
|
374
368
|
__initYearScroller() {
|
|
375
369
|
this.addController(
|
|
376
|
-
new SlotController(
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
() => document.createElement('vaadin-date-picker-year-scroller'),
|
|
380
|
-
(_, scroller) => {
|
|
370
|
+
new SlotController(this, 'years', 'vaadin-date-picker-year-scroller', {
|
|
371
|
+
observe: false,
|
|
372
|
+
initializer: (scroller) => {
|
|
381
373
|
scroller.setAttribute('aria-hidden', 'true');
|
|
382
374
|
|
|
383
375
|
addListener(scroller, 'tap', (e) => {
|
|
@@ -398,7 +390,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
398
390
|
|
|
399
391
|
this._yearScroller = scroller;
|
|
400
392
|
},
|
|
401
|
-
),
|
|
393
|
+
}),
|
|
402
394
|
);
|
|
403
395
|
}
|
|
404
396
|
|
|
@@ -85,8 +85,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
|
|
|
85
85
|
* Attribute | Description | Part name
|
|
86
86
|
* -----------|--------------------------------------------------|-----------
|
|
87
87
|
* `opened` | Set when the date selector overlay is opened | :host
|
|
88
|
-
* `today` | Set on the date corresponding to the current day | date
|
|
89
|
-
* `selected` | Set on the selected date | date
|
|
90
88
|
*
|
|
91
89
|
* If you want to replace the default `<input>` and its container with a custom implementation to get full control
|
|
92
90
|
* over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
|
|
@@ -133,6 +131,10 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
|
|
|
133
131
|
* `week-numbers` | Week numbers container
|
|
134
132
|
* `week-number` | Week number element
|
|
135
133
|
* `date` | Date element
|
|
134
|
+
* `disabled` | Disabled date element
|
|
135
|
+
* `focused` | Focused date element
|
|
136
|
+
* `selected` | Selected date element
|
|
137
|
+
* `today` | Date element corresponding to the current day
|
|
136
138
|
*
|
|
137
139
|
* In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
|
|
138
140
|
*
|
|
@@ -53,8 +53,6 @@ registerStyles('vaadin-date-picker', inputFieldShared, { moduleId: 'vaadin-date-
|
|
|
53
53
|
* Attribute | Description | Part name
|
|
54
54
|
* -----------|--------------------------------------------------|-----------
|
|
55
55
|
* `opened` | Set when the date selector overlay is opened | :host
|
|
56
|
-
* `today` | Set on the date corresponding to the current day | date
|
|
57
|
-
* `selected` | Set on the selected date | date
|
|
58
56
|
*
|
|
59
57
|
* If you want to replace the default `<input>` and its container with a custom implementation to get full control
|
|
60
58
|
* over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
|
|
@@ -101,6 +99,10 @@ registerStyles('vaadin-date-picker', inputFieldShared, { moduleId: 'vaadin-date-
|
|
|
101
99
|
* `week-numbers` | Week numbers container
|
|
102
100
|
* `week-number` | Week number element
|
|
103
101
|
* `date` | Date element
|
|
102
|
+
* `disabled` | Disabled date element
|
|
103
|
+
* `focused` | Focused date element
|
|
104
|
+
* `selected` | Selected date element
|
|
105
|
+
* `today` | Date element corresponding to the current day
|
|
104
106
|
*
|
|
105
107
|
* In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
|
|
106
108
|
*
|
|
@@ -32,17 +32,21 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
|
|
|
32
32
|
display: flex;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
[part
|
|
35
|
+
[part~='date'] {
|
|
36
36
|
outline: none;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
[part~='disabled'] {
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
39
43
|
[part='week-number'][hidden],
|
|
40
44
|
[part='weekday'][hidden] {
|
|
41
45
|
display: none;
|
|
42
46
|
}
|
|
43
47
|
|
|
44
48
|
[part='weekday'],
|
|
45
|
-
[part
|
|
49
|
+
[part~='date'] {
|
|
46
50
|
width: calc(100% / 7);
|
|
47
51
|
padding: 0;
|
|
48
52
|
font-weight: normal;
|
|
@@ -56,7 +60,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
|
|
|
56
60
|
}
|
|
57
61
|
|
|
58
62
|
:host([week-numbers]) [part='weekday']:not(:empty),
|
|
59
|
-
:host([week-numbers]) [part
|
|
63
|
+
:host([week-numbers]) [part~='date'] {
|
|
60
64
|
width: 12.5%;
|
|
61
65
|
}
|
|
62
66
|
</style>
|
|
@@ -99,12 +103,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
|
|
|
99
103
|
<template is="dom-repeat" items="[[week]]">
|
|
100
104
|
<td
|
|
101
105
|
role="gridcell"
|
|
102
|
-
part
|
|
106
|
+
part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate)]]"
|
|
103
107
|
date="[[item]]"
|
|
104
|
-
today$="[[_isToday(item)]]"
|
|
105
|
-
focused$="[[__isDayFocused(item, focusedDate)]]"
|
|
106
108
|
tabindex$="[[__getDayTabindex(item, focusedDate)]]"
|
|
107
|
-
selected$="[[__isDaySelected(item, selectedDate)]]"
|
|
108
109
|
disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
|
|
109
110
|
aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
|
|
110
111
|
aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
|
|
@@ -211,7 +212,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
|
|
|
211
212
|
}
|
|
212
213
|
|
|
213
214
|
get focusableDateElement() {
|
|
214
|
-
return [...this.shadowRoot.querySelectorAll('[part
|
|
215
|
+
return [...this.shadowRoot.querySelectorAll('[part~=date]')].find((datePart) => {
|
|
215
216
|
return dateEquals(datePart.date, this.focusedDate);
|
|
216
217
|
});
|
|
217
218
|
}
|
|
@@ -369,6 +370,28 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
|
|
|
369
370
|
e.preventDefault();
|
|
370
371
|
}
|
|
371
372
|
|
|
373
|
+
__getDatePart(date, focusedDate, selectedDate, minDate, maxDate) {
|
|
374
|
+
const result = ['date'];
|
|
375
|
+
|
|
376
|
+
if (this.__isDayDisabled(date, minDate, maxDate)) {
|
|
377
|
+
result.push('disabled');
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
if (this.__isDayFocused(date, focusedDate)) {
|
|
381
|
+
result.push('focused');
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
if (this.__isDaySelected(date, selectedDate)) {
|
|
385
|
+
result.push('selected');
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
if (this._isToday(date)) {
|
|
389
|
+
result.push('today');
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
return result.join(' ');
|
|
393
|
+
}
|
|
394
|
+
|
|
372
395
|
__getWeekNumber(days) {
|
|
373
396
|
const date = days.reduce((acc, d) => {
|
|
374
397
|
return !acc && d ? d : acc;
|
|
@@ -50,7 +50,7 @@ registerStyles(
|
|
|
50
50
|
|
|
51
51
|
/* Date and week number cells */
|
|
52
52
|
|
|
53
|
-
[part
|
|
53
|
+
[part~='date'],
|
|
54
54
|
[part='week-number'] {
|
|
55
55
|
box-sizing: border-box;
|
|
56
56
|
display: inline-flex;
|
|
@@ -60,28 +60,28 @@ registerStyles(
|
|
|
60
60
|
position: relative;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
[part
|
|
63
|
+
[part~='date'] {
|
|
64
64
|
transition: color 0.1s;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
[part
|
|
67
|
+
[part~='date']:not(:empty) {
|
|
68
68
|
cursor: var(--lumo-clickable-cursor);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
:host([week-numbers]) [part='weekday']:not(:empty),
|
|
72
|
-
:host([week-numbers]) [part
|
|
72
|
+
:host([week-numbers]) [part~='date'] {
|
|
73
73
|
width: calc((100% - var(--lumo-size-xs)) / 7);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
/* Today date */
|
|
77
77
|
|
|
78
|
-
[part
|
|
78
|
+
[part~='date'][part~='today'] {
|
|
79
79
|
color: var(--lumo-primary-text-color);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
/* Focused date */
|
|
83
83
|
|
|
84
|
-
[part
|
|
84
|
+
[part~='date']::before {
|
|
85
85
|
content: '';
|
|
86
86
|
position: absolute;
|
|
87
87
|
z-index: -1;
|
|
@@ -97,11 +97,11 @@ registerStyles(
|
|
|
97
97
|
border-radius: var(--lumo-border-radius-m);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
[part
|
|
100
|
+
[part~='date'][part~='focused']::before {
|
|
101
101
|
box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
:host(:not([focused])) [part
|
|
104
|
+
:host(:not([focused])) [part~='date'][part~='focused']::before {
|
|
105
105
|
animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
|
|
106
106
|
}
|
|
107
107
|
|
|
@@ -111,33 +111,33 @@ registerStyles(
|
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
[part
|
|
114
|
+
[part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
|
|
115
115
|
background-color: var(--lumo-primary-color-10pct);
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
[part
|
|
118
|
+
[part~='date'][part~='selected'] {
|
|
119
119
|
color: var(--lumo-primary-contrast-color);
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
[part
|
|
122
|
+
[part~='date'][part~='selected']::before {
|
|
123
123
|
background-color: var(--lumo-primary-color);
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
[part
|
|
126
|
+
[part~='date'][part~='disabled'] {
|
|
127
127
|
color: var(--lumo-disabled-text-color);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
@media (pointer: coarse) {
|
|
131
|
-
[part
|
|
132
|
-
[part
|
|
131
|
+
[part~='date']:hover:not([part~='selected'])::before,
|
|
132
|
+
[part~='focused']:not([part~='selected'])::before {
|
|
133
133
|
display: none;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
[part
|
|
136
|
+
[part~='date']:not(:empty):not([part~='disabled']):active::before {
|
|
137
137
|
display: block;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
[part
|
|
140
|
+
[part~='date'][part~='selected']::before {
|
|
141
141
|
box-shadow: none;
|
|
142
142
|
}
|
|
143
143
|
}
|
|
@@ -35,7 +35,7 @@ registerStyles(
|
|
|
35
35
|
color: var(--material-disabled-text-color);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
[part
|
|
38
|
+
[part~='date'] {
|
|
39
39
|
position: relative;
|
|
40
40
|
font-size: var(--material-body-font-size);
|
|
41
41
|
line-height: 42px;
|
|
@@ -43,7 +43,7 @@ registerStyles(
|
|
|
43
43
|
cursor: default;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
[part
|
|
46
|
+
[part~='date']::after {
|
|
47
47
|
content: '';
|
|
48
48
|
position: absolute;
|
|
49
49
|
z-index: -4;
|
|
@@ -59,13 +59,13 @@ registerStyles(
|
|
|
59
59
|
|
|
60
60
|
/* Today */
|
|
61
61
|
|
|
62
|
-
[part
|
|
62
|
+
[part~='date'][part~='today'] {
|
|
63
63
|
color: var(--material-primary-text-color);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
/* Hover */
|
|
67
67
|
|
|
68
|
-
[part
|
|
68
|
+
[part~='date']:not([part~='disabled']):hover::after {
|
|
69
69
|
background-color: var(--material-secondary-background-color);
|
|
70
70
|
border-color: var(--material-secondary-background-color);
|
|
71
71
|
z-index: -3;
|
|
@@ -73,7 +73,7 @@ registerStyles(
|
|
|
73
73
|
|
|
74
74
|
/* Hide for touch devices */
|
|
75
75
|
@media (hover: none) {
|
|
76
|
-
[part
|
|
76
|
+
[part~='date']:not([part~='disabled']):hover::after {
|
|
77
77
|
background-color: transparent;
|
|
78
78
|
border-color: transparent;
|
|
79
79
|
z-index: -4;
|
|
@@ -82,12 +82,12 @@ registerStyles(
|
|
|
82
82
|
|
|
83
83
|
/* Selected */
|
|
84
84
|
|
|
85
|
-
[part
|
|
85
|
+
[part~='date'][part~='selected'] {
|
|
86
86
|
font-weight: 500;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
[part
|
|
90
|
-
[part
|
|
89
|
+
[part~='date']:not([part~='disabled'])[part~='selected']::after,
|
|
90
|
+
[part~='date'][part~='selected']::after {
|
|
91
91
|
background-color: transparent;
|
|
92
92
|
border-color: currentColor;
|
|
93
93
|
z-index: -2;
|
|
@@ -95,24 +95,24 @@ registerStyles(
|
|
|
95
95
|
|
|
96
96
|
/* Focused */
|
|
97
97
|
|
|
98
|
-
[part
|
|
99
|
-
[part
|
|
98
|
+
[part~='date']:not([part~='disabled'])[part~='focused'],
|
|
99
|
+
[part~='date']:not([part~='disabled']):active {
|
|
100
100
|
color: var(--material-primary-contrast-color);
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
[part
|
|
104
|
-
[part
|
|
103
|
+
[part~='date']:not([part~='disabled'])[part~='focused']::after,
|
|
104
|
+
[part~='date']:not([part~='disabled']):active::after {
|
|
105
105
|
opacity: 0.7;
|
|
106
106
|
background-color: var(--material-primary-color);
|
|
107
107
|
border-color: var(--material-primary-color);
|
|
108
108
|
z-index: -1;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
[part
|
|
111
|
+
[part~='date'][part~='disabled'] {
|
|
112
112
|
color: var(--material-disabled-text-color);
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
:host([focused]) [part
|
|
115
|
+
:host([focused]) [part~='date']:not([part~='disabled'])[part~='focused']::after {
|
|
116
116
|
opacity: 1;
|
|
117
117
|
}
|
|
118
118
|
`,
|
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.0.0-
|
|
4
|
+
"version": "24.0.0-alpha3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
163
|
"name": "i18n",
|
|
164
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
164
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
165
165
|
"value": {
|
|
166
166
|
"type": [
|
|
167
167
|
"DatePickerI18n"
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
},
|
|
217
217
|
{
|
|
218
218
|
"name": "vaadin-date-picker",
|
|
219
|
-
"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.0.0-
|
|
219
|
+
"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.0.0-alpha3/#/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.0.0-alpha3/#/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.0.0-alpha3/#/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.0.0-alpha3/#/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.",
|
|
220
220
|
"attributes": [
|
|
221
221
|
{
|
|
222
222
|
"name": "disabled",
|
|
@@ -668,7 +668,7 @@
|
|
|
668
668
|
},
|
|
669
669
|
{
|
|
670
670
|
"name": "i18n",
|
|
671
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
671
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
672
672
|
"value": {
|
|
673
673
|
"type": [
|
|
674
674
|
"DatePickerI18n"
|
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.0.0-
|
|
4
|
+
"version": "24.0.0-alpha3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
"name": ".i18n",
|
|
59
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
59
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
},
|
|
108
108
|
{
|
|
109
109
|
"name": "vaadin-date-picker",
|
|
110
|
-
"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.0.0-
|
|
110
|
+
"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.0.0-alpha3/#/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.0.0-alpha3/#/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.0.0-alpha3/#/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.0.0-alpha3/#/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.",
|
|
111
111
|
"extension": true,
|
|
112
112
|
"attributes": [
|
|
113
113
|
{
|
|
@@ -245,7 +245,7 @@
|
|
|
245
245
|
},
|
|
246
246
|
{
|
|
247
247
|
"name": ".i18n",
|
|
248
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
248
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
249
249
|
"value": {
|
|
250
250
|
"kind": "expression"
|
|
251
251
|
}
|