@vaadin/date-picker 25.3.0-dev.3a3c2d7d2a → 25.3.0
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 +556 -205
- package/package.json +13 -13
- package/src/styles/vaadin-date-picker-overlay-content-base-styles.js +0 -3
- package/src/styles/vaadin-month-calendar-base-styles.js +3 -0
- package/src/vaadin-date-metadata-controller.d.ts +94 -0
- package/src/vaadin-date-metadata-controller.js +268 -0
- package/src/vaadin-date-picker-helper.d.ts +144 -13
- package/src/vaadin-date-picker-helper.js +119 -15
- package/src/vaadin-date-picker-mixin.d.ts +87 -15
- package/src/vaadin-date-picker-mixin.js +129 -121
- package/src/vaadin-date-picker-overlay-content-mixin.js +144 -163
- package/src/vaadin-date-picker-overlay-content.js +1 -0
- package/src/vaadin-date-picker-overlay.js +1 -0
- package/src/vaadin-date-picker-year.js +4 -1
- package/src/vaadin-date-picker.d.ts +73 -7
- package/src/vaadin-date-picker.js +67 -9
- package/src/vaadin-infinite-scroller.js +21 -6
- package/src/vaadin-month-calendar-mixin.js +43 -59
- package/src/vaadin-month-calendar.js +5 -0
- package/web-types.json +37 -21
- package/web-types.lit.json +18 -11
- package/src/vaadin-disabled-dates-controller.d.ts +0 -66
- package/src/vaadin-disabled-dates-controller.js +0 -241
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",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,19 +16,26 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-date-picker",
|
|
19
|
-
"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
|
|
19
|
+
"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 shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------------|\n| `--vaadin-date-picker-date-border-radius` |\n| `--vaadin-date-picker-date-disabled-color` |\n| `--vaadin-date-picker-date-height` |\n| `--vaadin-date-picker-date-selected-background` |\n| `--vaadin-date-picker-date-selected-color` |\n| `--vaadin-date-picker-date-today-color` |\n| `--vaadin-date-picker-date-width` |\n| `--vaadin-date-picker-month-header-color` |\n| `--vaadin-date-picker-month-header-font-size` |\n| `--vaadin-date-picker-month-header-font-weight` |\n| `--vaadin-date-picker-month-padding` |\n| `--vaadin-date-picker-overlay-max-height` |\n| `--vaadin-date-picker-overlay-width` |\n| `--vaadin-date-picker-toolbar-padding` |\n| `--vaadin-date-picker-week-divider-color` |\n| `--vaadin-date-picker-week-number-color` |\n| `--vaadin-date-picker-week-number-font-size` |\n| `--vaadin-date-picker-weekday-color` |\n| `--vaadin-date-picker-weekday-font-size` |\n| `--vaadin-date-picker-weekday-font-weight` |\n| `--vaadin-date-picker-year-scroller-background` |\n| `--vaadin-date-picker-year-scroller-border-color` |\n| `--vaadin-date-picker-year-scroller-current-year-color` |\n| `--vaadin-date-picker-year-scroller-width` |\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\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\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Toolbar with slotted buttons\n`loader` | Loading spinner shown while the date metadata provider is resolving\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`loading` | Set while the date metadata provider is resolving\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`loading` | Date element in a month whose metadata is currently being fetched\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\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",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": ".accessibleDescriptionRef",
|
|
24
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": ".accessibleName",
|
|
24
|
-
"description": "String used to label the component
|
|
31
|
+
"description": "String used to label the component for screen reader users.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
28
35
|
},
|
|
29
36
|
{
|
|
30
37
|
"name": ".accessibleNameRef",
|
|
31
|
-
"description": "
|
|
38
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|
|
@@ -63,21 +70,21 @@
|
|
|
63
70
|
},
|
|
64
71
|
{
|
|
65
72
|
"name": "?clearButtonVisible",
|
|
66
|
-
"description": "Set to true to display the clear icon which clears the input.\
|
|
73
|
+
"description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
|
|
67
74
|
"value": {
|
|
68
75
|
"kind": "expression"
|
|
69
76
|
}
|
|
70
77
|
},
|
|
71
78
|
{
|
|
72
|
-
"name": "
|
|
73
|
-
"description": "
|
|
79
|
+
"name": ".dateMetadataProvider",
|
|
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.",
|
|
74
81
|
"value": {
|
|
75
82
|
"kind": "expression"
|
|
76
83
|
}
|
|
77
84
|
},
|
|
78
85
|
{
|
|
79
|
-
"name": "
|
|
80
|
-
"description": "
|
|
86
|
+
"name": "?disabled",
|
|
87
|
+
"description": "If true, the user cannot interact with this element.",
|
|
81
88
|
"value": {
|
|
82
89
|
"kind": "expression"
|
|
83
90
|
}
|
|
@@ -98,7 +105,7 @@
|
|
|
98
105
|
},
|
|
99
106
|
{
|
|
100
107
|
"name": ".i18n",
|
|
101
|
-
"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```js\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```",
|
|
108
|
+
"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```js\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 // Accessible name of the overlay content, announced by screen readers\n // when the overlay opens.\n dialogAccessibleName: 'Calendar',\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```",
|
|
102
109
|
"value": {
|
|
103
110
|
"kind": "expression"
|
|
104
111
|
}
|
|
@@ -119,7 +126,7 @@
|
|
|
119
126
|
},
|
|
120
127
|
{
|
|
121
128
|
"name": ".isDateDisabled",
|
|
122
|
-
"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.",
|
|
123
130
|
"value": {
|
|
124
131
|
"kind": "expression"
|
|
125
132
|
}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2016 - 2026 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
7
|
-
import type { DatePickerDate, DatePickerDateRange } from './vaadin-date-picker-mixin.js';
|
|
8
|
-
|
|
9
|
-
export type DisabledDatesProvider = (range: DatePickerDateRange) => DatePickerDate[] | Promise<DatePickerDate[]>;
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* A reactive controller that resolves the dates disabled by the date-picker's
|
|
13
|
-
* `disabledDatesProvider`. It calls the provider once for a range of months,
|
|
14
|
-
* caches the resolved months so scrolling back and forth does not re-fetch,
|
|
15
|
-
* and prefetches a buffer of months around the requested range.
|
|
16
|
-
*/
|
|
17
|
-
export declare class DisabledDatesController implements ReactiveController {
|
|
18
|
-
constructor(host: ReactiveControllerHost, onChange: () => void);
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* The provider function, or `null` when none is set.
|
|
22
|
-
*/
|
|
23
|
-
provider: DisabledDatesProvider | null;
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Whether any month range is currently being fetched.
|
|
27
|
-
*/
|
|
28
|
-
readonly loading: boolean;
|
|
29
|
-
|
|
30
|
-
hostDisconnected(): void;
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Sets the provider function and clears the cache. Passing the same provider
|
|
34
|
-
* again is a no-op. Callers should keep a stable provider reference.
|
|
35
|
-
*/
|
|
36
|
-
setProvider(provider: DisabledDatesProvider | null | undefined): void;
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Clears the cache and invalidates any in-flight requests.
|
|
40
|
-
*/
|
|
41
|
-
reset(): void;
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Whether the month containing the given date has been fully resolved.
|
|
45
|
-
*/
|
|
46
|
-
isMonthLoaded(date: Date): boolean;
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Whether the given date is disabled by the provider. Only returns `true` for
|
|
50
|
-
* dates in an already-resolved month.
|
|
51
|
-
*/
|
|
52
|
-
isDateDisabled(date: Date): boolean;
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Whether the given date cannot be selected yet: it is disabled by the
|
|
56
|
-
* provider, or its month has not been resolved. Returns `false` when no
|
|
57
|
-
* provider is set.
|
|
58
|
-
*/
|
|
59
|
-
isDateBlocked(date: Date): boolean;
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Ensures the provider has been consulted for the inclusive range between the
|
|
63
|
-
* given dates, expanded by a prefetch buffer of months on each side.
|
|
64
|
-
*/
|
|
65
|
-
ensureRangeLoaded(startDate: Date, endDate: Date): void;
|
|
66
|
-
}
|
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2016 - 2026 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { extractDateParts } from './vaadin-date-picker-helper.js';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Number of months fetched before and after the requested range, so that
|
|
10
|
-
* scrolling a few months in either direction does not trigger a new request.
|
|
11
|
-
* Mirrors how the grid prefetches rows around the viewport.
|
|
12
|
-
*/
|
|
13
|
-
const PREFETCH_MONTHS = 6;
|
|
14
|
-
|
|
15
|
-
function monthKey(date) {
|
|
16
|
-
return `${date.getFullYear()}-${date.getMonth()}`;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function dateKey(date) {
|
|
20
|
-
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function firstOfMonth(date) {
|
|
24
|
-
return new Date(date.getFullYear(), date.getMonth(), 1);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function lastOfMonth(date) {
|
|
28
|
-
return new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function addMonths(date, months) {
|
|
32
|
-
return new Date(date.getFullYear(), date.getMonth() + months, 1);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* A reactive controller that resolves the dates disabled by the date-picker's
|
|
37
|
-
* `disabledDatesProvider`. It calls the provider once for a range of months
|
|
38
|
-
* (never one date at a time), caches the resolved months so scrolling back and
|
|
39
|
-
* forth does not re-fetch them, and prefetches a buffer of months around the
|
|
40
|
-
* requested range. While any request is in flight, {@link #loading} is `true`
|
|
41
|
-
* so the overlay can show a spinner.
|
|
42
|
-
*
|
|
43
|
-
* The provider may return an array synchronously or a `Promise`, so results
|
|
44
|
-
* from a server (Flow) or a remote availability service can be awaited.
|
|
45
|
-
*/
|
|
46
|
-
export class DisabledDatesController {
|
|
47
|
-
constructor(host, onChange) {
|
|
48
|
-
this.host = host;
|
|
49
|
-
this.__onChange = onChange;
|
|
50
|
-
this.provider = null;
|
|
51
|
-
this.__disabledDates = new Set();
|
|
52
|
-
this.__loadedMonths = new Set();
|
|
53
|
-
this.__pendingMonths = new Set();
|
|
54
|
-
this.__requestId = 0;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
hostDisconnected() {
|
|
58
|
-
// Invalidate in-flight requests so their late results don't touch a
|
|
59
|
-
// detached host, and drop the pending (loading) state. The resolved cache
|
|
60
|
-
// is kept so reopening the overlay does not re-fetch.
|
|
61
|
-
this.__requestId += 1;
|
|
62
|
-
this.__pendingMonths = new Set();
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* Whether any month range is currently being fetched.
|
|
67
|
-
* @return {boolean}
|
|
68
|
-
*/
|
|
69
|
-
get loading() {
|
|
70
|
-
return this.__pendingMonths.size > 0;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Sets the provider function and clears the cache. Passing the same provider
|
|
75
|
-
* again is a no-op, so the cache survives unrelated re-renders — callers
|
|
76
|
-
* should therefore keep a stable provider reference rather than passing a new
|
|
77
|
-
* function on every update, which would otherwise reset the cache and
|
|
78
|
-
* re-fetch every visible range.
|
|
79
|
-
*/
|
|
80
|
-
setProvider(provider) {
|
|
81
|
-
if (this.provider === provider) {
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
this.provider = provider;
|
|
85
|
-
this.reset();
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/** Clears the cache and invalidates any in-flight requests. */
|
|
89
|
-
reset() {
|
|
90
|
-
this.__disabledDates = new Set();
|
|
91
|
-
this.__loadedMonths = new Set();
|
|
92
|
-
this.__pendingMonths = new Set();
|
|
93
|
-
this.__requestId += 1;
|
|
94
|
-
this.__notify();
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* Whether the month containing the given date has been fully resolved.
|
|
99
|
-
* @param {Date} date
|
|
100
|
-
* @return {boolean}
|
|
101
|
-
*/
|
|
102
|
-
isMonthLoaded(date) {
|
|
103
|
-
return this.__loadedMonths.has(monthKey(date));
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* Whether the given date is disabled by the provider. Only returns `true` for
|
|
108
|
-
* dates in an already-resolved month.
|
|
109
|
-
* @param {Date} date
|
|
110
|
-
* @return {boolean}
|
|
111
|
-
*/
|
|
112
|
-
isDateDisabled(date) {
|
|
113
|
-
return !!date && this.__disabledDates.has(dateKey(date));
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* Whether the given date cannot be selected yet: it is disabled by the
|
|
118
|
-
* provider, or its month has not been resolved so its state is still unknown.
|
|
119
|
-
* Returns `false` when no provider is set. Used to block selection and to
|
|
120
|
-
* render dates as non-selectable while their month is loading.
|
|
121
|
-
* @param {Date} date
|
|
122
|
-
* @return {boolean}
|
|
123
|
-
*/
|
|
124
|
-
isDateBlocked(date) {
|
|
125
|
-
return !!this.provider && !!date && (this.isDateDisabled(date) || !this.isMonthLoaded(date));
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
/**
|
|
129
|
-
* Ensures the provider has been consulted for the inclusive range between the
|
|
130
|
-
* given dates, expanded by a prefetch buffer of months on each side. Months
|
|
131
|
-
* that are already loaded or in flight are skipped, and consecutive missing
|
|
132
|
-
* months are grouped into a single provider call.
|
|
133
|
-
*
|
|
134
|
-
* @param {Date} startDate
|
|
135
|
-
* @param {Date} endDate
|
|
136
|
-
*/
|
|
137
|
-
ensureRangeLoaded(startDate, endDate) {
|
|
138
|
-
if (!this.provider || !startDate || !endDate) {
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
const first = addMonths(firstOfMonth(startDate), -PREFETCH_MONTHS);
|
|
143
|
-
const last = addMonths(firstOfMonth(endDate), PREFETCH_MONTHS);
|
|
144
|
-
|
|
145
|
-
const monthsToLoad = [];
|
|
146
|
-
for (let month = first; month <= last; month = addMonths(month, 1)) {
|
|
147
|
-
const key = monthKey(month);
|
|
148
|
-
if (!this.__loadedMonths.has(key) && !this.__pendingMonths.has(key)) {
|
|
149
|
-
monthsToLoad.push(new Date(month));
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
if (monthsToLoad.length === 0) {
|
|
154
|
-
return;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
this.__groupConsecutiveMonths(monthsToLoad).forEach((group) => this.__loadGroup(group));
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
/** @private */
|
|
161
|
-
__groupConsecutiveMonths(months) {
|
|
162
|
-
const groups = [];
|
|
163
|
-
months.forEach((month) => {
|
|
164
|
-
const group = groups.at(-1);
|
|
165
|
-
const previous = group?.at(-1);
|
|
166
|
-
if (previous && monthKey(addMonths(previous, 1)) === monthKey(month)) {
|
|
167
|
-
group.push(month);
|
|
168
|
-
} else {
|
|
169
|
-
groups.push([month]);
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
return groups;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
/** @private */
|
|
176
|
-
__loadGroup(months) {
|
|
177
|
-
const requestId = this.__requestId;
|
|
178
|
-
months.forEach((month) => this.__pendingMonths.add(monthKey(month)));
|
|
179
|
-
this.__notify();
|
|
180
|
-
|
|
181
|
-
const range = {
|
|
182
|
-
start: extractDateParts(firstOfMonth(months[0])),
|
|
183
|
-
end: extractDateParts(lastOfMonth(months[months.length - 1])),
|
|
184
|
-
};
|
|
185
|
-
|
|
186
|
-
let result;
|
|
187
|
-
try {
|
|
188
|
-
result = this.provider(range);
|
|
189
|
-
} catch (error) {
|
|
190
|
-
// Treat a throwing provider the same as a rejected promise: clear the
|
|
191
|
-
// pending state and disable nothing, rather than letting the error
|
|
192
|
-
// propagate out of the scroll/render path that triggered the load.
|
|
193
|
-
console.error(error);
|
|
194
|
-
this.__resolveGroup(months, [], requestId);
|
|
195
|
-
return;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
if (result && typeof result.then === 'function') {
|
|
199
|
-
result.then(
|
|
200
|
-
(dates) => this.__resolveGroup(months, dates, requestId),
|
|
201
|
-
(error) => {
|
|
202
|
-
console.error(error);
|
|
203
|
-
this.__resolveGroup(months, [], requestId);
|
|
204
|
-
},
|
|
205
|
-
);
|
|
206
|
-
} else {
|
|
207
|
-
this.__resolveGroup(months, result, requestId);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
/** @private */
|
|
212
|
-
__resolveGroup(months, dates, requestId) {
|
|
213
|
-
// Ignore results from before the last reset (e.g. provider changed).
|
|
214
|
-
if (requestId !== this.__requestId) {
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
if (Array.isArray(dates)) {
|
|
219
|
-
dates.forEach((date) => {
|
|
220
|
-
if (date) {
|
|
221
|
-
this.__disabledDates.add(`${date.year}-${date.month}-${date.day}`);
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
months.forEach((month) => {
|
|
227
|
-
const key = monthKey(month);
|
|
228
|
-
this.__pendingMonths.delete(key);
|
|
229
|
-
this.__loadedMonths.add(key);
|
|
230
|
-
});
|
|
231
|
-
|
|
232
|
-
this.__notify();
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
/** @private */
|
|
236
|
-
__notify() {
|
|
237
|
-
if (this.__onChange) {
|
|
238
|
-
this.__onChange();
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
}
|