date-time-pickerpackage.src.vaadin-date-time-picker.d.ts Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
/**
* @license
* Copyright (c) 2019 - 2024 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
import type { TimePickerI18n } from '@vaadin/time-picker/src/vaadin-time-picker.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {
/**
* Accessible label to the date picker.
* The property works in conjunction with label and accessibleName defined on the field.
* If both properties are defined, then accessibleName takes precedence.
* Then, the dateLabel value is concatenated with it.
*/
dateLabel: string | null | undefined;
/**
* Accessible label to the time picker.
* The property works in conjunction with label and accessibleName defined on the field.
* If both properties are defined, then accessibleName takes precedence.
* Then, the dateLabel value is concatenated with it.
*/
timeLabel: string | null | undefined;
}
/**
* Fired when the user commits a value change.
*/
export type DateTimePickerChangeEvent = Event & {
target: DateTimePicker;
};
/**
* Fired when the `invalid` property changes.
*/
export type DateTimePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
/**
* Fired when the `value` property changes.
*/
export type DateTimePickerValueChangedEvent = CustomEvent<{ value: string }>;
/**
* Fired whenever the field is validated.
*/
export type DateTimePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
export interface DateTimePickerCustomEventMap {
'invalid-changed': DateTimePickerInvalidChangedEvent;
'value-changed': DateTimePickerValueChangedEvent;
validated: DateTimePickerValidatedEvent;
}
export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HTMLElementEventMap {
change: DateTimePickerChangeEvent;
}
/**
* `` is a Web Component providing a date time selection field.
*
* ```html
* ` and placed in light DOM:
*
* - [``](#/elements/vaadin-date-picker).
* - [``](#/elements/vaadin-time-picker).
*
* Note: the `theme` attribute value set on `` is
* propagated to these components.
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
* @fires {Event} change - Fired when the user commits a value change.
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
* @fires {CustomEvent} validated - Fired whenever the field is validated.
*/
declare class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
/**
* The name of the control, which is submitted with the form data.
*/
name: string | null | undefined;
/**
* The value for this element.
*
* Supported date time format is based on ISO 8601 (without a time zone designator):
* - Minute precision `"YYYY-MM-DDThh:mm"` (default)
* - Second precision `"YYYY-MM-DDThh:mm:ss"`
* - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
*/
value: string;
/**
* The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.
*
* Supported date time format is based on ISO 8601 (without a time zone designator):
* - Minute precision `"YYYY-MM-DDThh:mm"`
* - Second precision `"YYYY-MM-DDThh:mm:ss"`
* - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
*/
min: string | undefined;
/**
* The latest value (date and time) that can be selected. All later values will be disabled.
*
* Supported date time format is based on ISO 8601 (without a time zone designator):
* - Minute precision `"YYYY-MM-DDThh:mm"`
* - Second precision `"YYYY-MM-DDThh:mm:ss"`
* - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
*/
max: string | undefined;
/**
* A placeholder string for the date field.
* @attr {string} date-placeholder
*/
datePlaceholder: string | null | undefined;
/**
* A placeholder string for the time field.
* @attr {string} time-placeholder
*/
timePlaceholder: string | null | undefined;
/**
* Specifies the number of valid intervals in a day used for
* configuring the items displayed in the time selection box.
*
* It also configures the precision of the time part of the value string. By default
* the component formats time values as `hh:mm` but setting a step value
* lower than one minute or one second, format resolution changes to
* `hh:mm:ss` and `hh:mm:ss.fff` respectively.
*
* Unit must be set in seconds, and for correctly configuring intervals
* in the dropdown, it need to evenly divide a day.
*
* Note: it is possible to define step that is dividing an hour in inexact
* fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
* not recommended to use it for better UX.
*/
step: number | null | undefined;
/**
* Date which should be visible in the date picker overlay when there is no value selected.
*
* The same date formats as for the `value` property are supported but without the time part.
* @attr {string} initial-position
*/
initialPosition: string | null | undefined;
/**
* Set true to display ISO-8601 week numbers in the calendar. Notice that
* displaying week numbers is only supported when `i18n.firstDayOfWeek`
* is 1 (Monday).
* @attr {boolean} show-week-numbers
*/
showWeekNumbers: boolean | null | undefined;
/**
* Set to true to prevent the overlays from opening automatically.
* @attr {boolean} auto-open-disabled
*/
autoOpenDisabled: boolean | null | undefined;
/**
* Set to true to make this element read-only.
*/
readonly: boolean;
/**
* Specify that this control should have input focus when the page loads.
*/
autofocus: boolean;
/**
* The object used to localize this component.
* To change the default localization, replace the entire
* `i18n` object or just the properties you want to modify.
*
* The object is a combination of the i18n properties supported by
* [``](#/elements/vaadin-date-picker) and
* [``](#/elements/vaadin-time-picker).
*/
i18n: DateTimePickerI18n;
/**
* A space-delimited list of CSS class names to set on the overlay elements
* of the internal components controlled by the ``:
*
* - [``](#/elements/vaadin-date-picker#property-overlayClass)
* - [``](#/elements/vaadin-time-picker#property-overlayClass)
*
* @attr {string} overlay-class
*/
overlayClass: string;
addEventListener(
type: K,
listener: (this: DateTimePicker, ev: DateTimePickerEventMap[K]) => void,
options?: AddEventListenerOptions | boolean,
): void;
removeEventListener(
type: K,
listener: (this: DateTimePicker, ev: DateTimePickerEventMap[K]) => void,
options?: EventListenerOptions | boolean,
): void;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-date-time-picker': DateTimePicker;
}
}
export { DateTimePicker };