Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/date-picker

Package Overview
Dependencies
Maintainers
12
Versions
406
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/date-picker - npm Package Compare versions

Comparing version 24.6.0-alpha7 to 24.6.0-alpha8

24

package.json
{
"name": "@vaadin/date-picker",
"version": "24.6.0-alpha7",
"version": "24.6.0-alpha8",
"publishConfig": {

@@ -39,15 +39,15 @@ "access": "public"

"@polymer/polymer": "^3.2.0",
"@vaadin/a11y-base": "24.6.0-alpha7",
"@vaadin/button": "24.6.0-alpha7",
"@vaadin/component-base": "24.6.0-alpha7",
"@vaadin/field-base": "24.6.0-alpha7",
"@vaadin/input-container": "24.6.0-alpha7",
"@vaadin/overlay": "24.6.0-alpha7",
"@vaadin/vaadin-lumo-styles": "24.6.0-alpha7",
"@vaadin/vaadin-material-styles": "24.6.0-alpha7",
"@vaadin/vaadin-themable-mixin": "24.6.0-alpha7",
"@vaadin/a11y-base": "24.6.0-alpha8",
"@vaadin/button": "24.6.0-alpha8",
"@vaadin/component-base": "24.6.0-alpha8",
"@vaadin/field-base": "24.6.0-alpha8",
"@vaadin/input-container": "24.6.0-alpha8",
"@vaadin/overlay": "24.6.0-alpha8",
"@vaadin/vaadin-lumo-styles": "24.6.0-alpha8",
"@vaadin/vaadin-material-styles": "24.6.0-alpha8",
"@vaadin/vaadin-themable-mixin": "24.6.0-alpha8",
"lit": "^3.0.0"
},
"devDependencies": {
"@vaadin/chai-plugins": "24.6.0-alpha7",
"@vaadin/chai-plugins": "24.6.0-alpha8",
"@vaadin/testing-helpers": "^1.0.0",

@@ -60,3 +60,3 @@ "sinon": "^18.0.0"

],
"gitHead": "675d6fe0a08b8cc63ac00140c63f28fc3f52e4ea"
"gitHead": "a11e1510c4caa08775b202714f5fc1198c22132a"
}

133

src/vaadin-date-picker-mixin.js

@@ -26,2 +26,58 @@ /**

export const datePickerI18nDefaults = Object.freeze({
monthNames: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
firstDayOfWeek: 0,
today: 'Today',
cancel: 'Cancel',
referenceDate: '',
formatDate(d) {
const yearStr = String(d.year).replace(/\d+/u, (y) => '0000'.substr(y.length) + y);
return [d.month + 1, d.day, yearStr].join('/');
},
parseDate(text) {
const parts = text.split('/');
const today = new Date();
let date,
month = today.getMonth(),
year = today.getFullYear();
if (parts.length === 3) {
month = parseInt(parts[0]) - 1;
date = parseInt(parts[1]);
year = parseInt(parts[2]);
if (parts[2].length < 3 && year >= 0) {
const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
year = getAdjustedYear(usedReferenceDate, year, month, date);
}
} else if (parts.length === 2) {
month = parseInt(parts[0]) - 1;
date = parseInt(parts[1]);
} else if (parts.length === 1) {
date = parseInt(parts[0]);
}
if (date !== undefined) {
return { day: date, month, year };
}
},
formatTitle: (monthName, fullYear) => {
return `${monthName} ${fullYear}`;
},
});
/**

@@ -221,59 +277,3 @@ * @polymerMixin

sync: true,
value: () => {
return {
monthNames: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
firstDayOfWeek: 0,
today: 'Today',
cancel: 'Cancel',
referenceDate: '',
formatDate(d) {
const yearStr = String(d.year).replace(/\d+/u, (y) => '0000'.substr(y.length) + y);
return [d.month + 1, d.day, yearStr].join('/');
},
parseDate(text) {
const parts = text.split('/');
const today = new Date();
let date,
month = today.getMonth(),
year = today.getFullYear();
if (parts.length === 3) {
month = parseInt(parts[0]) - 1;
date = parseInt(parts[1]);
year = parseInt(parts[2]);
if (parts[2].length < 3 && year >= 0) {
const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
year = getAdjustedYear(usedReferenceDate, year, month, date);
}
} else if (parts.length === 2) {
month = parseInt(parts[0]) - 1;
date = parseInt(parts[1]);
} else if (parts.length === 1) {
date = parseInt(parts[0]);
}
if (date !== undefined) {
return { day: date, month, year };
}
},
formatTitle: (monthName, fullYear) => {
return `${monthName} ${fullYear}`;
},
};
},
value: () => ({ ...datePickerI18nDefaults }),
},

@@ -484,3 +484,3 @@

if (document.hasFocus()) {
this.validate();
this._requestValidation();
}

@@ -630,9 +630,4 @@ }

let inputValidity = true;
if (this.inputElement) {
if (this.inputElement.checkValidity) {
inputValidity = this.inputElement.checkValidity();
} else if (this.inputElement.validate) {
// Iron-form-elements have the validate API
inputValidity = this.inputElement.validate();
}
if (this.inputElement && this.inputElement.checkValidity) {
inputValidity = this.inputElement.checkValidity();
}

@@ -724,6 +719,6 @@

if (this.__committedValue !== this.value) {
this.validate();
this._requestValidation();
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
} else if (this.__committedUnparsableValue !== unparsableValue) {
this.validate();
this._requestValidation();
this.dispatchEvent(new CustomEvent('unparsable-change'));

@@ -857,3 +852,3 @@ }

// Validate only if `value` changes after initialization.
this.validate();
this._requestValidation();
}

@@ -1024,3 +1019,3 @@ }

if (!this.value && !this._keyboardActive) {
this.validate();
this._requestValidation();
}

@@ -1027,0 +1022,0 @@ }

48

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/date-picker",
"version": "24.6.0-alpha7",
"version": "24.6.0-alpha8",
"description-markup": "markdown",

@@ -56,2 +56,13 @@ "contributions": {

{
"name": "manual-validation",
"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.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",

@@ -208,2 +219,13 @@ "description": "Specifies that the user must fill in a value.",

{
"name": "manualValidation",
"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.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",

@@ -349,3 +371,3 @@ "description": "Specifies that the user must fill in a value.",

"name": "vaadin-date-picker",
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha7/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha7/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha7/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha7/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
"attributes": [

@@ -397,2 +419,13 @@ {

{
"name": "manual-validation",
"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.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",

@@ -672,2 +705,13 @@ "description": "Specifies that the user must fill in a value.",

{
"name": "manualValidation",
"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.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",

@@ -674,0 +718,0 @@ "description": "Specifies that the user must fill in a value.",

18

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/date-picker",
"version": "24.6.0-alpha7",
"version": "24.6.0-alpha8",
"description-markup": "markdown",

@@ -44,2 +44,9 @@ "framework": "lit",

{
"name": "?manualValidation",
"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.",
"value": {
"kind": "expression"
}
},
{
"name": "?required",

@@ -167,3 +174,3 @@ "description": "Specifies that the user must fill in a value.",

"name": "vaadin-date-picker",
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha7/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha7/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha7/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha7/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha8/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
"extension": true,

@@ -193,2 +200,9 @@ "attributes": [

{
"name": "?manualValidation",
"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.",
"value": {
"kind": "expression"
}
},
{
"name": "?required",

@@ -195,0 +209,0 @@ "description": "Specifies that the user must fill in a value.",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc