@vaadin/date-picker 25.3.0-alpha10 → 25.3.0-alpha12
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/custom-elements.json +11 -11
- package/package.json +13 -13
- package/src/vaadin-date-metadata-controller.d.ts +2 -2
- package/src/vaadin-date-metadata-controller.js +13 -21
- package/src/vaadin-date-picker-helper.js +30 -11
- package/src/vaadin-date-picker-mixin.d.ts +47 -40
- package/src/vaadin-date-picker-mixin.js +33 -31
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
26
|
-
"description": "A reactive controller that resolves the metadata (currently the disabled state)\nfor the dates shown by the date-picker's `dateMetadataProvider`.\n\nThe provider is called for a range of months and may return an array\nsynchronously or a `Promise`, so results from a server (Flow) or a remote\navailability service can be awaited.
|
|
26
|
+
"description": "A reactive controller that resolves the metadata (currently the disabled state)\nfor the dates shown by the date-picker's `dateMetadataProvider`.\n\nThe provider is called for a range of months and may return an array\nsynchronously or a `Promise`, so results from a server (Flow) or a remote\navailability service can be awaited. The range and each returned entry identify\na date by an ISO 8601 string, e.g. `{ date: '2026-01-01', disabled: true }`.\n\n`ARCHITECTURE.md` in this package records the reasoning behind the request,\ncaching, notification and failure behavior.",
|
|
27
27
|
"name": "DateMetadataController",
|
|
28
28
|
"members": [
|
|
29
29
|
{
|
|
@@ -616,7 +616,7 @@
|
|
|
616
616
|
}
|
|
617
617
|
}
|
|
618
618
|
],
|
|
619
|
-
"description": "Parse date string of one of the following date formats:\n- ISO 8601 `\"YYYY-MM-DD\"`\n-
|
|
619
|
+
"description": "Parse date string of one of the following date formats:\n- ISO 8601 `\"YYYY-MM-DD\"`\n- Extended ISO 8601 with a signed year, e.g. `\"+012026-MM-DD\"` or `\"-0001-MM-DD\"`\n\nA date that does not exist, such as `\"2026-02-30\"`, is not parsed. Building it would carry the\nsurplus into the next month or year and answer with a date that was never asked for.",
|
|
620
620
|
"return": {
|
|
621
621
|
"type": {
|
|
622
622
|
"text": "Date"
|
|
@@ -635,7 +635,7 @@
|
|
|
635
635
|
}
|
|
636
636
|
}
|
|
637
637
|
],
|
|
638
|
-
"description": "Parse date string of one of the following date formats:\n- ISO 8601 `\"YYYY-MM-DD\"`\n-
|
|
638
|
+
"description": "Parse date string of one of the following date formats:\n- ISO 8601 `\"YYYY-MM-DD\"`\n- Extended ISO 8601 with a signed year, e.g. `\"+012026-MM-DD\"` or `\"-0001-MM-DD\"`\n\nUses UTC date components to allow handling date instances independently of\nthe system time-zone.\n\nA date that does not exist, such as `\"2026-02-30\"`, is not parsed, as in `parseDate`.",
|
|
639
639
|
"return": {
|
|
640
640
|
"type": {
|
|
641
641
|
"text": "Date"
|
|
@@ -921,7 +921,7 @@
|
|
|
921
921
|
"type": {
|
|
922
922
|
"text": "DatePickerDateMetadataProvider | null | undefined"
|
|
923
923
|
},
|
|
924
|
-
"description": "A
|
|
924
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
925
925
|
"attribute": "date-metadata-provider"
|
|
926
926
|
},
|
|
927
927
|
{
|
|
@@ -983,7 +983,7 @@
|
|
|
983
983
|
"type": {
|
|
984
984
|
"text": "function(DatePickerDate): boolean | undefined"
|
|
985
985
|
},
|
|
986
|
-
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
|
|
986
|
+
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
|
|
987
987
|
"attribute": "is-date-disabled"
|
|
988
988
|
},
|
|
989
989
|
{
|
|
@@ -1142,7 +1142,7 @@
|
|
|
1142
1142
|
"type": {
|
|
1143
1143
|
"text": "DatePickerDateMetadataProvider | null | undefined"
|
|
1144
1144
|
},
|
|
1145
|
-
"description": "A
|
|
1145
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
1146
1146
|
"fieldName": "dateMetadataProvider"
|
|
1147
1147
|
},
|
|
1148
1148
|
{
|
|
@@ -1194,7 +1194,7 @@
|
|
|
1194
1194
|
"type": {
|
|
1195
1195
|
"text": "function(DatePickerDate): boolean | undefined"
|
|
1196
1196
|
},
|
|
1197
|
-
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
|
|
1197
|
+
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
|
|
1198
1198
|
"fieldName": "isDateDisabled"
|
|
1199
1199
|
},
|
|
1200
1200
|
{
|
|
@@ -2320,7 +2320,7 @@
|
|
|
2320
2320
|
"type": {
|
|
2321
2321
|
"text": "DatePickerDateMetadataProvider | null | undefined"
|
|
2322
2322
|
},
|
|
2323
|
-
"description": "A
|
|
2323
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
2324
2324
|
"attribute": "date-metadata-provider",
|
|
2325
2325
|
"inheritedFrom": {
|
|
2326
2326
|
"name": "DatePickerMixin",
|
|
@@ -2418,7 +2418,7 @@
|
|
|
2418
2418
|
"type": {
|
|
2419
2419
|
"text": "function(DatePickerDate): boolean | undefined"
|
|
2420
2420
|
},
|
|
2421
|
-
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
|
|
2421
|
+
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
|
|
2422
2422
|
"attribute": "is-date-disabled",
|
|
2423
2423
|
"inheritedFrom": {
|
|
2424
2424
|
"name": "DatePickerMixin",
|
|
@@ -2771,7 +2771,7 @@
|
|
|
2771
2771
|
"type": {
|
|
2772
2772
|
"text": "DatePickerDateMetadataProvider | null | undefined"
|
|
2773
2773
|
},
|
|
2774
|
-
"description": "A
|
|
2774
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
2775
2775
|
"fieldName": "dateMetadataProvider",
|
|
2776
2776
|
"inheritedFrom": {
|
|
2777
2777
|
"name": "DatePickerMixin",
|
|
@@ -2855,7 +2855,7 @@
|
|
|
2855
2855
|
"type": {
|
|
2856
2856
|
"text": "function(DatePickerDate): boolean | undefined"
|
|
2857
2857
|
},
|
|
2858
|
-
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
|
|
2858
|
+
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
|
|
2859
2859
|
"fieldName": "isDateDisabled",
|
|
2860
2860
|
"inheritedFrom": {
|
|
2861
2861
|
"name": "DatePickerMixin",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha12",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
39
|
-
"@vaadin/button": "25.3.0-
|
|
40
|
-
"@vaadin/component-base": "25.3.0-
|
|
41
|
-
"@vaadin/field-base": "25.3.0-
|
|
42
|
-
"@vaadin/input-container": "25.3.0-
|
|
43
|
-
"@vaadin/overlay": "25.3.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-alpha12",
|
|
39
|
+
"@vaadin/button": "25.3.0-alpha12",
|
|
40
|
+
"@vaadin/component-base": "25.3.0-alpha12",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-alpha12",
|
|
42
|
+
"@vaadin/input-container": "25.3.0-alpha12",
|
|
43
|
+
"@vaadin/overlay": "25.3.0-alpha12",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha12",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/aura": "25.3.0-
|
|
49
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
48
|
+
"@vaadin/aura": "25.3.0-alpha12",
|
|
49
|
+
"@vaadin/chai-plugins": "25.3.0-alpha12",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha12",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha12",
|
|
53
53
|
"sinon": "^22.0.0"
|
|
54
54
|
},
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "0f0337783efe38332f5dc6a8968f207d2982de4b"
|
|
61
61
|
}
|
|
@@ -12,8 +12,8 @@ import type { DatePickerDateMetadata, DatePickerDateMetadataProvider } from './v
|
|
|
12
12
|
*
|
|
13
13
|
* The provider is called for a range of months and may return an array
|
|
14
14
|
* synchronously or a `Promise`, so results from a server (Flow) or a remote
|
|
15
|
-
* availability service can be awaited.
|
|
16
|
-
*
|
|
15
|
+
* availability service can be awaited. The range and each returned entry identify
|
|
16
|
+
* a date by an ISO 8601 string, e.g. `{ date: '2026-01-01', disabled: true }`.
|
|
17
17
|
*
|
|
18
18
|
* `ARCHITECTURE.md` in this package records the reasoning behind the request,
|
|
19
19
|
* caching, notification and failure behavior.
|
|
@@ -6,14 +6,7 @@
|
|
|
6
6
|
import { microTask } from '@vaadin/component-base/src/async.js';
|
|
7
7
|
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
|
|
8
8
|
import { issueWarning } from '@vaadin/component-base/src/warnings.js';
|
|
9
|
-
import {
|
|
10
|
-
createDate,
|
|
11
|
-
extractDateParts,
|
|
12
|
-
lastOfMonth,
|
|
13
|
-
monthDate,
|
|
14
|
-
monthIndex,
|
|
15
|
-
monthIndexOf,
|
|
16
|
-
} from './vaadin-date-picker-helper.js';
|
|
9
|
+
import { formatISODate, lastOfMonth, monthDate, monthIndex, parseDate } from './vaadin-date-picker-helper.js';
|
|
17
10
|
|
|
18
11
|
// Counted from January of year 0, so a block is one calendar year.
|
|
19
12
|
const BLOCK_MONTHS = 12;
|
|
@@ -24,12 +17,10 @@ function blockStart(month) {
|
|
|
24
17
|
|
|
25
18
|
const PENDING_MONTH = Object.freeze({ pending: true });
|
|
26
19
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const date = createDate(entry.year, entry.month, entry.day);
|
|
32
|
-
return date.getFullYear() === entry.year && date.getMonth() === entry.month && date.getDate() === entry.day;
|
|
20
|
+
// The date of an entry, or `undefined` when its `date` is not one. Checked for being a string first,
|
|
21
|
+
// since coercing another type to one can throw, and an entry comes from outside.
|
|
22
|
+
function entryDate(entry) {
|
|
23
|
+
return typeof entry?.date === 'string' ? parseDate(entry.date) : undefined;
|
|
33
24
|
}
|
|
34
25
|
|
|
35
26
|
function groupEntriesByMonth(months, entries) {
|
|
@@ -37,10 +28,11 @@ function groupEntriesByMonth(months, entries) {
|
|
|
37
28
|
|
|
38
29
|
if (Array.isArray(entries)) {
|
|
39
30
|
entries.forEach((entry) => {
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
const date = entryDate(entry);
|
|
32
|
+
if (date) {
|
|
33
|
+
result.get(monthIndex(date))?.set(date.getDate(), entry);
|
|
42
34
|
} else {
|
|
43
|
-
issueWarning('Ignored `dateMetadataProvider` entries
|
|
35
|
+
issueWarning('Ignored `dateMetadataProvider` entries whose `date` is not an ISO 8601 date.');
|
|
44
36
|
}
|
|
45
37
|
});
|
|
46
38
|
} else if (entries != null) {
|
|
@@ -56,8 +48,8 @@ function groupEntriesByMonth(months, entries) {
|
|
|
56
48
|
*
|
|
57
49
|
* The provider is called for a range of months and may return an array
|
|
58
50
|
* synchronously or a `Promise`, so results from a server (Flow) or a remote
|
|
59
|
-
* availability service can be awaited.
|
|
60
|
-
*
|
|
51
|
+
* availability service can be awaited. The range and each returned entry identify
|
|
52
|
+
* a date by an ISO 8601 string, e.g. `{ date: '2026-01-01', disabled: true }`.
|
|
61
53
|
*
|
|
62
54
|
* `ARCHITECTURE.md` in this package records the reasoning behind the request,
|
|
63
55
|
* caching, notification and failure behavior.
|
|
@@ -235,8 +227,8 @@ export class DateMetadataController {
|
|
|
235
227
|
this.#notify();
|
|
236
228
|
|
|
237
229
|
const range = {
|
|
238
|
-
start:
|
|
239
|
-
end:
|
|
230
|
+
start: formatISODate(monthDate(months[0])),
|
|
231
|
+
end: formatISODate(lastOfMonth(monthDate(months.at(-1)))),
|
|
240
232
|
};
|
|
241
233
|
|
|
242
234
|
let entries;
|
|
@@ -260,47 +260,66 @@ export function getAdjustedYear(referenceDate, year, month = 0, day = 1) {
|
|
|
260
260
|
return adjustedYear;
|
|
261
261
|
}
|
|
262
262
|
|
|
263
|
+
const ISO_DATE = /^([-+]\d{1,6}|\d{2,4})-(\d{1,2})-(\d{1,2})$/u;
|
|
264
|
+
|
|
265
|
+
// The parts of a date string in a format the parsers accept, as written.
|
|
266
|
+
function parseParts(str) {
|
|
267
|
+
// Parsing with RegExp to ensure correct format
|
|
268
|
+
const parts = ISO_DATE.exec(str);
|
|
269
|
+
if (!parts) {
|
|
270
|
+
return undefined;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
return { year: parseInt(parts[1], 10), month: parseInt(parts[2], 10) - 1, day: parseInt(parts[3], 10) };
|
|
274
|
+
}
|
|
275
|
+
|
|
263
276
|
/**
|
|
264
277
|
* Parse date string of one of the following date formats:
|
|
265
278
|
* - ISO 8601 `"YYYY-MM-DD"`
|
|
266
|
-
* -
|
|
279
|
+
* - Extended ISO 8601 with a signed year, e.g. `"+012026-MM-DD"` or `"-0001-MM-DD"`
|
|
280
|
+
*
|
|
281
|
+
* A date that does not exist, such as `"2026-02-30"`, is not parsed. Building it would carry the
|
|
282
|
+
* surplus into the next month or year and answer with a date that was never asked for.
|
|
283
|
+
*
|
|
267
284
|
* @param {!string} str Date string to parse
|
|
268
285
|
* @return {Date} Parsed date in system timezone
|
|
269
286
|
*/
|
|
270
287
|
export function parseDate(str) {
|
|
271
|
-
|
|
272
|
-
const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/u.exec(str);
|
|
288
|
+
const parts = parseParts(str);
|
|
273
289
|
if (!parts) {
|
|
274
290
|
return undefined;
|
|
275
291
|
}
|
|
276
292
|
|
|
277
|
-
|
|
293
|
+
const date = createDate(parts.year, parts.month, parts.day);
|
|
294
|
+
|
|
295
|
+
return date.getMonth() === parts.month && date.getDate() === parts.day ? date : undefined;
|
|
278
296
|
}
|
|
279
297
|
|
|
280
298
|
/**
|
|
281
299
|
* Parse date string of one of the following date formats:
|
|
282
300
|
* - ISO 8601 `"YYYY-MM-DD"`
|
|
283
|
-
* -
|
|
301
|
+
* - Extended ISO 8601 with a signed year, e.g. `"+012026-MM-DD"` or `"-0001-MM-DD"`
|
|
284
302
|
*
|
|
285
303
|
* Uses UTC date components to allow handling date instances independently of
|
|
286
304
|
* the system time-zone.
|
|
287
305
|
*
|
|
306
|
+
* A date that does not exist, such as `"2026-02-30"`, is not parsed, as in `parseDate`.
|
|
307
|
+
*
|
|
288
308
|
* @param {!string} str Date string to parse
|
|
289
309
|
* @return {Date} Parsed date in UTC timezone
|
|
290
310
|
*/
|
|
291
311
|
export function parseUTCDate(str) {
|
|
292
|
-
|
|
293
|
-
const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/u.exec(str);
|
|
312
|
+
const parts = parseParts(str);
|
|
294
313
|
if (!parts) {
|
|
295
314
|
return undefined;
|
|
296
315
|
}
|
|
297
316
|
|
|
298
317
|
const date = new Date(Date.UTC(0, 0)); // Wrong date (1900-01-01), but with midnight in UTC
|
|
299
|
-
date.setUTCFullYear(
|
|
300
|
-
date.setUTCMonth(
|
|
301
|
-
date.setUTCDate(
|
|
318
|
+
date.setUTCFullYear(parts.year);
|
|
319
|
+
date.setUTCMonth(parts.month);
|
|
320
|
+
date.setUTCDate(parts.day);
|
|
302
321
|
|
|
303
|
-
return date;
|
|
322
|
+
return date.getUTCMonth() === parts.month && date.getUTCDate() === parts.day ? date : undefined;
|
|
304
323
|
}
|
|
305
324
|
|
|
306
325
|
function formatISODateBase(dateParts) {
|
|
@@ -19,24 +19,28 @@ export interface DatePickerDate {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
|
-
* A range of dates
|
|
23
|
-
*
|
|
22
|
+
* A range of dates that `dateMetadataProvider` is asked about.
|
|
23
|
+
* It can span several months and always covers whole months.
|
|
24
24
|
*/
|
|
25
25
|
export interface DatePickerDateRange {
|
|
26
26
|
/**
|
|
27
|
-
* The first date of the range (inclusive).
|
|
27
|
+
* The first date of the range (inclusive), as an ISO 8601 date.
|
|
28
28
|
*/
|
|
29
|
-
start:
|
|
29
|
+
start: string;
|
|
30
30
|
/**
|
|
31
|
-
* The last date of the range (inclusive).
|
|
31
|
+
* The last date of the range (inclusive), as an ISO 8601 date.
|
|
32
32
|
*/
|
|
33
|
-
end:
|
|
33
|
+
end: string;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
/**
|
|
37
|
-
* Metadata
|
|
37
|
+
* Metadata for a single date, returned by `dateMetadataProvider`.
|
|
38
38
|
*/
|
|
39
|
-
export interface DatePickerDateMetadata
|
|
39
|
+
export interface DatePickerDateMetadata {
|
|
40
|
+
/**
|
|
41
|
+
* The date the metadata applies to in ISO 8601 format.
|
|
42
|
+
*/
|
|
43
|
+
date: string;
|
|
40
44
|
/**
|
|
41
45
|
* Whether the date cannot be selected.
|
|
42
46
|
*/
|
|
@@ -49,8 +53,9 @@ export interface DatePickerDateMetadata extends DatePickerDate {
|
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
/**
|
|
52
|
-
* A function called with the range of dates the calendar is about to
|
|
53
|
-
*
|
|
56
|
+
* A function called with the range of dates the calendar is about to render, returning
|
|
57
|
+
* the metadata for the dates in that range. It can return a `Promise` to load the metadata
|
|
58
|
+
* asynchronously, and `null` or `undefined` when no date in the range has metadata.
|
|
54
59
|
*/
|
|
55
60
|
export type DatePickerDateMetadataProvider = (
|
|
56
61
|
range: DatePickerDateRange,
|
|
@@ -280,47 +285,49 @@ export declare class DatePickerMixinClass {
|
|
|
280
285
|
* A function to be used to determine whether the user can select a given date.
|
|
281
286
|
* Receives a `DatePickerDate` object of the date to be selected and should return a
|
|
282
287
|
* boolean.
|
|
288
|
+
*
|
|
289
|
+
* The function is called once per date and has to answer synchronously. Use
|
|
290
|
+
* `dateMetadataProvider` when the answer has to be loaded first, or when dates also need
|
|
291
|
+
* custom part names. A date is disabled when either of the two disables it.
|
|
283
292
|
*/
|
|
284
293
|
isDateDisabled: (date: DatePickerDate) => boolean;
|
|
285
294
|
|
|
286
295
|
/**
|
|
287
|
-
* A
|
|
288
|
-
*
|
|
289
|
-
* `
|
|
290
|
-
*
|
|
291
|
-
* within that range. Dates it does not mention have no metadata. `month` is 0-based: 0 is
|
|
292
|
-
* January and 11 is December.
|
|
296
|
+
* A function that provides metadata for the dates the calendar is about to render: whether they
|
|
297
|
+
* are disabled, and CSS `part` names for styling from outside using the `::part()` selector.
|
|
298
|
+
* Unlike `isDateDisabled`, which is called once per date, the metadata provider is called for
|
|
299
|
+
* a range of dates at a time, and again as the calendar renders further dates.
|
|
293
300
|
*
|
|
294
|
-
*
|
|
295
|
-
* dates
|
|
296
|
-
*
|
|
297
|
-
* metadata for, whose entries are then ignored.
|
|
301
|
+
* It receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects
|
|
302
|
+
* for the dates in that range that have metadata. It can return a `Promise` to load the metadata
|
|
303
|
+
* asynchronously, and `null` or `undefined` when no date in the range has metadata.
|
|
298
304
|
*
|
|
299
|
-
*
|
|
300
|
-
* affected dates render with the `loading` part but stay selectable, and a loading spinner is
|
|
301
|
-
* shown. Nothing is disabled before the provider has actually reported it, so a slow provider
|
|
302
|
-
* does not make the calendar unusable. If it throws or rejects, the error is logged and the
|
|
303
|
-
* affected months are requested again the next time the user navigates.
|
|
305
|
+
* The returned array has the following structure:
|
|
304
306
|
*
|
|
305
|
-
*
|
|
306
|
-
*
|
|
307
|
-
*
|
|
308
|
-
*
|
|
307
|
+
* ```js
|
|
308
|
+
* [
|
|
309
|
+
* // The date is an ISO 8601 string.
|
|
310
|
+
* { date: '2026-01-01', disabled: true },
|
|
311
|
+
*
|
|
312
|
+
* // Adds a custom part name to the date.
|
|
313
|
+
* { date: '2026-01-02', part: 'busy' },
|
|
314
|
+
* ]
|
|
315
|
+
* ```
|
|
309
316
|
*
|
|
310
|
-
*
|
|
311
|
-
* `
|
|
317
|
+
* A date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or
|
|
318
|
+
* it is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in
|
|
319
|
+
* the field makes it invalid. The provider does not affect which date is focused when opening the
|
|
320
|
+
* overlay. Use `initialPosition` property to provide a selectable date.
|
|
312
321
|
*
|
|
313
|
-
*
|
|
314
|
-
*
|
|
315
|
-
*
|
|
322
|
+
* While a returned `Promise` is pending, the dates it covers are not disabled yet and render with
|
|
323
|
+
* the `loading` part. If the function throws or rejects, corresponding dates are requested again
|
|
324
|
+
* the next time the user navigates.
|
|
316
325
|
*
|
|
317
|
-
*
|
|
318
|
-
*
|
|
319
|
-
* by spaces. Do not use built-in names like `disabled` and `selected`.
|
|
326
|
+
* The provider is used for validation also when the overlay is closed. Date is considered valid
|
|
327
|
+
* while the provider is pending, and is re-validated again after the metadata is loaded.
|
|
320
328
|
*
|
|
321
|
-
* Keep a stable reference to the function
|
|
322
|
-
*
|
|
323
|
-
* behind it changed, call `clearCache()`.
|
|
329
|
+
* Keep a stable reference to the function: assigning a new one clears the cache and re-fetches
|
|
330
|
+
* visible range. Call `clearCache()` to re-fetch when the data behind the same function changed.
|
|
324
331
|
*/
|
|
325
332
|
dateMetadataProvider: DatePickerDateMetadataProvider | null | undefined;
|
|
326
333
|
|
|
@@ -63,7 +63,7 @@ export const datePickerI18nDefaults = Object.freeze({
|
|
|
63
63
|
date = parseInt(parts[1]);
|
|
64
64
|
year = parseInt(parts[2]);
|
|
65
65
|
if (parts[2].length < 3 && year >= 0) {
|
|
66
|
-
const usedReferenceDate =
|
|
66
|
+
const usedReferenceDate = parseDate(this.referenceDate) || new Date();
|
|
67
67
|
year = getAdjustedYear(usedReferenceDate, year, month, date);
|
|
68
68
|
}
|
|
69
69
|
} else if (parts.length === 2) {
|
|
@@ -206,6 +206,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
206
206
|
* Receives a `DatePickerDate` object of the date to be selected and should return a
|
|
207
207
|
* boolean.
|
|
208
208
|
*
|
|
209
|
+
* The function is called once per date and has to answer synchronously. Use
|
|
210
|
+
* `dateMetadataProvider` when the answer has to be loaded first, or when dates also need
|
|
211
|
+
* custom part names. A date is disabled when either of the two disables it.
|
|
212
|
+
*
|
|
209
213
|
* @type {function(DatePickerDate): boolean | undefined}
|
|
210
214
|
*/
|
|
211
215
|
isDateDisabled: {
|
|
@@ -213,43 +217,41 @@ export const DatePickerMixin = (subclass) =>
|
|
|
213
217
|
},
|
|
214
218
|
|
|
215
219
|
/**
|
|
216
|
-
* A
|
|
217
|
-
*
|
|
218
|
-
* `
|
|
219
|
-
*
|
|
220
|
-
*
|
|
221
|
-
*
|
|
220
|
+
* A function that provides metadata for the dates the calendar is about to render: whether they
|
|
221
|
+
* are disabled, and CSS `part` names for styling from outside using the `::part()` selector.
|
|
222
|
+
* Unlike `isDateDisabled`, which is called once per date, the metadata provider is called for
|
|
223
|
+
* a range of dates at a time, and again as the calendar renders further dates.
|
|
224
|
+
*
|
|
225
|
+
* It receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects
|
|
226
|
+
* for the dates in that range that have metadata. It can return a `Promise` to load the metadata
|
|
227
|
+
* asynchronously, and `null` or `undefined` when no date in the range has metadata.
|
|
222
228
|
*
|
|
223
|
-
*
|
|
224
|
-
* range of dates at a time, and again as the calendar renders further dates. The size of the
|
|
225
|
-
* range is decided by the calendar and may span several months, and may include months it
|
|
226
|
-
* already has metadata for, whose entries are then ignored.
|
|
229
|
+
* The returned array has the following structure:
|
|
227
230
|
*
|
|
228
|
-
*
|
|
229
|
-
*
|
|
230
|
-
*
|
|
231
|
-
*
|
|
232
|
-
* and the affected months are requested again the next time the user navigates.
|
|
231
|
+
* ```js
|
|
232
|
+
* [
|
|
233
|
+
* // The date is an ISO 8601 string.
|
|
234
|
+
* { date: '2026-01-01', disabled: true },
|
|
233
235
|
*
|
|
234
|
-
*
|
|
235
|
-
*
|
|
236
|
-
*
|
|
237
|
-
*
|
|
236
|
+
* // Adds a custom part name to the date.
|
|
237
|
+
* { date: '2026-01-02', part: 'busy' },
|
|
238
|
+
* ]
|
|
239
|
+
* ```
|
|
238
240
|
*
|
|
239
|
-
*
|
|
240
|
-
*
|
|
241
|
+
* A date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or
|
|
242
|
+
* it is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in
|
|
243
|
+
* the field makes it invalid. The provider does not affect which date is focused when opening the
|
|
244
|
+
* overlay. Use `initialPosition` property to provide a selectable date.
|
|
241
245
|
*
|
|
242
|
-
*
|
|
243
|
-
*
|
|
244
|
-
* the
|
|
246
|
+
* While a returned `Promise` is pending, the dates it covers are not disabled yet and render with
|
|
247
|
+
* the `loading` part. If the function throws or rejects, corresponding dates are requested again
|
|
248
|
+
* the next time the user navigates.
|
|
245
249
|
*
|
|
246
|
-
*
|
|
247
|
-
*
|
|
248
|
-
* separated by spaces. Do not use built-in names like `disabled` and `selected`.
|
|
250
|
+
* The provider is used for validation also when the overlay is closed. Date is considered valid
|
|
251
|
+
* while the provider is pending, and is re-validated again after the metadata is loaded.
|
|
249
252
|
*
|
|
250
|
-
* Keep a stable reference to the function
|
|
251
|
-
*
|
|
252
|
-
* data behind it changed, call `clearCache()`.
|
|
253
|
+
* Keep a stable reference to the function: assigning a new one clears the cache and re-fetches
|
|
254
|
+
* visible range. Call `clearCache()` to re-fetch when the data behind the same function changed.
|
|
253
255
|
*
|
|
254
256
|
* @type {DatePickerDateMetadataProvider | null | undefined}
|
|
255
257
|
*/
|
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": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha12",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -321,7 +321,7 @@
|
|
|
321
321
|
},
|
|
322
322
|
{
|
|
323
323
|
"name": "dateMetadataProvider",
|
|
324
|
-
"description": "A
|
|
324
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
325
325
|
"value": {
|
|
326
326
|
"type": [
|
|
327
327
|
"DatePickerDateMetadataProvider",
|
|
@@ -386,7 +386,7 @@
|
|
|
386
386
|
},
|
|
387
387
|
{
|
|
388
388
|
"name": "isDateDisabled",
|
|
389
|
-
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
|
|
389
|
+
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
|
|
390
390
|
"value": {
|
|
391
391
|
"type": [
|
|
392
392
|
"function DatePickerDate: boolean",
|
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": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha12",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
"name": ".dateMetadataProvider",
|
|
80
|
-
"description": "A
|
|
80
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
128
|
"name": ".isDateDisabled",
|
|
129
|
-
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
|
|
129
|
+
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|