{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "vaadin-date-picker.js", "declarations": [], "exports": [ { "kind": "js", "name": "*", "declaration": { "name": "*", "module": "src/vaadin-date-picker.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-date-metadata-controller.js", "declarations": [ { "kind": "class", "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.", "name": "DateMetadataController", "members": [ { "kind": "method", "name": "clearCache", "description": "Clears the cache and invalidates any in-flight requests." }, { "kind": "method", "name": "ensureRangeLoaded", "parameters": [ { "name": "startDate", "type": { "text": "Date | null | undefined" } }, { "name": "endDate", "type": { "text": "Date | null | undefined" } } ], "description": "Ensures the provider has been consulted for the inclusive range between the\ngiven dates, rounded out to whole blocks of months. Months already loaded or in\nflight are skipped, and the ones left over are requested with a single call.\n\nEach call that finds a missing month issues its own request, so a caller that\nloads on scroll should debounce." }, { "kind": "method", "name": "getMetadata", "parameters": [ { "name": "date", "type": { "text": "Date | null | undefined" } } ], "description": "The metadata resolved for the given date, or `undefined` when the date has\nno metadata or its month has not been resolved yet. Returns the entry the\nprovider supplied, which the caller must not modify.", "return": { "type": { "text": "object | undefined" } } }, { "kind": "field", "name": "host", "description": "The controller host element.", "type": { "text": "ReactiveControllerHost & HTMLElement" }, "default": "host" }, { "kind": "method", "name": "hostConnected" }, { "kind": "method", "name": "isDateDisabled", "parameters": [ { "name": "date", "type": { "text": "Date | null | undefined" } } ], "description": "Whether the given date is disabled by its metadata.", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "isLoading", "description": "Whether any month range is currently being fetched.", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "isMonthLoaded", "parameters": [ { "name": "date", "type": { "text": "Date | null | undefined" } } ], "description": "Whether the provider has answered for the month containing the given date.\nA month whose request failed is not loaded and will be requested again.", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "isMonthPending", "parameters": [ { "name": "date", "type": { "text": "Date | null | undefined" } } ], "description": "Whether the month containing the given date is currently being fetched. A month\nthat has not been asked about is not pending, so this reports the same state as\n`isLoading()` does for the whole cache.", "return": { "type": { "text": "boolean" } } }, { "kind": "field", "name": "provider", "type": { "text": "Function | null" }, "default": "null", "description": "The provider function, or `null` when none is set." }, { "kind": "method", "name": "setProvider", "parameters": [ { "name": "provider", "type": { "text": "Function | null | undefined" } } ], "description": "Sets the provider function and clears the cache. Passing the same provider again\nis a no-op, so callers should keep a stable reference." }, { "kind": "method", "name": "subscribe", "parameters": [ { "name": "element", "type": { "text": "ReactiveElement" } } ], "description": "Registers an element to be re-rendered whenever the resolved metadata or the\nloading state changes. The element must render from its bindings, and must not be\nthe one whose own observer triggers a load. It stays registered for the\ncontroller's lifetime." } ] } ], "exports": [ { "kind": "js", "name": "DateMetadataController", "declaration": { "name": "DateMetadataController", "module": "src/vaadin-date-metadata-controller.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-date-picker-helper.js", "declarations": [ { "kind": "function", "name": "createDate", "parameters": [ { "name": "year", "type": { "text": "number" } }, { "name": "month", "description": "Zero-based month, may be out of range to shift the year", "type": { "text": "number" } }, { "name": "day", "description": "May be `0` to select the last day of the previous month", "type": { "text": "number" } } ], "description": "Create a date at midnight in local time. Unlike `new Date(year, month, day)`,\nthis supports years below 100, which the constructor maps into the 20th\ncentury. The month is assigned before the day so that the initial day of month\n(1) always exists in the target month.", "return": { "type": { "text": "Date" } } }, { "kind": "function", "name": "firstOfMonth", "parameters": [ { "name": "date", "type": { "text": "!Date" } } ], "description": "Get the first day of the month the given date is in.", "return": { "type": { "text": "Date" } } }, { "kind": "function", "name": "lastOfMonth", "parameters": [ { "name": "date", "type": { "text": "!Date" } } ], "description": "Get the last day of the month the given date is in.", "return": { "type": { "text": "Date" } } }, { "kind": "function", "name": "monthIndexOf", "parameters": [ { "name": "year", "type": { "text": "number" } }, { "name": "month", "description": "Zero-based month", "type": { "text": "number" } } ], "description": "Get the index of a month, counted from January of year 0. Reduces a month to a single\ninteger, so a lookup builds no key and two months are adjacent when their indexes are.", "return": { "type": { "text": "number" } } }, { "kind": "function", "name": "monthIndex", "parameters": [ { "name": "date", "type": { "text": "!Date" } } ], "description": "Get the index of the month the given date is in.", "return": { "type": { "text": "number" } } }, { "kind": "function", "name": "monthDate", "parameters": [ { "name": "index", "type": { "text": "number" } } ], "description": "Get the first day of the month with the given index, inverting `monthIndexOf`. Counting from\nJanuary of year 0 also inverts negative indexes, since `createDate` normalizes a month outside\n0-11 into the year.", "return": { "type": { "text": "Date" } } }, { "kind": "function", "name": "getISOWeekNumber", "parameters": [ { "name": "date", "type": { "text": "!Date" } } ], "description": "Get ISO 8601 week number for the given date.", "return": { "type": { "text": "number" } } }, { "kind": "function", "name": "normalizeDate", "parameters": [ { "name": "date", "description": "in system timezone", "type": { "text": "Date" } } ], "description": "Creates a new object with the same date, but sets the hours, minutes, seconds and milliseconds to 0.", "return": { "type": { "text": "Date" } } }, { "kind": "function", "name": "normalizeUTCDate", "parameters": [ { "name": "date", "description": "in UTC timezone", "type": { "text": "Date" } } ], "description": "Creates a new object with the same date, but sets the hours, minutes, seconds and milliseconds to 0.\n\nUses UTC date components to allow handling date instances independently of\nthe system time-zone.", "return": { "type": { "text": "Date" } } }, { "kind": "function", "name": "dateEquals", "parameters": [ { "name": "date1", "type": { "text": "Date" } }, { "name": "date2", "type": { "text": "Date" } }, { "name": "normalizer", "default": "normalizeDate", "type": { "text": "function(Date): Date" } } ], "description": "Check if two dates are equal.", "return": { "type": { "text": "boolean" } } }, { "kind": "function", "name": "extractDateParts", "parameters": [ { "name": "date", "type": { "text": "!Date" } } ], "description": "Extracts the basic component parts of a date (day, month and year)\nto the expected format.", "return": { "type": { "text": "{day: number, month: number, year: number}" } } }, { "kind": "function", "name": "dateAllowed", "parameters": [ { "name": "date", "description": "The date to check", "type": { "text": "!Date" } }, { "name": "min", "description": "Range start", "type": { "text": "Date" } }, { "name": "max", "description": "Range end", "type": { "text": "Date" } }, { "name": "isDateDisabled", "description": "Callback to check if the date is disabled", "type": { "text": "function(!DatePickerDate): boolean" } } ], "description": "Check if the given date is in the range of allowed dates.", "return": { "type": { "text": "boolean" } } }, { "kind": "function", "name": "dateSelectable", "parameters": [ { "name": "date", "description": "The date to check", "type": { "text": "!Date" } }, { "name": "min", "description": "Range start", "type": { "text": "Date | null" } }, { "name": "max", "description": "Range end", "type": { "text": "Date | null" } }, { "name": "isDateDisabled", "description": "Callback to check if the date is disabled", "type": { "text": "function(!DatePickerDate): boolean" } }, { "name": "controller", "description": "The date metadata controller", "optional": true, "type": { "text": "DateMetadataController | null" } } ], "description": "Check if the given date can be selected: allowed by `dateAllowed` and not reported as disabled\nby the date metadata controller. This is narrower than `dateAllowed`, which decides what can be\nfocused: a disabled date is still focusable, it just cannot be selected.", "return": { "type": { "text": "boolean" } } }, { "kind": "function", "name": "getClosestDate", "parameters": [ { "name": "date", "description": "The date to compare dates with", "type": { "text": "!Date" } }, { "name": "dates", "description": "Array of date objects", "type": { "text": "!Array" } } ], "description": "Get closest date from array of dates.", "return": { "type": { "text": "!Date" } } }, { "kind": "function", "name": "dateAfterXMonths", "parameters": [ { "name": "months", "type": { "text": "number" } } ], "description": "Get difference in months between today and given months value.", "return": { "type": { "text": "number" } } }, { "kind": "function", "name": "getAdjustedYear", "parameters": [ { "name": "referenceDate", "description": "The date to act as basis in the calculation", "type": { "text": "!Date" } }, { "name": "year", "description": "Should be in the range of [0, 99]", "type": { "text": "!number" } }, { "name": "month", "default": "0", "type": { "text": "number" } }, { "name": "day", "default": "1", "type": { "text": "number" } } ], "description": "Calculate the year of the date based on the provided reference date.\nGets a two-digit year and returns a full year.", "return": { "type": { "text": "!number" } } }, { "kind": "function", "name": "parseDate", "parameters": [ { "name": "str", "description": "Date string to parse", "type": { "text": "!string" } } ], "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.", "return": { "type": { "text": "Date" } } }, { "kind": "function", "name": "parseUTCDate", "parameters": [ { "name": "str", "description": "Date string to parse", "type": { "text": "!string" } } ], "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`.", "return": { "type": { "text": "Date" } } }, { "kind": "function", "name": "formatISODate", "parameters": [ { "name": "date", "description": "in system timezone", "type": { "text": "Date" } } ], "description": "Format a date instance in ISO 8601 (`\"YYYY-MM-DD\"`) or 6-digit extended ISO\n8601 (`\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`) format.", "return": { "type": { "text": "string" } } }, { "kind": "function", "name": "formatUTCISODate", "parameters": [ { "name": "date", "description": "in UTC timezone", "type": { "text": "Date" } } ], "description": "Format a date instance in ISO 8601 (`\"YYYY-MM-DD\"`) or 6-digit extended ISO\n8601 (`\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`) format.\n\nUses UTC date components to allow handling date instances independently of\nthe system time-zone.", "return": { "type": { "text": "string" } } } ], "exports": [ { "kind": "js", "name": "createDate", "declaration": { "name": "createDate", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "firstOfMonth", "declaration": { "name": "firstOfMonth", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "lastOfMonth", "declaration": { "name": "lastOfMonth", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "monthIndexOf", "declaration": { "name": "monthIndexOf", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "monthIndex", "declaration": { "name": "monthIndex", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "monthDate", "declaration": { "name": "monthDate", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "getISOWeekNumber", "declaration": { "name": "getISOWeekNumber", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "normalizeDate", "declaration": { "name": "normalizeDate", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "normalizeUTCDate", "declaration": { "name": "normalizeUTCDate", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "dateEquals", "declaration": { "name": "dateEquals", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "extractDateParts", "declaration": { "name": "extractDateParts", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "dateAllowed", "declaration": { "name": "dateAllowed", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "dateSelectable", "declaration": { "name": "dateSelectable", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "getClosestDate", "declaration": { "name": "getClosestDate", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "dateAfterXMonths", "declaration": { "name": "dateAfterXMonths", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "getAdjustedYear", "declaration": { "name": "getAdjustedYear", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "parseDate", "declaration": { "name": "parseDate", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "parseUTCDate", "declaration": { "name": "parseUTCDate", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "formatISODate", "declaration": { "name": "formatISODate", "module": "src/vaadin-date-picker-helper.js" } }, { "kind": "js", "name": "formatUTCISODate", "declaration": { "name": "formatUTCISODate", "module": "src/vaadin-date-picker-helper.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-date-picker-mixin.js", "declarations": [ { "kind": "variable", "name": "datePickerI18nDefaults" }, { "kind": "mixin", "description": "", "name": "DatePickerMixin", "members": [ { "kind": "field", "name": "autofocus", "privacy": "public", "type": { "text": "boolean" }, "description": "Specify that this control should have input focus when the page loads.", "attribute": "autofocus", "inheritedFrom": { "name": "DelegateFocusMixin", "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js" } }, { "kind": "field", "name": "autoOpenDisabled", "privacy": "public", "type": { "text": "boolean" }, "description": "Set true to prevent the overlay from opening automatically.", "attribute": "auto-open-disabled" }, { "kind": "method", "name": "checkValidity", "description": "Returns true if the current input value satisfies all constraints (if any)\n\nOverride the `checkValidity` method for custom validations.", "return": { "type": { "text": "boolean" } }, "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "method", "name": "clear", "description": "Clear the value of the field.", "inheritedFrom": { "name": "InputMixin", "package": "@vaadin/field-base/src/input-mixin.js" } }, { "kind": "method", "name": "clearCache", "description": "Clears the `dateMetadataProvider` cache and reloads the date metadata." }, { "kind": "method", "name": "close", "description": "Closes the dropdown." }, { "kind": "field", "name": "dateMetadataProvider", "privacy": "public", "type": { "text": "DatePickerDateMetadataProvider | null | undefined" }, "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.", "attribute": "date-metadata-provider" }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, the user cannot interact with this element.", "attribute": "disabled", "inheritedFrom": { "name": "TabindexMixin", "package": "@vaadin/a11y-base/src/tabindex-mixin.js" } }, { "kind": "field", "name": "i18n", "privacy": "public", "type": { "text": "Object" }, "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```", "attribute": "i18n", "inheritedFrom": { "name": "I18nMixin", "package": "@vaadin/component-base/src/i18n-mixin.js" } }, { "kind": "field", "name": "initialPosition", "privacy": "public", "type": { "text": "string" }, "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.", "attribute": "initial-position" }, { "kind": "field", "name": "invalid", "privacy": "public", "type": { "text": "boolean" }, "description": "Set to true when the field is invalid.", "attribute": "invalid", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "field", "name": "isDateDisabled", "privacy": "public", "type": { "text": "function(DatePickerDate): boolean | undefined" }, "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.", "attribute": "is-date-disabled" }, { "kind": "field", "name": "manualValidation", "privacy": "public", "type": { "text": "boolean" }, "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.", "attribute": "manual-validation", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "field", "name": "max", "privacy": "public", "type": { "text": "string" }, "description": "The latest date that can be selected. All later 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\"`", "attribute": "max" }, { "kind": "field", "name": "min", "privacy": "public", "type": { "text": "string" }, "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\"`", "attribute": "min" }, { "kind": "method", "name": "open", "description": "Opens the dropdown." }, { "kind": "field", "name": "opened", "privacy": "public", "type": { "text": "boolean" }, "description": "Set true to open the date selector overlay.", "attribute": "opened" }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Specifies that the user must fill in a value.", "attribute": "required", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "field", "name": "showWeekNumbers", "privacy": "public", "type": { "text": "boolean" }, "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).", "attribute": "show-week-numbers" }, { "kind": "method", "name": "validate", "description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.", "return": { "type": { "text": "boolean" } }, "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "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\"`", "attribute": "value", "inheritedFrom": { "name": "InputMixin", "package": "@vaadin/field-base/src/input-mixin.js" } } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" }, "inheritedFrom": { "name": "InputConstraintsMixin", "package": "@vaadin/field-base/src/input-constraints-mixin.js" } }, { "name": "unparsable-change", "type": { "text": "CustomEvent" } }, { "name": "validated", "type": { "text": "CustomEvent" }, "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } } ], "attributes": [ { "name": "auto-open-disabled", "type": { "text": "boolean" }, "description": "Set true to prevent the overlay from opening automatically.", "fieldName": "autoOpenDisabled" }, { "name": "autofocus", "type": { "text": "boolean" }, "description": "Specify that this control should have input focus when the page loads.", "fieldName": "autofocus", "inheritedFrom": { "name": "DelegateFocusMixin", "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js" } }, { "name": "date-metadata-provider", "type": { "text": "DatePickerDateMetadataProvider | null | undefined" }, "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.", "fieldName": "dateMetadataProvider" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If true, the user cannot interact with this element.", "fieldName": "disabled", "inheritedFrom": { "name": "TabindexMixin", "package": "@vaadin/a11y-base/src/tabindex-mixin.js" } }, { "name": "i18n", "type": { "text": "Object" }, "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.", "fieldName": "i18n", "inheritedFrom": { "name": "I18nMixin", "package": "@vaadin/component-base/src/i18n-mixin.js" } }, { "name": "initial-position", "type": { "text": "string" }, "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.", "fieldName": "initialPosition" }, { "name": "invalid", "type": { "text": "boolean" }, "description": "Set to true when the field is invalid.", "fieldName": "invalid", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "name": "is-date-disabled", "type": { "text": "function(DatePickerDate): boolean | undefined" }, "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.", "fieldName": "isDateDisabled" }, { "name": "manual-validation", "type": { "text": "boolean" }, "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.", "fieldName": "manualValidation", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "name": "max", "type": { "text": "string" }, "description": "The latest date that can be selected. All later 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\"`", "fieldName": "max" }, { "name": "min", "type": { "text": "string" }, "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\"`", "fieldName": "min" }, { "name": "opened", "type": { "text": "boolean" }, "description": "Set true to open the date selector overlay.", "fieldName": "opened" }, { "name": "required", "type": { "text": "boolean" }, "description": "Specifies that the user must fill in a value.", "fieldName": "required", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "name": "show-week-numbers", "type": { "text": "boolean" }, "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).", "fieldName": "showWeekNumbers" }, { "name": "value", "type": { "text": "string" }, "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\"`", "fieldName": "value", "inheritedFrom": { "name": "InputMixin", "package": "@vaadin/field-base/src/input-mixin.js" } } ], "mixins": [ { "name": "I18nMixin", "package": "@vaadin/component-base/src/i18n-mixin.js" }, { "name": "DelegateFocusMixin", "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js" }, { "name": "InputConstraintsMixin", "package": "@vaadin/field-base/src/input-constraints-mixin.js" }, { "name": "KeyboardMixin", "package": "@vaadin/a11y-base/src/keyboard-mixin.js" } ], "parameters": [ { "name": "subclass" } ] } ], "exports": [ { "kind": "js", "name": "datePickerI18nDefaults", "declaration": { "name": "datePickerI18nDefaults", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "js", "name": "DatePickerMixin", "declaration": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-date-picker-overlay-content-mixin.js", "declarations": [ { "kind": "mixin", "description": "", "name": "DatePickerOverlayContentMixin", "members": [ { "kind": "field", "name": "calendars", "privacy": "public", "type": { "text": "array" }, "attribute": "calendars" }, { "kind": "method", "name": "cancelLoadVisibleDateMetadata", "description": "Drops a date metadata load that navigating has scheduled but that has not run yet." }, { "kind": "field", "name": "enteredDate", "privacy": "public", "type": { "text": "date" }, "attribute": "entered-date" }, { "kind": "field", "name": "focusableDateElement", "readonly": true }, { "kind": "method", "name": "focusCancel", "description": "Focuses the cancel button" }, { "kind": "method", "name": "focusDate", "parameters": [ { "name": "date" }, { "name": "keepMonth" } ] }, { "kind": "method", "name": "focusDateElement", "parameters": [ { "name": "reveal", "default": "true" } ] }, { "kind": "field", "name": "focusedDate", "privacy": "public", "type": { "text": "object" }, "description": "Date value which is focused using keyboard.", "attribute": "focused-date" }, { "kind": "field", "name": "i18n", "privacy": "public", "type": { "text": "object" }, "attribute": "i18n" }, { "kind": "field", "name": "initialPosition", "privacy": "public", "type": { "text": "object" }, "description": "Date which should be visible when there is no value selected.", "attribute": "initial-position" }, { "kind": "field", "name": "isDateDisabled", "privacy": "public", "type": { "text": "function(DatePickerDate): boolean | undefined" }, "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.", "attribute": "is-date-disabled" }, { "kind": "field", "name": "label", "privacy": "public", "description": "Input label", "attribute": "label" }, { "kind": "method", "name": "loadVisibleDateMetadata", "description": "Requests the date metadata for the months currently rendered. Months already loaded or in flight\nare skipped." }, { "kind": "field", "name": "maxDate", "privacy": "public", "type": { "text": "object" }, "description": "The latest date that can be selected. All later dates will be disabled.", "attribute": "max-date" }, { "kind": "field", "name": "minDate", "privacy": "public", "type": { "text": "object" }, "description": "The earliest date that can be selected. All earlier dates will be disabled.", "attribute": "min-date" }, { "kind": "method", "name": "reset" }, { "kind": "method", "name": "revealDate", "parameters": [ { "name": "date" }, { "name": "animate", "default": "true" } ], "description": "Scrolls the month and year scrollers enough to reveal the given date." }, { "kind": "field", "name": "scrollDuration", "privacy": "public", "type": { "text": "number" }, "attribute": "scroll-duration" }, { "kind": "method", "name": "scrollToDate", "parameters": [ { "name": "date" }, { "name": "animate" } ], "description": "Scrolls the list to the given Date." }, { "kind": "field", "name": "selectedDate", "privacy": "public", "type": { "text": "object" }, "description": "The value for this element.", "attribute": "selected-date" }, { "kind": "field", "name": "showWeekNumbers", "privacy": "public", "type": { "text": "boolean" }, "attribute": "show-week-numbers" }, { "kind": "method", "name": "updateTodayButton", "description": "Applies the today button's label and whether today can be selected." }, { "kind": "field", "name": "years", "privacy": "public", "type": { "text": "array" }, "attribute": "years" } ], "events": [ { "name": "close", "type": { "text": "CustomEvent" } }, { "name": "date-selected", "type": { "text": "CustomEvent" } }, { "name": "focus-input", "type": { "text": "CustomEvent" } }, { "name": "scroll-animation-finished", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "calendars", "type": { "text": "array" }, "fieldName": "calendars" }, { "name": "entered-date", "type": { "text": "date" }, "fieldName": "enteredDate" }, { "name": "is-date-disabled", "type": { "text": "function(DatePickerDate): boolean | undefined" }, "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.", "fieldName": "isDateDisabled" }, { "name": "label", "description": "Input label", "fieldName": "label" }, { "name": "scroll-duration", "type": { "text": "number" }, "fieldName": "scrollDuration" }, { "name": "show-week-numbers", "type": { "text": "boolean" }, "fieldName": "showWeekNumbers" }, { "name": "years", "type": { "text": "array" }, "fieldName": "years" } ], "parameters": [ { "name": "superClass" } ] } ], "exports": [ { "kind": "js", "name": "DatePickerOverlayContentMixin", "declaration": { "name": "DatePickerOverlayContentMixin", "module": "src/vaadin-date-picker-overlay-content-mixin.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-date-picker-overlay-mixin.js", "declarations": [ { "kind": "mixin", "description": "", "name": "DatePickerOverlayMixin", "members": [ { "kind": "field", "name": "autofocus", "privacy": "public", "type": { "text": "boolean" }, "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.", "attribute": "autofocus", "inheritedFrom": { "name": "OverlayFocusMixin", "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js" } }, { "kind": "method", "name": "bringToFront", "description": "Brings the overlay as visually the frontmost one.", "inheritedFrom": { "name": "OverlayStackMixin", "package": "@vaadin/overlay/src/vaadin-overlay-stack-mixin.js" } }, { "kind": "method", "name": "close", "parameters": [ { "name": "sourceEvent", "type": { "text": "Event=" } } ], "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "field", "name": "focusTrap", "privacy": "public", "type": { "text": "boolean" }, "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.", "attribute": "focus-trap", "inheritedFrom": { "name": "OverlayFocusMixin", "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js" } }, { "kind": "field", "name": "hidden", "privacy": "public", "type": { "text": "boolean" }, "description": "When set to true, the overlay is hidden. This also closes the overlay\nimmediately in case there is a closing animation in progress.", "attribute": "hidden", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "field", "name": "horizontalAlign", "privacy": "public", "type": { "text": "string" }, "description": "When `positionTarget` is set, this property defines whether to align the overlay's\nleft or right side to the target element by default.\nPossible values are `start` and `end`.\nRTL is taken into account when interpreting the value.\nThe overlay is automatically flipped to the opposite side when it doesn't fit into\nthe default side defined by this property.", "attribute": "horizontal-align", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "kind": "field", "name": "model", "privacy": "public", "type": { "text": "object" }, "description": "Object with properties that is passed to `renderer` function", "attribute": "model", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "field", "name": "modeless", "privacy": "public", "type": { "text": "boolean" }, "description": "When true the overlay won't disable the main content, showing\nit doesn't change the functionality of the user interface.", "attribute": "modeless", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "field", "name": "noHorizontalOverlap", "privacy": "public", "type": { "text": "boolean" }, "description": "When `positionTarget` is set, this property defines whether the overlay should overlap\nthe target element in the x-axis, or be positioned right next to it.", "attribute": "no-horizontal-overlap", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "kind": "field", "name": "noVerticalOverlap", "privacy": "public", "type": { "text": "boolean" }, "description": "When `positionTarget` is set, this property defines whether the overlay should overlap\nthe target element in the y-axis, or be positioned right above/below it.", "attribute": "no-vertical-overlap", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "kind": "field", "name": "opened", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, the overlay is visible and attached to body.", "attribute": "opened", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "field", "name": "owner", "privacy": "public", "type": { "text": "HTMLElement" }, "description": "Owner element passed with renderer function", "attribute": "owner", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "field", "name": "positionTarget", "privacy": "public", "type": { "text": "object" }, "description": "The element next to which this overlay should be aligned.\nThe position of the overlay relative to the positionTarget can be adjusted\nwith properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`\nand `noVerticalOverlap`.", "attribute": "position-target", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "kind": "field", "name": "renderer", "privacy": "public", "type": { "text": "OverlayRenderer | null | undefined" }, "description": "Custom function for rendering the content of the overlay.\nReceives three arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `owner` The host element of the renderer function.\n- `model` The object with the properties related with rendering.", "attribute": "renderer", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "method", "name": "requestContentUpdate", "description": "Requests an update for the content of the overlay.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "field", "name": "requiredVerticalSpace", "privacy": "public", "type": { "text": "number" }, "description": "If the overlay content has no intrinsic height, this property can be used to set\nthe minimum vertical space (in pixels) required by the overlay. Setting a value to\nthe property effectively disables the content measurement in favor of using this\nfixed value for determining the open direction.", "attribute": "required-vertical-space", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "kind": "field", "name": "restoreFocusNode", "privacy": "public", "type": { "text": "HTMLElement" }, "description": "Set to specify the element which should be focused on overlay close,\nif `restoreFocusOnClose` is set to true.", "attribute": "restore-focus-node", "inheritedFrom": { "name": "OverlayFocusMixin", "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js" } }, { "kind": "field", "name": "restoreFocusOnClose", "privacy": "public", "type": { "text": "boolean" }, "description": "Set to true to enable restoring of focus when overlay is closed.", "attribute": "restore-focus-on-close", "inheritedFrom": { "name": "OverlayFocusMixin", "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js" } }, { "kind": "method", "name": "setBounds", "parameters": [ { "name": "bounds", "type": { "text": "!OverlayBoundsParam" } }, { "name": "absolute", "default": "true", "type": { "text": "boolean" } } ], "description": "Updates the coordinates of the overlay.", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "kind": "field", "name": "verticalAlign", "privacy": "public", "type": { "text": "string" }, "description": "When `positionTarget` is set, this property defines whether to align the overlay's\ntop or bottom side to the target element by default.\nPossible values are `top` and `bottom`.\nThe overlay is automatically flipped to the opposite side when it doesn't fit into\nthe default side defined by this property.", "attribute": "vertical-align", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "kind": "field", "name": "withBackdrop", "privacy": "public", "type": { "text": "boolean" }, "description": "When true the overlay has backdrop on top of content when opened.", "attribute": "with-backdrop", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } } ], "mixins": [ { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" }, { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } ], "parameters": [ { "name": "superClass" } ], "attributes": [ { "name": "autofocus", "type": { "text": "boolean" }, "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.", "fieldName": "autofocus", "inheritedFrom": { "name": "OverlayFocusMixin", "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js" } }, { "name": "focus-trap", "type": { "text": "boolean" }, "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.", "fieldName": "focusTrap", "inheritedFrom": { "name": "OverlayFocusMixin", "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js" } }, { "name": "hidden", "type": { "text": "boolean" }, "description": "When set to true, the overlay is hidden. This also closes the overlay\nimmediately in case there is a closing animation in progress.", "fieldName": "hidden", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "name": "horizontal-align", "type": { "text": "string" }, "description": "When `positionTarget` is set, this property defines whether to align the overlay's\nleft or right side to the target element by default.\nPossible values are `start` and `end`.\nRTL is taken into account when interpreting the value.\nThe overlay is automatically flipped to the opposite side when it doesn't fit into\nthe default side defined by this property.", "fieldName": "horizontalAlign", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "name": "modeless", "type": { "text": "boolean" }, "description": "When true the overlay won't disable the main content, showing\nit doesn't change the functionality of the user interface.", "fieldName": "modeless", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "name": "no-horizontal-overlap", "type": { "text": "boolean" }, "description": "When `positionTarget` is set, this property defines whether the overlay should overlap\nthe target element in the x-axis, or be positioned right next to it.", "fieldName": "noHorizontalOverlap", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "name": "no-vertical-overlap", "type": { "text": "boolean" }, "description": "When `positionTarget` is set, this property defines whether the overlay should overlap\nthe target element in the y-axis, or be positioned right above/below it.", "fieldName": "noVerticalOverlap", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "name": "opened", "type": { "text": "boolean" }, "description": "When true, the overlay is visible and attached to body.", "fieldName": "opened", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "name": "owner", "type": { "text": "HTMLElement" }, "description": "Owner element passed with renderer function", "fieldName": "owner", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "name": "renderer", "type": { "text": "OverlayRenderer | null | undefined" }, "description": "Custom function for rendering the content of the overlay.\nReceives three arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `owner` The host element of the renderer function.\n- `model` The object with the properties related with rendering.", "fieldName": "renderer", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "name": "required-vertical-space", "type": { "text": "number" }, "description": "If the overlay content has no intrinsic height, this property can be used to set\nthe minimum vertical space (in pixels) required by the overlay. Setting a value to\nthe property effectively disables the content measurement in favor of using this\nfixed value for determining the open direction.", "fieldName": "requiredVerticalSpace", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "name": "restore-focus-node", "type": { "text": "HTMLElement" }, "description": "Set to specify the element which should be focused on overlay close,\nif `restoreFocusOnClose` is set to true.", "fieldName": "restoreFocusNode", "inheritedFrom": { "name": "OverlayFocusMixin", "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js" } }, { "name": "restore-focus-on-close", "type": { "text": "boolean" }, "description": "Set to true to enable restoring of focus when overlay is closed.", "fieldName": "restoreFocusOnClose", "inheritedFrom": { "name": "OverlayFocusMixin", "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js" } }, { "name": "vertical-align", "type": { "text": "string" }, "description": "When `positionTarget` is set, this property defines whether to align the overlay's\ntop or bottom side to the target element by default.\nPossible values are `top` and `bottom`.\nThe overlay is automatically flipped to the opposite side when it doesn't fit into\nthe default side defined by this property.", "fieldName": "verticalAlign", "inheritedFrom": { "name": "PositionMixin", "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js" } }, { "name": "with-backdrop", "type": { "text": "boolean" }, "description": "When true the overlay has backdrop on top of content when opened.", "fieldName": "withBackdrop", "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } } ], "events": [ { "name": "vaadin-overlay-closed", "type": { "text": "CustomEvent" }, "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } }, { "name": "vaadin-overlay-closing", "type": { "text": "CustomEvent" }, "inheritedFrom": { "name": "OverlayMixin", "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js" } } ] } ], "exports": [ { "kind": "js", "name": "DatePickerOverlayMixin", "declaration": { "name": "DatePickerOverlayMixin", "module": "src/vaadin-date-picker-overlay-mixin.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-date-picker.js", "declarations": [ { "kind": "class", "description": "`` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n\n```\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 `` itself, the following internal\ncomponents are themable:\n\n- ``\n- ``\n- ``\n- ``\n- ``\n\nIn order to style the overlay content, use `` 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 `` 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 `` 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 `` 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", "name": "DatePicker", "members": [ { "kind": "field", "name": "accessibleDescriptionRef", "privacy": "public", "type": { "text": "string" }, "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.", "attribute": "accessible-description-ref", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "kind": "field", "name": "accessibleName", "privacy": "public", "type": { "text": "string" }, "description": "String used to label the component for screen reader users.", "attribute": "accessible-name", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "kind": "field", "name": "accessibleNameRef", "privacy": "public", "type": { "text": "string" }, "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.", "attribute": "accessible-name-ref", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "kind": "field", "name": "allowedCharPattern", "privacy": "public", "type": { "text": "string" }, "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`", "attribute": "allowed-char-pattern", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "kind": "field", "name": "autofocus", "privacy": "public", "type": { "text": "boolean" }, "description": "Specify that this control should have input focus when the page loads.", "attribute": "autofocus", "inheritedFrom": { "name": "DelegateFocusMixin", "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js" } }, { "kind": "field", "name": "autoOpenDisabled", "privacy": "public", "type": { "text": "boolean" }, "description": "Set true to prevent the overlay from opening automatically.", "attribute": "auto-open-disabled", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "autoselect", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.", "attribute": "autoselect", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "kind": "method", "name": "checkValidity", "description": "Returns true if the current input value satisfies all constraints (if any)\n\nOverride the `checkValidity` method for custom validations.", "return": { "type": { "text": "boolean" } }, "inheritedFrom": { "name": "InputConstraintsMixin", "package": "@vaadin/field-base/src/input-constraints-mixin.js" } }, { "kind": "method", "name": "clear", "description": "Clear the value of the field.", "inheritedFrom": { "name": "InputMixin", "package": "@vaadin/field-base/src/input-mixin.js" } }, { "kind": "field", "name": "clearButtonVisible", "privacy": "public", "type": { "text": "boolean" }, "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.", "attribute": "clear-button-visible", "inheritedFrom": { "name": "ClearButtonMixin", "package": "@vaadin/field-base/src/clear-button-mixin.js" } }, { "kind": "method", "name": "clearCache", "description": "Clears the `dateMetadataProvider` cache and reloads the date metadata.", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "method", "name": "close", "description": "Closes the dropdown.", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "dateMetadataProvider", "privacy": "public", "type": { "text": "DatePickerDateMetadataProvider | null | undefined" }, "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.", "attribute": "date-metadata-provider", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, the user cannot interact with this element.", "attribute": "disabled", "inheritedFrom": { "name": "TabindexMixin", "package": "@vaadin/a11y-base/src/tabindex-mixin.js" } }, { "kind": "field", "name": "errorMessage", "privacy": "public", "type": { "text": "string" }, "description": "Error to show when the field is invalid.", "attribute": "error-message", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "kind": "field", "name": "helperText", "privacy": "public", "type": { "text": "string" }, "description": "String used for the helper text.", "attribute": "helper-text", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "kind": "field", "name": "i18n", "privacy": "public", "type": { "text": "Object" }, "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```", "attribute": "i18n", "inheritedFrom": { "name": "I18nMixin", "package": "@vaadin/component-base/src/i18n-mixin.js" } }, { "kind": "field", "name": "initialPosition", "privacy": "public", "type": { "text": "string" }, "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.", "attribute": "initial-position", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "invalid", "privacy": "public", "type": { "text": "boolean" }, "description": "Set to true when the field is invalid.", "attribute": "invalid", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "field", "name": "isDateDisabled", "privacy": "public", "type": { "text": "function(DatePickerDate): boolean | undefined" }, "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.", "attribute": "is-date-disabled", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "label", "privacy": "public", "type": { "text": "string" }, "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.", "attribute": "label", "inheritedFrom": { "name": "LabelMixin", "package": "@vaadin/field-base/src/label-mixin.js" } }, { "kind": "field", "name": "manualValidation", "privacy": "public", "type": { "text": "boolean" }, "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.", "attribute": "manual-validation", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "field", "name": "max", "privacy": "public", "type": { "text": "string" }, "description": "The latest date that can be selected. All later 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\"`", "attribute": "max", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "min", "privacy": "public", "type": { "text": "string" }, "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\"`", "attribute": "min", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "name", "privacy": "public", "type": { "text": "string" }, "description": "The name of this field.", "attribute": "name", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "kind": "method", "name": "open", "description": "Opens the dropdown.", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "opened", "privacy": "public", "type": { "text": "boolean" }, "description": "Set true to open the date selector overlay.", "attribute": "opened", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "placeholder", "privacy": "public", "type": { "text": "string" }, "description": "A hint to the user of what can be entered in the field.", "attribute": "placeholder", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "kind": "field", "name": "readonly", "privacy": "public", "type": { "text": "boolean" }, "description": "When present, it specifies that the field is read-only.", "attribute": "readonly", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Specifies that the user must fill in a value.", "attribute": "required", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "field", "name": "showWeekNumbers", "privacy": "public", "type": { "text": "boolean" }, "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).", "attribute": "show-week-numbers", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "kind": "field", "name": "title", "privacy": "public", "type": { "text": "string" }, "description": "The text usually displayed in a tooltip popup when the mouse is over the field.", "attribute": "title", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "kind": "method", "name": "validate", "description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.", "return": { "type": { "text": "boolean" } }, "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "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\"`", "attribute": "value", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" }, "description": "Fired when the user commits a value change.", "inheritedFrom": { "name": "InputConstraintsMixin", "package": "@vaadin/field-base/src/input-constraints-mixin.js" } }, { "type": { "text": "CustomEvent" }, "description": "Fired when the `invalid` property changes.", "name": "invalid-changed" }, { "type": { "text": "CustomEvent" }, "description": "Fired when the `opened` property changes.", "name": "opened-changed" }, { "name": "unparsable-change", "type": { "text": "CustomEvent" }, "description": "Fired when the user commits an unparsable value change and there is no change event.", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "type": { "text": "CustomEvent" }, "description": "Fired whenever the field is validated.", "name": "validated" }, { "type": { "text": "CustomEvent" }, "description": "Fired when the `value` property changes.", "name": "value-changed" } ], "attributes": [ { "name": "accessible-description-ref", "type": { "text": "string" }, "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.", "fieldName": "accessibleDescriptionRef", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "name": "accessible-name", "type": { "text": "string" }, "description": "String used to label the component for screen reader users.", "fieldName": "accessibleName", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "name": "accessible-name-ref", "type": { "text": "string" }, "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.", "fieldName": "accessibleNameRef", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "name": "allowed-char-pattern", "type": { "text": "string" }, "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`", "fieldName": "allowedCharPattern", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "name": "auto-open-disabled", "type": { "text": "boolean" }, "description": "Set true to prevent the overlay from opening automatically.", "fieldName": "autoOpenDisabled", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "name": "autofocus", "type": { "text": "boolean" }, "description": "Specify that this control should have input focus when the page loads.", "fieldName": "autofocus", "inheritedFrom": { "name": "DelegateFocusMixin", "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js" } }, { "name": "autoselect", "type": { "text": "boolean" }, "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.", "fieldName": "autoselect", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "name": "clear-button-visible", "type": { "text": "boolean" }, "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.", "fieldName": "clearButtonVisible", "inheritedFrom": { "name": "ClearButtonMixin", "package": "@vaadin/field-base/src/clear-button-mixin.js" } }, { "name": "date-metadata-provider", "type": { "text": "DatePickerDateMetadataProvider | null | undefined" }, "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.", "fieldName": "dateMetadataProvider", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If true, the user cannot interact with this element.", "fieldName": "disabled", "inheritedFrom": { "name": "TabindexMixin", "package": "@vaadin/a11y-base/src/tabindex-mixin.js" } }, { "name": "error-message", "type": { "text": "string" }, "description": "Error to show when the field is invalid.", "fieldName": "errorMessage", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "name": "helper-text", "type": { "text": "string" }, "description": "String used for the helper text.", "fieldName": "helperText", "inheritedFrom": { "name": "FieldMixin", "package": "@vaadin/field-base/src/field-mixin.js" } }, { "name": "i18n", "type": { "text": "Object" }, "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.", "fieldName": "i18n", "inheritedFrom": { "name": "I18nMixin", "package": "@vaadin/component-base/src/i18n-mixin.js" } }, { "name": "initial-position", "type": { "text": "string" }, "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.", "fieldName": "initialPosition", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "name": "invalid", "type": { "text": "boolean" }, "description": "Set to true when the field is invalid.", "fieldName": "invalid", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "name": "is-date-disabled", "type": { "text": "function(DatePickerDate): boolean | undefined" }, "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.", "fieldName": "isDateDisabled", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "name": "label", "type": { "text": "string" }, "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.", "fieldName": "label", "inheritedFrom": { "name": "LabelMixin", "package": "@vaadin/field-base/src/label-mixin.js" } }, { "name": "manual-validation", "type": { "text": "boolean" }, "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.", "fieldName": "manualValidation", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "name": "max", "type": { "text": "string" }, "description": "The latest date that can be selected. All later 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\"`", "fieldName": "max", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "name": "min", "type": { "text": "string" }, "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\"`", "fieldName": "min", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "name": "name", "type": { "text": "string" }, "description": "The name of this field.", "fieldName": "name", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "name": "opened", "type": { "text": "boolean" }, "description": "Set true to open the date selector overlay.", "fieldName": "opened", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "name": "placeholder", "type": { "text": "string" }, "description": "A hint to the user of what can be entered in the field.", "fieldName": "placeholder", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "name": "readonly", "type": { "text": "boolean" }, "description": "When present, it specifies that the field is read-only.", "fieldName": "readonly", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "name": "required", "type": { "text": "boolean" }, "description": "Specifies that the user must fill in a value.", "fieldName": "required", "inheritedFrom": { "name": "ValidateMixin", "package": "@vaadin/field-base/src/validate-mixin.js" } }, { "name": "show-week-numbers", "type": { "text": "boolean" }, "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).", "fieldName": "showWeekNumbers", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } }, { "type": { "text": "string" }, "description": "The theme variants to apply to the component.", "name": "theme" }, { "name": "title", "type": { "text": "string" }, "description": "The text usually displayed in a tooltip popup when the mouse is over the field.", "fieldName": "title", "inheritedFrom": { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" } }, { "name": "value", "type": { "text": "string" }, "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\"`", "fieldName": "value", "inheritedFrom": { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" } } ], "mixins": [ { "name": "DatePickerMixin", "module": "src/vaadin-date-picker-mixin.js" }, { "name": "InputControlMixin", "package": "@vaadin/field-base/src/input-control-mixin.js" }, { "name": "ThemableMixin", "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js" }, { "name": "ElementMixin", "package": "@vaadin/component-base/src/element-mixin.js" }, { "name": "PolylitMixin", "package": "@vaadin/component-base/src/polylit-mixin.js" }, { "name": "LumoInjectionMixin", "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "vaadin-date-picker", "customElement": true } ], "exports": [ { "kind": "js", "name": "DatePicker", "declaration": { "name": "DatePicker", "module": "src/vaadin-date-picker.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-month-calendar-mixin.js", "declarations": [ { "kind": "mixin", "description": "", "name": "MonthCalendarMixin", "members": [ { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "attribute": "disabled" }, { "kind": "field", "name": "enteredDate", "privacy": "public", "type": { "text": "date" }, "attribute": "entered-date" }, { "kind": "field", "name": "focusableDateElement", "readonly": true }, { "kind": "field", "name": "focusedDate", "privacy": "public", "type": { "text": "object" }, "description": "A `Date` object for the currently focused date.", "attribute": "focused-date" }, { "kind": "field", "name": "i18n", "privacy": "public", "type": { "text": "object" }, "attribute": "i18n" }, { "kind": "field", "name": "ignoreTaps", "privacy": "public", "type": { "text": "boolean" }, "description": "Flag stating whether taps on the component should be ignored.", "attribute": "ignore-taps" }, { "kind": "field", "name": "isDateDisabled", "privacy": "public", "type": { "text": "Function | undefined" }, "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.", "attribute": "is-date-disabled" }, { "kind": "field", "name": "maxDate", "privacy": "public", "type": { "text": "date" }, "description": "The latest date that can be selected. All later dates will be disabled.", "attribute": "max-date" }, { "kind": "field", "name": "minDate", "privacy": "public", "type": { "text": "date" }, "description": "The earliest date that can be selected. All earlier dates will be disabled.", "attribute": "min-date" }, { "kind": "field", "name": "month", "privacy": "public", "type": { "text": "object" }, "description": "A `Date` object defining the month to be displayed. Only year and\nmonth properties are actually used.", "attribute": "month" }, { "kind": "field", "name": "selectedDate", "privacy": "public", "type": { "text": "object" }, "description": "A `Date` object for the currently selected date.", "attribute": "selected-date" }, { "kind": "field", "name": "showWeekNumbers", "privacy": "public", "type": { "text": "boolean" }, "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).", "attribute": "show-week-numbers" } ], "events": [ { "name": "date-tap", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "disabled", "type": { "text": "boolean" }, "fieldName": "disabled" }, { "name": "entered-date", "type": { "text": "date" }, "fieldName": "enteredDate" }, { "name": "ignore-taps", "type": { "text": "boolean" }, "description": "Flag stating whether taps on the component should be ignored.", "fieldName": "ignoreTaps" }, { "name": "is-date-disabled", "type": { "text": "Function | undefined" }, "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.", "fieldName": "isDateDisabled" }, { "name": "max-date", "type": { "text": "date" }, "description": "The latest date that can be selected. All later dates will be disabled.", "fieldName": "maxDate" }, { "name": "min-date", "type": { "text": "date" }, "description": "The earliest date that can be selected. All earlier dates will be disabled.", "fieldName": "minDate" }, { "name": "show-week-numbers", "type": { "text": "boolean" }, "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).", "fieldName": "showWeekNumbers" } ], "mixins": [ { "name": "FocusMixin", "package": "@vaadin/a11y-base/src/focus-mixin.js" } ], "parameters": [ { "name": "superClass" } ] } ], "exports": [ { "kind": "js", "name": "MonthCalendarMixin", "declaration": { "name": "MonthCalendarMixin", "module": "src/vaadin-month-calendar-mixin.js" } } ] } ] }