/** * @license * Copyright (c) 2016 - 2025 Vaadin Ltd. * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; import { DatePickerMixin } from './vaadin-date-picker-mixin.js'; export { DatePickerDate, DatePickerI18n } from './vaadin-date-picker-mixin.js'; /** * Fired when the user commits a value change. */ export type DatePickerChangeEvent = Event & { target: DatePicker; }; /** * Fired when the user commits an unparsable value change and there is no change event. */ export type DatePickerUnparsableChangeEvent = CustomEvent; /** * Fired when the `opened` property changes. */ export type DatePickerOpenedChangedEvent = CustomEvent<{ value: boolean }>; /** * Fired when the `invalid` property changes. */ export type DatePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>; /** * Fired when the `value` property changes. */ export type DatePickerValueChangedEvent = CustomEvent<{ value: string }>; /** * Fired whenever the field is validated. */ export type DatePickerValidatedEvent = CustomEvent<{ valid: boolean }>; export interface DatePickerCustomEventMap { 'opened-changed': DatePickerOpenedChangedEvent; 'invalid-changed': DatePickerInvalidChangedEvent; 'value-changed': DatePickerValueChangedEvent; 'unparsable-change': DatePickerUnparsableChangeEvent; validated: DatePickerValidatedEvent; } export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCustomEventMap { change: DatePickerChangeEvent; } /** * `` is an input field that allows to enter a date by typing or by selecting from a calendar overlay. * * ```html * * ``` * * ```js * datePicker.value = '2016-03-02'; * ``` * * When the selected `value` is changed, a `value-changed` event is triggered. * * ### Styling * * The following custom properties are available for styling: * * Custom property | Description | Default * -------------------------------|----------------------------|--------- * `--vaadin-field-default-width` | Default width of the field | `12em` * * The following shadow DOM parts are available for styling: * * Part name | Description * ---------------------|---------------- * `label` | The label element * `input-field` | The element that wraps prefix, value and buttons * `clear-button` | The clear button * `error-message` | The error message element * `helper-text` | The helper text element wrapper * `required-indicator` | The `required` state indicator element * `toggle-button` | The toggle button * * The following state attributes are available for styling: * * Attribute | Description * ---------------------|--------------------------------- * `disabled` | Set when the element is disabled * `has-value` | Set when the element has a value * `has-label` | Set when the element has a label * `has-helper` | Set when the element has helper text or slot * `has-error-message` | Set when the element has an error message * `has-tooltip` | Set when the element has a slotted tooltip * `invalid` | Set when the element is invalid * `focused` | Set when the element is focused * `focus-ring` | Set when the element is keyboard focused * `readonly` | Set when the element is readonly * * ### Internal components * * In addition to `` itself, the following internal * components are themable: * * - `` - has the same API as [``](#/elements/vaadin-overlay). * - `` * - `` * - `` * - `` * - `` * - [``](#/elements/vaadin-input-container) - an internal element wrapping the input. * * In order to style the overlay content, use `` shadow DOM parts: * * Part name | Description * ----------------------|-------------------- * `overlay-header` | Fullscreen mode header * `label` | Fullscreen mode value/label * `clear-button` | Fullscreen mode clear button * `toggle-button` | Fullscreen mode toggle button * `years-toggle-button` | Fullscreen mode years scroller toggle * `toolbar` | Footer bar with slotted buttons * * The following state attributes are available on the `` element: * * Attribute | Description * ----------------|------------------------------------------------- * `desktop` | Set when the overlay content is in desktop mode * `fullscreen` | Set when the overlay content is in fullscreen mode * `years-visible` | Set when the year scroller is visible in fullscreen mode * * In order to style the month calendar, use `` shadow DOM parts: * * Part name | Description * ----------------------|-------------------- * `month-header` | Month title * `weekdays` | Weekday container * `weekday` | Weekday element * `week-numbers` | Week numbers container * `week-number` | Week number element * `date` | Date element * `disabled` | Disabled date element * `focused` | Focused date element * `selected` | Selected date element * `today` | Date element corresponding to the current day * `past` | Date element corresponding to the date in the past * `future` | Date element corresponding to the date in the future * * In order to style year scroller elements, use `` shadow DOM parts: * * Part name | Description * ----------------------|-------------------- * `year-number` | Year number * `year-separator` | Year separator * * Note: the `theme` attribute value set on `` is * propagated to the internal components listed above. * * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. * * ### Change events * * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter, * the component can fire either a `change` event or an `unparsable-change` event: * * Value change | Event * :------------------------|:------------------ * empty => parsable | change * empty => unparsable | unparsable-change * parsable => empty | change * parsable => parsable | change * parsable => unparsable | change * unparsable => empty | unparsable-change * unparsable => parsable | change * unparsable => unparsable | unparsable-change * * @fires {Event} change - Fired when the user commits a value change. * @fires {Event} unparsable-change Fired when the user commits an unparsable value change and there is no change event. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ declare class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(HTMLElement)))) { addEventListener( type: K, listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void, options?: AddEventListenerOptions | boolean, ): void; removeEventListener( type: K, listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void, options?: EventListenerOptions | boolean, ): void; } declare global { interface HTMLElementTagNameMap { 'vaadin-date-picker': DatePicker; } } export { DatePicker };