@vaadin/date-picker 24.7.0-rc1 → 24.8.0-alpha1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +13 -13
- package/src/vaadin-date-picker-mixin.d.ts +7 -13
- package/src/vaadin-date-picker-mixin.js +106 -111
- package/web-types.json +20 -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-alpha1",
|
|
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": "24.
|
|
40
|
-
"@vaadin/button": "24.
|
|
41
|
-
"@vaadin/component-base": "24.
|
|
42
|
-
"@vaadin/field-base": "24.
|
|
43
|
-
"@vaadin/input-container": "24.
|
|
44
|
-
"@vaadin/overlay": "24.
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.
|
|
39
|
+
"@vaadin/a11y-base": "24.8.0-alpha1",
|
|
40
|
+
"@vaadin/button": "24.8.0-alpha1",
|
|
41
|
+
"@vaadin/component-base": "24.8.0-alpha1",
|
|
42
|
+
"@vaadin/field-base": "24.8.0-alpha1",
|
|
43
|
+
"@vaadin/input-container": "24.8.0-alpha1",
|
|
44
|
+
"@vaadin/overlay": "24.8.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.8.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.8.0-alpha1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha1",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/chai-plugins": "24.
|
|
52
|
-
"@vaadin/test-runner-commands": "24.
|
|
51
|
+
"@vaadin/chai-plugins": "24.8.0-alpha1",
|
|
52
|
+
"@vaadin/test-runner-commands": "24.8.0-alpha1",
|
|
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": "dfec8767c5d1c343ae689c93429c3364f4182f76"
|
|
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, PartialI18n } 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';
|
|
@@ -18,7 +19,7 @@ export interface DatePickerDate {
|
|
|
18
19
|
year: number;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
export
|
|
22
|
+
export type DatePickerI18n = PartialI18n<{
|
|
22
23
|
/**
|
|
23
24
|
* An array with the full names of months starting
|
|
24
25
|
* with January.
|
|
@@ -83,7 +84,7 @@ export interface DatePickerI18n {
|
|
|
83
84
|
* @param fullYear
|
|
84
85
|
*/
|
|
85
86
|
formatTitle(monthName: string, fullYear: number): string;
|
|
86
|
-
}
|
|
87
|
+
}>;
|
|
87
88
|
|
|
88
89
|
export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
|
|
89
90
|
base: T,
|
|
@@ -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-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -194,6 +194,15 @@
|
|
|
194
194
|
]
|
|
195
195
|
}
|
|
196
196
|
},
|
|
197
|
+
{
|
|
198
|
+
"name": "i18n",
|
|
199
|
+
"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```",
|
|
200
|
+
"value": {
|
|
201
|
+
"type": [
|
|
202
|
+
"DatePickerI18n"
|
|
203
|
+
]
|
|
204
|
+
}
|
|
205
|
+
},
|
|
197
206
|
{
|
|
198
207
|
"name": "value",
|
|
199
208
|
"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 +300,6 @@
|
|
|
291
300
|
]
|
|
292
301
|
}
|
|
293
302
|
},
|
|
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
303
|
{
|
|
304
304
|
"name": "min",
|
|
305
305
|
"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 +366,7 @@
|
|
|
366
366
|
},
|
|
367
367
|
{
|
|
368
368
|
"name": "vaadin-date-picker",
|
|
369
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
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.8.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
|
|
370
370
|
"attributes": [
|
|
371
371
|
{
|
|
372
372
|
"name": "disabled",
|
|
@@ -849,6 +849,15 @@
|
|
|
849
849
|
]
|
|
850
850
|
}
|
|
851
851
|
},
|
|
852
|
+
{
|
|
853
|
+
"name": "i18n",
|
|
854
|
+
"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```",
|
|
855
|
+
"value": {
|
|
856
|
+
"type": [
|
|
857
|
+
"DatePickerI18n"
|
|
858
|
+
]
|
|
859
|
+
}
|
|
860
|
+
},
|
|
852
861
|
{
|
|
853
862
|
"name": "overlayClass",
|
|
854
863
|
"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 +913,6 @@
|
|
|
904
913
|
]
|
|
905
914
|
}
|
|
906
915
|
},
|
|
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
916
|
{
|
|
917
917
|
"name": "min",
|
|
918
918
|
"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-alpha1",
|
|
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-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`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
|
}
|