Socket
Socket
Sign inDemoInstall

@vaadin/date-picker

Package Overview
Dependencies
21
Maintainers
12
Versions
329
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 24.4.0-alpha2 to 24.4.0-alpha20

theme/lumo/vaadin-date-picker-light.d.ts
theme/lumo/vaadin-date-picker-overlay-content-styles.d.ts
theme/lumo/vaadin-date-picker-overlay-styles.d.ts
theme/lumo/vaadin-date-picker-styles.d.ts
theme/lumo/vaadin-date-picker-year-styles.d.ts
theme/lumo/vaadin-date-picker.d.ts
theme/lumo/vaadin-lit-date-picker.d.ts
theme/lumo/vaadin-month-calendar-styles.d.ts
theme/material/vaadin-date-picker-light.d.ts
theme/material/vaadin-date-picker-overlay-content-styles.d.ts
theme/material/vaadin-date-picker-overlay-styles.d.ts
theme/material/vaadin-date-picker-styles.d.ts
theme/material/vaadin-date-picker-year-styles.d.ts
theme/material/vaadin-date-picker.d.ts
theme/material/vaadin-lit-date-picker.d.ts
theme/material/vaadin-month-calendar-styles.d.ts

22

package.json
{
"name": "@vaadin/date-picker",
"version": "24.4.0-alpha2",
"version": "24.4.0-alpha20",
"publishConfig": {

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

"@polymer/polymer": "^3.2.0",
"@vaadin/a11y-base": "24.4.0-alpha2",
"@vaadin/button": "24.4.0-alpha2",
"@vaadin/component-base": "24.4.0-alpha2",
"@vaadin/field-base": "24.4.0-alpha2",
"@vaadin/input-container": "24.4.0-alpha2",
"@vaadin/overlay": "24.4.0-alpha2",
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha2",
"@vaadin/vaadin-material-styles": "24.4.0-alpha2",
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha2",
"@vaadin/a11y-base": "24.4.0-alpha20",
"@vaadin/button": "24.4.0-alpha20",
"@vaadin/component-base": "24.4.0-alpha20",
"@vaadin/field-base": "24.4.0-alpha20",
"@vaadin/input-container": "24.4.0-alpha20",
"@vaadin/overlay": "24.4.0-alpha20",
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha20",
"@vaadin/vaadin-material-styles": "24.4.0-alpha20",
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha20",
"lit": "^3.0.0"

@@ -60,3 +60,3 @@ },

],
"gitHead": "f303ead58d27e15d81a55db0559611fb77c0e421"
"gitHead": "9d2eacc494eb27658ba9298be6656815912637be"
}

1

README.md

@@ -8,3 +8,2 @@ # @vaadin/date-picker

[![npm version](https://badgen.net/npm/v/@vaadin/date-picker)](https://www.npmjs.com/package/@vaadin/date-picker)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

@@ -11,0 +10,0 @@ ```html

7

src/vaadin-date-picker-helper.d.ts

@@ -20,3 +20,8 @@ /**

*/
declare function dateAllowed(date: Date, min: Date | null, max: Date | null): boolean;
declare function dateAllowed(
date: Date,
min: Date | null,
max: Date | null,
isDateDisabled: (DatePickerDate) => boolean | null,
): boolean;

@@ -23,0 +28,0 @@ /**

39

src/vaadin-date-picker-helper.js

@@ -57,2 +57,16 @@ /**

/**
* Extracts the basic component parts of a date (day, month and year)
* to the expected format.
* @param {!Date} date
* @return {{day: number, month: number, year: number}}
*/
export function extractDateParts(date) {
return {
day: date.getDate(),
month: date.getMonth(),
year: date.getFullYear(),
};
}
/**
* Check if the given date is in the range of allowed dates.

@@ -63,6 +77,13 @@ *

* @param {Date} max Range end
* @param {function(!DatePickerDate): boolean} isDateDisabled Callback to check if the date is disabled
* @return {boolean} True if the date is in the range
*/
export function dateAllowed(date, min, max) {
return (!min || date >= min) && (!max || date <= max);
export function dateAllowed(date, min, max, isDateDisabled) {
let dateIsDisabled = false;
if (typeof isDateDisabled === 'function' && !!date) {
const dateToCheck = extractDateParts(date);
dateIsDisabled = isDateDisabled(dateToCheck);
}
return (!min || date >= min) && (!max || date <= max) && !dateIsDisabled;
}

@@ -96,16 +117,2 @@

/**
* Extracts the basic component parts of a date (day, month and year)
* to the expected format.
* @param {!Date} date
* @return {{day: number, month: number, year: number}}
*/
export function extractDateParts(date) {
return {
day: date.getDate(),
month: date.getMonth(),
year: date.getFullYear(),
};
}
/**
* Get difference in months between today and given months value.

@@ -112,0 +119,0 @@ *

7

src/vaadin-date-picker-mixin.d.ts

@@ -241,2 +241,9 @@ /**

/**
* A function to be used to determine whether the user can select a given date.
* Receives a `DatePickerDate` object of the date to be selected and should return a
* boolean.
*/
isDateDisabled: (date: DatePickerDate) => boolean;
/**
* Opens the dropdown.

@@ -243,0 +250,0 @@ */

42

src/vaadin-date-picker-mixin.js

@@ -306,2 +306,13 @@ /**

/**
* A function to be used to determine whether the user can select a given date.
* Receives a `DatePickerDate` object of the date to be selected and should return a
* boolean.
*
* @type {function(DatePickerDate): boolean | undefined}
*/
isDateDisabled: {
type: Function,
},
/**
* The earliest date that can be selected. All earlier dates will be disabled.

@@ -369,3 +380,3 @@ * @type {Date | undefined}

'_focusedDateChanged(_focusedDate, i18n)',
'__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers)',
'__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled)',
'__updateOverlayContentTheme(_overlayContent, _theme)',

@@ -606,3 +617,4 @@ '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',

const inputValid = !inputValue || (!!this._selectedDate && inputValue === this.__formatDate(this._selectedDate));
const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
const isDateValid =
!this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate, this.isDateDisabled);

@@ -619,3 +631,3 @@ let inputValidity = true;

return inputValid && minMaxValid && inputValidity;
return inputValid && isDateValid && inputValidity;
}

@@ -859,3 +871,13 @@

// eslint-disable-next-line max-params
__updateOverlayContent(overlayContent, i18n, label, minDate, maxDate, focusedDate, selectedDate, showWeekNumbers) {
__updateOverlayContent(
overlayContent,
i18n,
label,
minDate,
maxDate,
focusedDate,
selectedDate,
showWeekNumbers,
isDateDisabled,
) {
if (overlayContent) {

@@ -869,2 +891,3 @@ overlayContent.i18n = i18n;

overlayContent.showWeekNumbers = showWeekNumbers;
overlayContent.isDateDisabled = isDateDisabled;
}

@@ -894,3 +917,5 @@ }

this._focusedDate = this._selectedDate;
this._closedByEscape = true;
this._close();
this._closedByEscape = false;
}

@@ -942,5 +967,7 @@

return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate)
return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate, this.isDateDisabled)
? initialPosition
: getClosestDate(initialPosition, [this._minDate, this._maxDate]);
: this._minDate || this._maxDate
? getClosestDate(initialPosition, [this._minDate, this._maxDate])
: new Date();
}

@@ -985,2 +1012,5 @@

if (this._closedByEscape) {
this._applyInputValue(this._selectedDate);
}
this.__commitParsedOrFocusedDate();

@@ -987,0 +1017,0 @@

51

src/vaadin-date-picker-overlay-content-mixin.js

@@ -13,3 +13,9 @@ /**

import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
import { dateAfterXMonths, dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
import {
dateAfterXMonths,
dateAllowed,
dateEquals,
extractDateParts,
getClosestDate,
} from './vaadin-date-picker-helper.js';

@@ -112,2 +118,13 @@ /**

/**
* A function to be used to determine whether the user can select a given date.
* Receives a `DatePickerDate` object of the date to be selected and should return a
* boolean.
*
* @type {function(DatePickerDate): boolean | undefined}
*/
isDateDisabled: {
type: Function,
},
/**
* Input label

@@ -139,5 +156,5 @@ */

return [
'__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme)',
'__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled)',
'__updateCancelButton(_cancelButton, i18n)',
'__updateTodayButton(_todayButton, i18n, minDate, maxDate)',
'__updateTodayButton(_todayButton, i18n, minDate, maxDate, isDateDisabled)',
'__updateYears(years, selectedDate, _theme)',

@@ -309,6 +326,6 @@ ];

/** @private */
__updateTodayButton(todayButton, i18n, minDate, maxDate) {
__updateTodayButton(todayButton, i18n, minDate, maxDate, isDateDisabled) {
if (todayButton) {
todayButton.textContent = i18n && i18n.today;
todayButton.disabled = !this._isTodayAllowed(minDate, maxDate);
todayButton.disabled = !this._isTodayAllowed(minDate, maxDate, isDateDisabled);
}

@@ -328,2 +345,3 @@ }

theme,
isDateDisabled,
) {

@@ -335,2 +353,3 @@ if (calendars && calendars.length) {

calendar.maxDate = maxDate;
calendar.isDateDisabled = isDateDisabled;
calendar.focusedDate = focusedDate;

@@ -370,2 +389,5 @@ calendar.selectedDate = selectedDate;

_selectDate(dateToSelect) {
if (!this._dateAllowed(dateToSelect)) {
return false;
}
this.selectedDate = dateToSelect;

@@ -375,2 +397,3 @@ this.dispatchEvent(

);
return true;
}

@@ -786,5 +809,6 @@

case 'Enter':
this._selectDate(this.focusedDate);
this._close();
handled = true;
if (this._selectDate(this.focusedDate)) {
this._close();
handled = true;
}
break;

@@ -943,3 +967,4 @@ case ' ':

_focusAllowedDate(dateToFocus, diff, keepMonth) {
if (this._dateAllowed(dateToFocus)) {
// For this check we do consider the isDateDisabled function because disabled dates are allowed to be focused, just not outside min/max
if (this._dateAllowed(dateToFocus, undefined, undefined, () => false)) {
this.focusDate(dateToFocus, keepMonth);

@@ -1022,8 +1047,8 @@ } else if (this._dateAllowed(this.focusedDate)) {

/** @private */
_dateAllowed(date, min = this.minDate, max = this.maxDate) {
return (!min || date >= min) && (!max || date <= max);
_dateAllowed(date, min = this.minDate, max = this.maxDate, isDateDisabled = this.isDateDisabled) {
return dateAllowed(date, min, max, isDateDisabled);
}
/** @private */
_isTodayAllowed(min, max) {
_isTodayAllowed(min, max, isDateDisabled) {
const today = new Date();

@@ -1034,3 +1059,3 @@ const todayMidnight = new Date(0, 0);

todayMidnight.setDate(today.getDate());
return this._dateAllowed(todayMidnight, min, max);
return this._dateAllowed(todayMidnight, min, max, isDateDisabled);
}

@@ -1037,0 +1062,0 @@

2

src/vaadin-lit-date-picker.js

@@ -28,3 +28,3 @@ /**

*
* This component is an experiment not intended for publishing to npm.
* This component is an experiment and not yet a part of Vaadin platform.
* There is no ETA regarding specific Vaadin version where it'll land.

@@ -31,0 +31,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

2

src/vaadin-lit-month-calendar.js

@@ -64,3 +64,3 @@ /**

const isSelected = dateEquals(date, this.selectedDate);
const isDisabled = !dateAllowed(date, this.minDate, this.maxDate);
const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled);

@@ -67,0 +67,0 @@ const parts = [

11

src/vaadin-month-calendar-mixin.js

@@ -83,2 +83,13 @@ /**

/**
* A function to be used to determine whether the user can select a given date.
* Receives a `DatePickerDate` object of the date to be selected and should return a
* boolean.
* @type {Function | undefined}
*/
isDateDisabled: {
type: Function,
value: () => false,
},
disabled: {

@@ -85,0 +96,0 @@ type: Boolean,

22

src/vaadin-month-calendar.js

@@ -53,8 +53,8 @@ /**

role="gridcell"
part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate)]]"
part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled)]]"
date="[[item]]"
tabindex$="[[__getDayTabindex(item, focusedDate)]]"
disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]"
aria-label$="[[__getDayAriaLabel(item)]]"

@@ -80,3 +80,3 @@ >[[_getDate(item)]]</td

type: Array,
computed: '_getDays(month, i18n, minDate, maxDate)',
computed: '_getDays(month, i18n, minDate, maxDate, isDateDisabled)',
},

@@ -112,6 +112,6 @@

/** @private */
__getDatePart(date, focusedDate, selectedDate, minDate, maxDate) {
__getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
const result = ['date'];
if (this.__isDayDisabled(date, minDate, maxDate)) {
if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
result.push('disabled');

@@ -153,13 +153,13 @@ }

/** @private */
__isDayDisabled(date, minDate, maxDate) {
return !dateAllowed(date, minDate, maxDate);
__isDayDisabled(date, minDate, maxDate, isDateDisabled) {
return !dateAllowed(date, minDate, maxDate, isDateDisabled);
}
/** @private */
__getDayAriaDisabled(date, min, max) {
if (date === undefined || min === undefined || max === undefined) {
__getDayAriaDisabled(date, min, max, isDateDisabled) {
if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) {
return;
}
if (this.__isDayDisabled(date, min, max)) {
if (this.__isDayDisabled(date, min, max, isDateDisabled)) {
return 'true';

@@ -166,0 +166,0 @@ }

24

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

@@ -302,2 +302,12 @@ "contributions": {

{
"name": "isDateDisabled",
"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.",
"value": {
"type": [
"function DatePickerDate: boolean",
"undefined"
]
}
},
{
"name": "attrForValue",

@@ -338,3 +348,3 @@ "description": "Name of the two-way data-bindable property representing the\nvalue of the custom input field.",

"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.4.0-alpha2/#/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.4.0-alpha2/#/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.4.0-alpha2/#/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.4.0-alpha2/#/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\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.4.0-alpha20/#/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.4.0-alpha20/#/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.4.0-alpha20/#/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.4.0-alpha20/#/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\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": [

@@ -883,2 +893,12 @@ {

}
},
{
"name": "isDateDisabled",
"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.",
"value": {
"type": [
"function DatePickerDate: boolean",
"undefined"
]
}
}

@@ -885,0 +905,0 @@ ],

18

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

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

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

@@ -160,3 +167,3 @@ "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\"`",

"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.4.0-alpha2/#/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.4.0-alpha2/#/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.4.0-alpha2/#/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.4.0-alpha2/#/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\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.4.0-alpha20/#/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.4.0-alpha20/#/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.4.0-alpha20/#/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.4.0-alpha20/#/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\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,

@@ -235,2 +242,9 @@ "attributes": [

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

@@ -237,0 +251,0 @@ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc