/** * DevExtreme (ui/date_box.d.ts) * Version: 25.1.7 * Build date: Mon Nov 10 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ /* eslint-disable max-classes-per-file */ import { DateLike, } from '../common'; import { EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, } from '../events'; import { ComponentDisabledDate, dxCalendarOptions, } from './calendar'; import dxDropDownEditor, { dxDropDownEditorOptions, DropDownButtonTemplateDataModel, } from './drop_down_editor/ui.drop_down_editor'; import { ValueChangedInfo, EditorOptionsWithValue, } from './editor/editor'; import { Format, } from '../localization'; import { Properties as PopupProperties, } from './popup'; export { DateLike, }; export type DateType = 'date' | 'datetime' | 'time'; export type DatePickerType = 'calendar' | 'list' | 'native' | 'rollers'; /** * The type of the change event handler's argument. */ export type ChangeEvent = NativeEventInfo; /** * The type of the closed event handler's argument. */ export type ClosedEvent = EventInfo; /** * The type of the contentReady event handler's argument. */ export type ContentReadyEvent = EventInfo; /** * The type of the copy event handler's argument. */ export type CopyEvent = NativeEventInfo; /** * The type of the cut event handler's argument. */ export type CutEvent = NativeEventInfo; /** * The type of the disposing event handler's argument. */ export type DisposingEvent = EventInfo; /** * The type of the enterKey event handler's argument. */ export type EnterKeyEvent = NativeEventInfo; /** * The type of the focusIn event handler's argument. */ export type FocusInEvent = NativeEventInfo; /** * The type of the focusOut event handler's argument. */ export type FocusOutEvent = NativeEventInfo; /** * The type of the initialized event handler's argument. */ export type InitializedEvent = InitializedEventInfo; /** * The type of the input event handler's argument. */ export type InputEvent = NativeEventInfo; /** * The type of the keyDown event handler's argument. */ export type KeyDownEvent = NativeEventInfo; export type KeyPressEvent = NativeEventInfo; /** * The type of the keyUp event handler's argument. */ export type KeyUpEvent = NativeEventInfo; /** * The type of the opened event handler's argument. */ export type OpenedEvent = EventInfo; /** * The type of the optionChanged event handler's argument. */ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** * The type of the paste event handler's argument. */ export type PasteEvent = NativeEventInfo; /** * The type of the valueChanged event handler's argument. */ export type ValueChangedEvent = NativeEventInfo & ValueChangedInfo; export type DisabledDate = ComponentDisabledDate; export type DropDownButtonTemplateData = DropDownButtonTemplateDataModel; /** * * @deprecated * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxDateBoxOptions extends DateBoxBaseOptions { /** * Specifies whether or not adaptive UI component rendering is enabled on a small screen. */ adaptivityEnabled?: boolean; /** * Specifies the message displayed if the specified date is later than the max value or earlier than the min value. */ dateOutOfRangeMessage?: string; /** * Specifies dates that users cannot select. Applies only if pickerType is 'calendar'. */ disabledDates?: Array | ((data: DisabledDate) => boolean); /** * Specifies the attributes to be passed on to the underlying HTML element. */ inputAttr?: any; /** * Specifies the interval between neighboring values in the popup list in minutes. */ interval?: number; /** * Specifies the message displayed if the typed value is not a valid date or time. */ invalidDateMessage?: string; /** * Specifies a text string used to annotate the editor's value. */ label?: string; /** * Specifies the maximum number of characters you can enter into the textbox. */ maxLength?: string | number; /** * The value to be assigned to the `name` attribute of the underlying HTML element. */ name?: string; /** * Specifies the type of the date/time picker. */ pickerType?: DatePickerType; /** * Specifies a placeholder for the input field. */ placeholder?: string; /** * Specifies whether to show the analog clock in the value picker. Applies only if type is 'datetime' and pickerType is 'calendar'. */ showAnalogClock?: boolean; /** * The read-only property that stores the text displayed by the UI component input element. */ text?: string; /** * A format used to display date/time information. */ type?: DateType; /** * Specifies the currently selected date and time. */ value?: DateLike; } /** * * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface DateBoxBaseOptions extends dxDropDownEditorOptions { /** * Specifies the Apply button's text. */ applyButtonText?: string; /** * Configures the calendar's value picker. */ calendarOptions?: dxCalendarOptions; /** * Specifies the Cancel button's text. */ cancelButtonText?: string; /** * Specifies the date value serialization format. */ dateSerializationFormat?: string | undefined; /** * Specifies the date's display format. */ displayFormat?: Format; /** * The latest date that can be selected in the UI component. */ max?: DateLike | undefined; /** * The earliest date that can be selected in the UI component. */ min?: DateLike | undefined; /** * Specified the Today button's text. */ todayButtonText?: string; /** * Specifies whether to use an input mask based on the displayFormat property. */ useMaskBehavior?: boolean; /** * Configures the drop-down that holds the content. */ dropDownOptions?: PopupProperties; } /** * A drop-down editor UI component. * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export class DateBoxBase< TProperties extends EditorOptionsWithValue = Properties, > extends dxDropDownEditor { /** * Closes the drop-down editor. */ close(): void; /** * Opens the drop-down editor. */ open(): void; } /** * The DateBox is a UI component that displays date and time in a specified format, and enables a user to pick or type in the required date/time value. */ export default class dxDateBox extends DateBoxBase { /** * Resets the value property to the value passed as an argument. */ reset(value?: Properties['value']): void; } export type Properties = dxDateBoxOptions; /** * @deprecated use Properties instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export type Options = Properties;