@vaadin/date-picker 24.7.2 → 24.8.0-alpha10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +13 -13
- package/src/vaadin-date-picker-mixin.d.ts +15 -21
- package/src/vaadin-date-picker-mixin.js +106 -111
- package/web-types.json +38 -20
- package/web-types.lit.json +15 -15
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.8.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,20 +36,20 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/a11y-base": "
|
|
40
|
-
"@vaadin/button": "
|
|
41
|
-
"@vaadin/component-base": "
|
|
42
|
-
"@vaadin/field-base": "
|
|
43
|
-
"@vaadin/input-container": "
|
|
44
|
-
"@vaadin/overlay": "
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
46
|
-
"@vaadin/vaadin-material-styles": "
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
39
|
+
"@vaadin/a11y-base": "24.8.0-alpha10",
|
|
40
|
+
"@vaadin/button": "24.8.0-alpha10",
|
|
41
|
+
"@vaadin/component-base": "24.8.0-alpha10",
|
|
42
|
+
"@vaadin/field-base": "24.8.0-alpha10",
|
|
43
|
+
"@vaadin/input-container": "24.8.0-alpha10",
|
|
44
|
+
"@vaadin/overlay": "24.8.0-alpha10",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.8.0-alpha10",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.8.0-alpha10",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha10",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/chai-plugins": "
|
|
52
|
-
"@vaadin/test-runner-commands": "
|
|
51
|
+
"@vaadin/chai-plugins": "24.8.0-alpha10",
|
|
52
|
+
"@vaadin/test-runner-commands": "24.8.0-alpha10",
|
|
53
53
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
54
54
|
"sinon": "^18.0.0"
|
|
55
55
|
},
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "f8c79ffc67eccc3ade226dfe52fbf7d3d46428cf"
|
|
61
61
|
}
|
|
@@ -8,6 +8,7 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
|
|
|
8
8
|
import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
9
9
|
import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
10
10
|
import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
11
|
+
import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
11
12
|
import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
12
13
|
import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
13
14
|
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
|
|
@@ -23,30 +24,30 @@ export interface DatePickerI18n {
|
|
|
23
24
|
* An array with the full names of months starting
|
|
24
25
|
* with January.
|
|
25
26
|
*/
|
|
26
|
-
monthNames
|
|
27
|
+
monthNames?: string[];
|
|
27
28
|
/**
|
|
28
29
|
* An array of weekday names starting with Sunday. Used
|
|
29
30
|
* in screen reader announcements.
|
|
30
31
|
*/
|
|
31
|
-
weekdays
|
|
32
|
+
weekdays?: string[];
|
|
32
33
|
/**
|
|
33
34
|
* An array of short weekday names starting with Sunday.
|
|
34
35
|
* Displayed in the calendar.
|
|
35
36
|
*/
|
|
36
|
-
weekdaysShort
|
|
37
|
+
weekdaysShort?: string[];
|
|
37
38
|
/**
|
|
38
39
|
* An integer indicating the first day of the week
|
|
39
40
|
* (0 = Sunday, 1 = Monday, etc.).
|
|
40
41
|
*/
|
|
41
|
-
firstDayOfWeek
|
|
42
|
+
firstDayOfWeek?: number;
|
|
42
43
|
/**
|
|
43
44
|
* Translation of the Today shortcut button text.
|
|
44
45
|
*/
|
|
45
|
-
today
|
|
46
|
+
today?: string;
|
|
46
47
|
/**
|
|
47
48
|
* Translation of the Cancel button text.
|
|
48
49
|
*/
|
|
49
|
-
cancel
|
|
50
|
+
cancel?: string;
|
|
50
51
|
/**
|
|
51
52
|
* Used for adjusting the year value when parsing dates with short years.
|
|
52
53
|
* The year values between 0 and 99 are evaluated and adjusted.
|
|
@@ -57,7 +58,7 @@ export interface DatePickerI18n {
|
|
|
57
58
|
* Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
|
|
58
59
|
* The default value is the current date.
|
|
59
60
|
*/
|
|
60
|
-
referenceDate
|
|
61
|
+
referenceDate?: string;
|
|
61
62
|
|
|
62
63
|
/**
|
|
63
64
|
* A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.
|
|
@@ -66,7 +67,7 @@ export interface DatePickerI18n {
|
|
|
66
67
|
* Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
67
68
|
* @param date
|
|
68
69
|
*/
|
|
69
|
-
parseDate(date: string): DatePickerDate | undefined;
|
|
70
|
+
parseDate?(date: string): DatePickerDate | undefined;
|
|
70
71
|
|
|
71
72
|
/**
|
|
72
73
|
* A function to format given `Object` as
|
|
@@ -74,7 +75,7 @@ export interface DatePickerI18n {
|
|
|
74
75
|
* Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
75
76
|
* @param date
|
|
76
77
|
*/
|
|
77
|
-
formatDate(date: DatePickerDate): string;
|
|
78
|
+
formatDate?(date: DatePickerDate): string;
|
|
78
79
|
|
|
79
80
|
/**
|
|
80
81
|
* A function to format given `monthName` and
|
|
@@ -82,7 +83,7 @@ export interface DatePickerI18n {
|
|
|
82
83
|
* @param monthName
|
|
83
84
|
* @param fullYear
|
|
84
85
|
*/
|
|
85
|
-
formatTitle(monthName: string, fullYear: number): string;
|
|
86
|
+
formatTitle?(monthName: string, fullYear: number): string;
|
|
86
87
|
}
|
|
87
88
|
|
|
88
89
|
export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
|
|
@@ -91,6 +92,7 @@ export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
|
|
|
91
92
|
Constructor<DelegateFocusMixinClass> &
|
|
92
93
|
Constructor<DisabledMixinClass> &
|
|
93
94
|
Constructor<FocusMixinClass> &
|
|
95
|
+
Constructor<I18nMixinClass<DatePickerI18n>> &
|
|
94
96
|
Constructor<InputConstraintsMixinClass> &
|
|
95
97
|
Constructor<InputMixinClass> &
|
|
96
98
|
Constructor<KeyboardMixinClass> &
|
|
@@ -135,17 +137,9 @@ export declare class DatePickerMixinClass {
|
|
|
135
137
|
showWeekNumbers: boolean | null | undefined;
|
|
136
138
|
|
|
137
139
|
/**
|
|
138
|
-
* The object used to localize this component.
|
|
139
|
-
*
|
|
140
|
-
*
|
|
141
|
-
*
|
|
142
|
-
* To update individual properties, extend the existing i18n object like so:
|
|
143
|
-
* ```
|
|
144
|
-
* datePicker.i18n = { ...datePicker.i18n, {
|
|
145
|
-
* formatDate: date => { ... },
|
|
146
|
-
* parseDate: value => { ... },
|
|
147
|
-
* }};
|
|
148
|
-
* ```
|
|
140
|
+
* The object used to localize this component. To change the default
|
|
141
|
+
* localization, replace this with an object that provides all properties, or
|
|
142
|
+
* just the individual properties you want to change.
|
|
149
143
|
*
|
|
150
144
|
* The object has the following JSON structure and default values:
|
|
151
145
|
*
|
|
@@ -9,6 +9,7 @@ import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
|
9
9
|
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
10
10
|
import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
|
|
11
11
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
12
|
+
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
12
13
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
13
14
|
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
14
15
|
import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
@@ -83,14 +84,16 @@ export const datePickerI18nDefaults = Object.freeze({
|
|
|
83
84
|
* @polymerMixin
|
|
84
85
|
* @mixes ControllerMixin
|
|
85
86
|
* @mixes DelegateFocusMixin
|
|
87
|
+
* @mixes I18nMixin
|
|
86
88
|
* @mixes InputConstraintsMixin
|
|
87
89
|
* @mixes KeyboardMixin
|
|
88
90
|
* @mixes OverlayClassMixin
|
|
89
91
|
* @param {function(new:HTMLElement)} subclass
|
|
90
92
|
*/
|
|
91
93
|
export const DatePickerMixin = (subclass) =>
|
|
92
|
-
class DatePickerMixinClass extends
|
|
93
|
-
|
|
94
|
+
class DatePickerMixinClass extends I18nMixin(
|
|
95
|
+
datePickerI18nDefaults,
|
|
96
|
+
OverlayClassMixin(ControllerMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))))),
|
|
94
97
|
) {
|
|
95
98
|
static get properties() {
|
|
96
99
|
return {
|
|
@@ -187,98 +190,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
187
190
|
value: '(max-width: 450px), (max-height: 450px)',
|
|
188
191
|
},
|
|
189
192
|
|
|
190
|
-
/**
|
|
191
|
-
* The object used to localize this component.
|
|
192
|
-
* To change the default localization, replace the entire
|
|
193
|
-
* `i18n` object with a custom one.
|
|
194
|
-
*
|
|
195
|
-
* To update individual properties, extend the existing i18n object like so:
|
|
196
|
-
* ```
|
|
197
|
-
* datePicker.i18n = { ...datePicker.i18n, {
|
|
198
|
-
* formatDate: date => { ... },
|
|
199
|
-
* parseDate: value => { ... },
|
|
200
|
-
* }};
|
|
201
|
-
* ```
|
|
202
|
-
*
|
|
203
|
-
* The object has the following JSON structure and default values:
|
|
204
|
-
*
|
|
205
|
-
* ```
|
|
206
|
-
* {
|
|
207
|
-
* // An array with the full names of months starting
|
|
208
|
-
* // with January.
|
|
209
|
-
* monthNames: [
|
|
210
|
-
* 'January', 'February', 'March', 'April', 'May',
|
|
211
|
-
* 'June', 'July', 'August', 'September',
|
|
212
|
-
* 'October', 'November', 'December'
|
|
213
|
-
* ],
|
|
214
|
-
*
|
|
215
|
-
* // An array of weekday names starting with Sunday. Used
|
|
216
|
-
* // in screen reader announcements.
|
|
217
|
-
* weekdays: [
|
|
218
|
-
* 'Sunday', 'Monday', 'Tuesday', 'Wednesday',
|
|
219
|
-
* 'Thursday', 'Friday', 'Saturday'
|
|
220
|
-
* ],
|
|
221
|
-
*
|
|
222
|
-
* // An array of short weekday names starting with Sunday.
|
|
223
|
-
* // Displayed in the calendar.
|
|
224
|
-
* weekdaysShort: [
|
|
225
|
-
* 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
|
|
226
|
-
* ],
|
|
227
|
-
*
|
|
228
|
-
* // An integer indicating the first day of the week
|
|
229
|
-
* // (0 = Sunday, 1 = Monday, etc.).
|
|
230
|
-
* firstDayOfWeek: 0,
|
|
231
|
-
*
|
|
232
|
-
* // Translation of the Today shortcut button text.
|
|
233
|
-
* today: 'Today',
|
|
234
|
-
*
|
|
235
|
-
* // Translation of the Cancel button text.
|
|
236
|
-
* cancel: 'Cancel',
|
|
237
|
-
*
|
|
238
|
-
* // Used for adjusting the year value when parsing dates with short years.
|
|
239
|
-
* // The year values between 0 and 99 are evaluated and adjusted.
|
|
240
|
-
* // Example: for a referenceDate of 1970-10-30;
|
|
241
|
-
* // dateToBeParsed: 40-10-30, result: 1940-10-30
|
|
242
|
-
* // dateToBeParsed: 80-10-30, result: 1980-10-30
|
|
243
|
-
* // dateToBeParsed: 10-10-30, result: 2010-10-30
|
|
244
|
-
* // Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
|
|
245
|
-
* // The default value is the current date.
|
|
246
|
-
* referenceDate: '',
|
|
247
|
-
*
|
|
248
|
-
* // A function to format given `Object` as
|
|
249
|
-
* // date string. Object is in the format `{ day: ..., month: ..., year: ... }`
|
|
250
|
-
* // Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
251
|
-
* formatDate: d => {
|
|
252
|
-
* // returns a string representation of the given
|
|
253
|
-
* // object in 'MM/DD/YYYY' -format
|
|
254
|
-
* },
|
|
255
|
-
*
|
|
256
|
-
* // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.
|
|
257
|
-
* // Must properly parse (at least) text formatted by `formatDate`.
|
|
258
|
-
* // Setting the property to null will disable keyboard input feature.
|
|
259
|
-
* // Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
260
|
-
* parseDate: text => {
|
|
261
|
-
* // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to
|
|
262
|
-
* // an `Object` in the format `{ day: ..., month: ..., year: ... }`.
|
|
263
|
-
* }
|
|
264
|
-
*
|
|
265
|
-
* // A function to format given `monthName` and
|
|
266
|
-
* // `fullYear` integer as calendar title string.
|
|
267
|
-
* formatTitle: (monthName, fullYear) => {
|
|
268
|
-
* return monthName + ' ' + fullYear;
|
|
269
|
-
* }
|
|
270
|
-
* }
|
|
271
|
-
* ```
|
|
272
|
-
*
|
|
273
|
-
* @type {!DatePickerI18n}
|
|
274
|
-
* @default {English/US}
|
|
275
|
-
*/
|
|
276
|
-
i18n: {
|
|
277
|
-
type: Object,
|
|
278
|
-
sync: true,
|
|
279
|
-
value: () => ({ ...datePickerI18nDefaults }),
|
|
280
|
-
},
|
|
281
|
-
|
|
282
193
|
/**
|
|
283
194
|
* The earliest date that can be selected. All earlier dates will be disabled.
|
|
284
195
|
*
|
|
@@ -341,7 +252,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
341
252
|
/** @private */
|
|
342
253
|
_noInput: {
|
|
343
254
|
type: Boolean,
|
|
344
|
-
computed: '_isNoInput(inputElement, _fullscreen, _ios,
|
|
255
|
+
computed: '_isNoInput(inputElement, _fullscreen, _ios, __effectiveI18n, opened, autoOpenDisabled)',
|
|
345
256
|
},
|
|
346
257
|
|
|
347
258
|
/** @private */
|
|
@@ -369,9 +280,9 @@ export const DatePickerMixin = (subclass) =>
|
|
|
369
280
|
|
|
370
281
|
static get observers() {
|
|
371
282
|
return [
|
|
372
|
-
'_selectedDateChanged(_selectedDate,
|
|
373
|
-
'_focusedDateChanged(_focusedDate,
|
|
374
|
-
'__updateOverlayContent(_overlayContent,
|
|
283
|
+
'_selectedDateChanged(_selectedDate, __effectiveI18n)',
|
|
284
|
+
'_focusedDateChanged(_focusedDate, __effectiveI18n)',
|
|
285
|
+
'__updateOverlayContent(_overlayContent, __effectiveI18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled, __enteredDate)',
|
|
375
286
|
'__updateOverlayContentTheme(_overlayContent, _theme)',
|
|
376
287
|
'__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
|
|
377
288
|
];
|
|
@@ -389,6 +300,90 @@ export const DatePickerMixin = (subclass) =>
|
|
|
389
300
|
this._boundOverlayRenderer = this._overlayRenderer.bind(this);
|
|
390
301
|
}
|
|
391
302
|
|
|
303
|
+
/**
|
|
304
|
+
* The object used to localize this component. To change the default
|
|
305
|
+
* localization, replace this with an object that provides all properties, or
|
|
306
|
+
* just the individual properties you want to change.
|
|
307
|
+
*
|
|
308
|
+
* The object has the following JSON structure and default values:
|
|
309
|
+
*
|
|
310
|
+
* ```
|
|
311
|
+
* {
|
|
312
|
+
* // An array with the full names of months starting
|
|
313
|
+
* // with January.
|
|
314
|
+
* monthNames: [
|
|
315
|
+
* 'January', 'February', 'March', 'April', 'May',
|
|
316
|
+
* 'June', 'July', 'August', 'September',
|
|
317
|
+
* 'October', 'November', 'December'
|
|
318
|
+
* ],
|
|
319
|
+
*
|
|
320
|
+
* // An array of weekday names starting with Sunday. Used
|
|
321
|
+
* // in screen reader announcements.
|
|
322
|
+
* weekdays: [
|
|
323
|
+
* 'Sunday', 'Monday', 'Tuesday', 'Wednesday',
|
|
324
|
+
* 'Thursday', 'Friday', 'Saturday'
|
|
325
|
+
* ],
|
|
326
|
+
*
|
|
327
|
+
* // An array of short weekday names starting with Sunday.
|
|
328
|
+
* // Displayed in the calendar.
|
|
329
|
+
* weekdaysShort: [
|
|
330
|
+
* 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
|
|
331
|
+
* ],
|
|
332
|
+
*
|
|
333
|
+
* // An integer indicating the first day of the week
|
|
334
|
+
* // (0 = Sunday, 1 = Monday, etc.).
|
|
335
|
+
* firstDayOfWeek: 0,
|
|
336
|
+
*
|
|
337
|
+
* // Translation of the Today shortcut button text.
|
|
338
|
+
* today: 'Today',
|
|
339
|
+
*
|
|
340
|
+
* // Translation of the Cancel button text.
|
|
341
|
+
* cancel: 'Cancel',
|
|
342
|
+
*
|
|
343
|
+
* // Used for adjusting the year value when parsing dates with short years.
|
|
344
|
+
* // The year values between 0 and 99 are evaluated and adjusted.
|
|
345
|
+
* // Example: for a referenceDate of 1970-10-30;
|
|
346
|
+
* // dateToBeParsed: 40-10-30, result: 1940-10-30
|
|
347
|
+
* // dateToBeParsed: 80-10-30, result: 1980-10-30
|
|
348
|
+
* // dateToBeParsed: 10-10-30, result: 2010-10-30
|
|
349
|
+
* // Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
|
|
350
|
+
* // The default value is the current date.
|
|
351
|
+
* referenceDate: '',
|
|
352
|
+
*
|
|
353
|
+
* // A function to format given `Object` as
|
|
354
|
+
* // date string. Object is in the format `{ day: ..., month: ..., year: ... }`
|
|
355
|
+
* // Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
356
|
+
* formatDate: d => {
|
|
357
|
+
* // returns a string representation of the given
|
|
358
|
+
* // object in 'MM/DD/YYYY' -format
|
|
359
|
+
* },
|
|
360
|
+
*
|
|
361
|
+
* // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.
|
|
362
|
+
* // Must properly parse (at least) text formatted by `formatDate`.
|
|
363
|
+
* // Setting the property to null will disable keyboard input feature.
|
|
364
|
+
* // Note: The argument month is 0-based. This means that January = 0 and December = 11.
|
|
365
|
+
* parseDate: text => {
|
|
366
|
+
* // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to
|
|
367
|
+
* // an `Object` in the format `{ day: ..., month: ..., year: ... }`.
|
|
368
|
+
* }
|
|
369
|
+
*
|
|
370
|
+
* // A function to format given `monthName` and
|
|
371
|
+
* // `fullYear` integer as calendar title string.
|
|
372
|
+
* formatTitle: (monthName, fullYear) => {
|
|
373
|
+
* return monthName + ' ' + fullYear;
|
|
374
|
+
* }
|
|
375
|
+
* }
|
|
376
|
+
* ```
|
|
377
|
+
* @return {!DatePickerI18n}
|
|
378
|
+
*/
|
|
379
|
+
get i18n() {
|
|
380
|
+
return super.i18n;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
set i18n(value) {
|
|
384
|
+
super.i18n = value;
|
|
385
|
+
}
|
|
386
|
+
|
|
392
387
|
/** @override */
|
|
393
388
|
get _inputElementValue() {
|
|
394
389
|
return super._inputElementValue;
|
|
@@ -569,11 +564,11 @@ export const DatePickerMixin = (subclass) =>
|
|
|
569
564
|
* @private
|
|
570
565
|
*/
|
|
571
566
|
__parseDate(dateString) {
|
|
572
|
-
if (!this.
|
|
567
|
+
if (!this.__effectiveI18n.parseDate) {
|
|
573
568
|
return;
|
|
574
569
|
}
|
|
575
570
|
|
|
576
|
-
let dateObject = this.
|
|
571
|
+
let dateObject = this.__effectiveI18n.parseDate(dateString);
|
|
577
572
|
if (dateObject) {
|
|
578
573
|
dateObject = parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
|
|
579
574
|
}
|
|
@@ -587,8 +582,8 @@ export const DatePickerMixin = (subclass) =>
|
|
|
587
582
|
* @private
|
|
588
583
|
*/
|
|
589
584
|
__formatDate(dateObject) {
|
|
590
|
-
if (this.
|
|
591
|
-
return this.
|
|
585
|
+
if (this.__effectiveI18n.formatDate) {
|
|
586
|
+
return this.__effectiveI18n.formatDate(extractDateParts(dateObject));
|
|
592
587
|
}
|
|
593
588
|
}
|
|
594
589
|
|
|
@@ -736,7 +731,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
736
731
|
|
|
737
732
|
/** @private */
|
|
738
733
|
// eslint-disable-next-line @typescript-eslint/max-params
|
|
739
|
-
_isNoInput(inputElement, fullscreen, ios,
|
|
734
|
+
_isNoInput(inputElement, fullscreen, ios, effectiveI18n, opened, autoOpenDisabled) {
|
|
740
735
|
// On fullscreen mode, text input is disabled if auto-open isn't disabled or
|
|
741
736
|
// whenever the dropdown is opened
|
|
742
737
|
const noInputOnFullscreenMode = fullscreen && (!autoOpenDisabled || opened);
|
|
@@ -745,7 +740,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
745
740
|
// dropdown could get covered by the keyboard.
|
|
746
741
|
const noInputOnIos = ios && opened;
|
|
747
742
|
|
|
748
|
-
return !inputElement || noInputOnFullscreenMode || noInputOnIos || !
|
|
743
|
+
return !inputElement || noInputOnFullscreenMode || noInputOnIos || !effectiveI18n.parseDate;
|
|
749
744
|
}
|
|
750
745
|
|
|
751
746
|
/** @private */
|
|
@@ -773,8 +768,8 @@ export const DatePickerMixin = (subclass) =>
|
|
|
773
768
|
}
|
|
774
769
|
|
|
775
770
|
/** @private */
|
|
776
|
-
_selectedDateChanged(selectedDate,
|
|
777
|
-
if (selectedDate === undefined ||
|
|
771
|
+
_selectedDateChanged(selectedDate, effectiveI18n) {
|
|
772
|
+
if (selectedDate === undefined || effectiveI18n === undefined) {
|
|
778
773
|
return;
|
|
779
774
|
}
|
|
780
775
|
|
|
@@ -789,8 +784,8 @@ export const DatePickerMixin = (subclass) =>
|
|
|
789
784
|
}
|
|
790
785
|
|
|
791
786
|
/** @private */
|
|
792
|
-
_focusedDateChanged(focusedDate,
|
|
793
|
-
if (focusedDate === undefined ||
|
|
787
|
+
_focusedDateChanged(focusedDate, effectiveI18n) {
|
|
788
|
+
if (focusedDate === undefined || effectiveI18n === undefined) {
|
|
794
789
|
return;
|
|
795
790
|
}
|
|
796
791
|
if (!this._ignoreFocusedDateChange && !this._noInput) {
|
|
@@ -845,7 +840,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
845
840
|
// eslint-disable-next-line @typescript-eslint/max-params
|
|
846
841
|
__updateOverlayContent(
|
|
847
842
|
overlayContent,
|
|
848
|
-
|
|
843
|
+
effectiveI18n,
|
|
849
844
|
label,
|
|
850
845
|
minDate,
|
|
851
846
|
maxDate,
|
|
@@ -856,7 +851,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
856
851
|
enteredDate,
|
|
857
852
|
) {
|
|
858
853
|
if (overlayContent) {
|
|
859
|
-
overlayContent.i18n =
|
|
854
|
+
overlayContent.i18n = effectiveI18n;
|
|
860
855
|
overlayContent.label = label;
|
|
861
856
|
overlayContent.minDate = minDate;
|
|
862
857
|
overlayContent.maxDate = maxDate;
|
|
@@ -956,7 +951,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
956
951
|
__commitParsedOrFocusedDate() {
|
|
957
952
|
// Select the parsed input or focused date
|
|
958
953
|
this._ignoreFocusedDateChange = true;
|
|
959
|
-
if (this.
|
|
954
|
+
if (this.__effectiveI18n.parseDate) {
|
|
960
955
|
const inputValue = this._inputElementValue || '';
|
|
961
956
|
const parsedDate = this.__parseDate(inputValue);
|
|
962
957
|
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-picker",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.8.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -32,6 +32,15 @@
|
|
|
32
32
|
]
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
|
+
{
|
|
36
|
+
"name": "i18n",
|
|
37
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"Object"
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
},
|
|
35
44
|
{
|
|
36
45
|
"name": "value",
|
|
37
46
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -194,6 +203,15 @@
|
|
|
194
203
|
]
|
|
195
204
|
}
|
|
196
205
|
},
|
|
206
|
+
{
|
|
207
|
+
"name": "i18n",
|
|
208
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\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```",
|
|
209
|
+
"value": {
|
|
210
|
+
"type": [
|
|
211
|
+
"DatePickerI18n"
|
|
212
|
+
]
|
|
213
|
+
}
|
|
214
|
+
},
|
|
197
215
|
{
|
|
198
216
|
"name": "value",
|
|
199
217
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -291,15 +309,6 @@
|
|
|
291
309
|
]
|
|
292
310
|
}
|
|
293
311
|
},
|
|
294
|
-
{
|
|
295
|
-
"name": "i18n",
|
|
296
|
-
"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```",
|
|
297
|
-
"value": {
|
|
298
|
-
"type": [
|
|
299
|
-
"DatePickerI18n"
|
|
300
|
-
]
|
|
301
|
-
}
|
|
302
|
-
},
|
|
303
312
|
{
|
|
304
313
|
"name": "min",
|
|
305
314
|
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -366,7 +375,7 @@
|
|
|
366
375
|
},
|
|
367
376
|
{
|
|
368
377
|
"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.
|
|
378
|
+
"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.8.0-alpha10/#/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.8.0-alpha10/#/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.8.0-alpha10/#/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.8.0-alpha10/#/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
379
|
"attributes": [
|
|
371
380
|
{
|
|
372
381
|
"name": "disabled",
|
|
@@ -564,6 +573,15 @@
|
|
|
564
573
|
]
|
|
565
574
|
}
|
|
566
575
|
},
|
|
576
|
+
{
|
|
577
|
+
"name": "i18n",
|
|
578
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
579
|
+
"value": {
|
|
580
|
+
"type": [
|
|
581
|
+
"Object"
|
|
582
|
+
]
|
|
583
|
+
}
|
|
584
|
+
},
|
|
567
585
|
{
|
|
568
586
|
"name": "overlay-class",
|
|
569
587
|
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
@@ -849,6 +867,15 @@
|
|
|
849
867
|
]
|
|
850
868
|
}
|
|
851
869
|
},
|
|
870
|
+
{
|
|
871
|
+
"name": "i18n",
|
|
872
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\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```",
|
|
873
|
+
"value": {
|
|
874
|
+
"type": [
|
|
875
|
+
"DatePickerI18n"
|
|
876
|
+
]
|
|
877
|
+
}
|
|
878
|
+
},
|
|
852
879
|
{
|
|
853
880
|
"name": "overlayClass",
|
|
854
881
|
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
@@ -904,15 +931,6 @@
|
|
|
904
931
|
]
|
|
905
932
|
}
|
|
906
933
|
},
|
|
907
|
-
{
|
|
908
|
-
"name": "i18n",
|
|
909
|
-
"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```",
|
|
910
|
-
"value": {
|
|
911
|
-
"type": [
|
|
912
|
-
"DatePickerI18n"
|
|
913
|
-
]
|
|
914
|
-
}
|
|
915
|
-
},
|
|
916
934
|
{
|
|
917
935
|
"name": "min",
|
|
918
936
|
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-picker",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.8.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -82,6 +82,13 @@
|
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
|
+
{
|
|
86
|
+
"name": ".i18n",
|
|
87
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\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```",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
85
92
|
{
|
|
86
93
|
"name": ".value",
|
|
87
94
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -103,13 +110,6 @@
|
|
|
103
110
|
"kind": "expression"
|
|
104
111
|
}
|
|
105
112
|
},
|
|
106
|
-
{
|
|
107
|
-
"name": ".i18n",
|
|
108
|
-
"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```",
|
|
109
|
-
"value": {
|
|
110
|
-
"kind": "expression"
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
113
|
{
|
|
114
114
|
"name": ".min",
|
|
115
115
|
"description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -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.
|
|
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.8.0-alpha10/#/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.8.0-alpha10/#/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.8.0-alpha10/#/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.8.0-alpha10/#/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
|
{
|
|
@@ -328,22 +328,22 @@
|
|
|
328
328
|
}
|
|
329
329
|
},
|
|
330
330
|
{
|
|
331
|
-
"name": ".
|
|
332
|
-
"description": "
|
|
331
|
+
"name": ".i18n",
|
|
332
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\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```",
|
|
333
333
|
"value": {
|
|
334
334
|
"kind": "expression"
|
|
335
335
|
}
|
|
336
336
|
},
|
|
337
337
|
{
|
|
338
|
-
"name": ".
|
|
339
|
-
"description": "
|
|
338
|
+
"name": ".overlayClass",
|
|
339
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
340
340
|
"value": {
|
|
341
341
|
"kind": "expression"
|
|
342
342
|
}
|
|
343
343
|
},
|
|
344
344
|
{
|
|
345
|
-
"name": ".
|
|
346
|
-
"description": "
|
|
345
|
+
"name": ".initialPosition",
|
|
346
|
+
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
347
347
|
"value": {
|
|
348
348
|
"kind": "expression"
|
|
349
349
|
}
|