@progress/kendo-react-dateinputs

/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { AdaptiveModeContextType } from '@progress/kendo-react-common'; import { ButtonHandle } from '@progress/kendo-react-buttons'; import { ButtonProps } from '@progress/kendo-react-buttons'; import { DateFieldNameOptions } from '@progress/kendo-intl'; import { DateFormatOptions } from '@progress/kendo-react-intl'; import { DateFormatOptions as DateFormatOptions_2 } from '@progress/kendo-intl'; import { DateFormatPart } from '@progress/kendo-react-intl'; import { DateFormatPart as DateFormatPart_2 } from '@progress/kendo-intl'; import { DateInputsClassStructure } from '@progress/kendo-react-common'; import { default as default_2 } from 'prop-types'; import { FormComponent } from '@progress/kendo-react-common'; import { FormComponentProps } from '@progress/kendo-react-common'; import { FormComponentValidity } from '@progress/kendo-react-common'; import { ForwardRefExoticComponent } from 'react'; import { IntlService } from '@progress/kendo-react-intl'; import { JSX as JSX_2 } from 'react/jsx-runtime'; import { LocalizationService } from '@progress/kendo-react-intl'; import { NumberFormatOptions } from '@progress/kendo-intl'; import { PopupProps } from '@progress/kendo-react-popup'; import * as React_2 from 'react'; import { RefAttributes } from 'react'; /** * @hidden */ export declare enum Action { Left = 0, Right = 1, Up = 2, Down = 3, PrevView = 4, NextView = 5, FirstInView = 6, LastInView = 7, LowerView = 8, UpperView = 9 } /** * The literal type that defines all possible Calendar views. */ export declare type ActiveView = 'month' | 'year' | 'decade' | 'century'; /** * @hidden */ export declare class BusViewService { private onViewChanged; private bottom; private top; constructor(onViewChanged: any); configure(bottom: CalendarViewEnum, top: CalendarViewEnum): void; service(view: CalendarViewEnum, intl: IntlService): ViewService; moveDown(view: CalendarViewEnum, event?: React.SyntheticEvent<any>): void; moveUp(view: CalendarViewEnum, event?: React.SyntheticEvent<any>): void; moveToBottom(activeView: CalendarViewEnum): void; canMoveDown(view: CalendarViewEnum): boolean; canMoveUp(view: CalendarViewEnum): boolean; private clamp; private move; } /** @hidden */ export declare type Calendar = CalendarHandle; /** * Represents the KendoReact Calendar Component. * * Accepts properties of type [CalendarProps]({% slug api_dateinputs_calendarprops %}). * Obtaining the `ref` returns an object of type [CalendarHandle]({% slug api_dateinputs_calendarhandle %}). */ export declare const Calendar: React_2.ForwardRefExoticComponent<CalendarProps<any> & React_2.RefAttributes<any>>; /** * The `CalendarCell` component is internally used for rendering the items in the current view. Also be used as a custom `cell` of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-cell) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-cell). * * * [Customizing the cells inside the Calendar view]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view) * * [Customizing the cells inside the MultiViewCalendar view]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-view) */ export declare class CalendarCell extends React_2.Component<CalendarCellProps> { /** * @hidden */ shouldComponentUpdate(nextProps: CalendarCellProps): boolean; render(): JSX_2.Element; private handleClick; private handleMouseEnter; private handleMouseLeave; } /** * The props which will be received by the custom cell of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-cell) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-cell). */ export declare interface CalendarCellProps extends CellContext { className?: string; style?: React_2.CSSProperties; isDisabled?: boolean; view?: CalendarViewEnum; allowReverse?: boolean; onClick?: (value: Date, event?: React_2.MouseEvent<any>) => void; onMouseEnter?: (value: Date, event?: React_2.MouseEvent<any>) => void; onMouseLeave?: (value: Date, event?: React_2.MouseEvent<any>) => void; [aria: string]: any; /** * @hidden */ unstyled?: DateInputsClassStructure; } /** * The arguments for the `change` event of the Calendar. The generic argument sets the target type of the event. Defaults to `Calendar`. */ export declare interface CalendarChangeEvent<T = Calendar> { /** * A native DOM event. */ nativeEvent?: any; /** * A React Synthetic Event. */ syntheticEvent: React_2.SyntheticEvent<any>; /** * The new value. */ value: Date; /** * The Calendar element. */ target: T; } /** * Represent the `ref` of the Calendar component. */ export declare interface CalendarHandle extends Pick<CalendarWithoutContext, keyof CalendarWithoutContext> { /** * Returns the HTML element of the Calendar component. */ element: HTMLDivElement | null; /** * Returns the `value` of the Calendar component. */ value: Date | null; } /** * The props which will be received by the custom header of the Calendar and the MultiViewCalendar. */ declare interface CalendarHeaderProps { headerTitleProps: CalendarHeaderTitleProps; commands: React.ReactNode; } /** * The `CalendarHeaderTitle` component is internally used for rendering the title of the current calendar view. Also used as a custom `headerTitle` for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-headertitle) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-headertitle) components. * * * [Customizing the title for the current Calendar view]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view) * * [Customizing the title for the current MultiViewCalendar view]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-view) */ export declare const CalendarHeaderTitle: (props: CalendarHeaderTitleProps) => JSX_2.Element; /** * The props which will be received by the custom header title of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-headertitle) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-headertitle). */ export declare interface CalendarHeaderTitleProps { className?: string; children?: React_2.ReactNode; value?: string; id?: string; view?: CalendarViewEnum; style?: React_2.CSSProperties; onClick?: (event?: React_2.SyntheticEvent<any>) => void; disabled?: boolean; } /** * The `CalendarNavigationItem` component is internally used for rendering the items in the side navigation of the Calendar. * Also used as a custom navigation item for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem) * ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)). */ export declare const CalendarNavigationItem: (props: CalendarNavigationItemProps) => JSX_2.Element; /** * The props which will be received by the custom navigation item of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem). */ export declare interface CalendarNavigationItemProps { text?: string; value: Date; id?: string; style?: React_2.CSSProperties; view?: CalendarViewEnum; onClick?: (value: Date, event?: React_2.SyntheticEvent<any>) => void; children?: React_2.ReactNode; className?: string; isRangeStart?: boolean; } /** * Represents the props of the [KendoReact Calendar component]({% slug overview_calendar %}). The generic argument is passed to the `onChange` property and is used as a target in the [`CalendarChangeEvent`]({% slug api_dateinputs_calendarchangeevent %}) interface. */ export declare interface CalendarProps<T = any> extends CalendarSettings { /** @hidden */ _ref?: (instance: { element: HTMLDivElement | null; }) => void; /** * Sets the default value of the Calendar. */ defaultValue?: Date | null; /** * An event that is called after the value of the Calendar has changed. */ onChange?: (event: CalendarChangeEvent<T>) => void; /** * Sets the value of the Calendar. */ value?: Date | null; /** * @hidden */ mobileMode?: boolean; /** * @hidden */ unstyled?: DateInputsClassStructure; } /** * Represents the PropsContext of the `Calendar` component. * Used for global configuration of all `Calendar` instances. * * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article. */ export declare const CalendarPropsContext: React_2.Context<(p: CalendarProps<any>) => CalendarProps<any>>; /** * @hidden */ export declare interface CalendarSettings { /** * Defines the bottommost view to which the user can navigate. */ bottomView?: ActiveView; /** * Sets the `className` of the Calendar. */ className?: string; /** * Sets the default active view of the Calendar. * If not set, the Calendar will display the month view. */ defaultActiveView?: ActiveView; /** * Determines whether the Calendar is disabled. */ disabled?: boolean; /** * Sets the initial focused date of the Calendar. */ focusedDate?: Date; /** * Sets the `id` of the Calendar. */ id?: string; /** * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). * For example these elements could contain error or hint message. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * Sets the maximum allowed date of the Calendar. Defaults to `2099-12-31`. */ max?: Date; /** * Sets the minimum allowed date of the Calendar. Defaults to `1900-1-1`. */ min?: Date; /** * Determines if the navigation sidebar will be displayed. */ navigation?: boolean; /** * **Deprecated** * * Toggles the smooth scroll animation on navigation item click. By default, the animation is enabled in React 17. */ smoothScroll?: boolean; /** * Fires each time the Calendar is blurred. */ onBlur?: (event: React.FocusEvent<any>) => void; /** * Fires each time the Calendar is focused. */ onFocus?: (event: React.FocusEvent<any>) => void; /** * Sets the `tabIndex` property of the Calendar. */ tabIndex?: number; /** * Defines the topmost view to which the user can navigate. */ topView?: ActiveView; /** * Specifies the possible format options for the displayed Calendar week days' names. * * @default short */ weekDaysFormat?: WeekDaysFormat; /** * Determines if the week number column will be displayed. */ weekNumber?: boolean; /** * Displays the days that fall out of the current month. */ showOtherMonthDays?: boolean; /** * Enables the customization or the override of the default Calendar cell * ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)). */ cell?: React.ComponentType<CalendarCellProps>; /** * Enables the customization or the override of the default week-column cell in the Calendar * ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column)). */ weekCell?: React.ComponentType<CalendarWeekCellProps>; /** * Enables the customization or the override of the default header title in the Calendar * ([see example]({% slug custom_rendering_calendar %}#toc-titles-of-current-views)). */ headerTitle?: React.ComponentType<CalendarHeaderTitleProps>; /** * Enables the customization or the override of the default header title in the Calendar * ([see example]({% slug custom_rendering_calendar %}#toc-titles-of-current-views)). */ header?: React.ComponentType<CalendarHeaderProps>; /** * Enables the customization or the override of the default navigation item in the Calendar * ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)). */ navigationItem?: React.ComponentType<CalendarNavigationItemProps>; } /** * @hidden */ declare interface CalendarState { value: Date | null; activeView: CalendarViewEnum; focusedDate: Date; } /** * The Enum which defines all possible Calendar view types. */ export declare enum CalendarViewEnum { month = 0, year = 1, decade = 2, century = 3 } /** * The `CalendarWeekCell` component is internally used for rendering the week cells inside the `month` view of the Calendar. Also used as a [custom week cell for the Calendar]({% slug api_dateinputs_calendarprops %}#toc-weekcell) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-weekcell) components. * * * [Customizing week-column cells in the Calendar]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column) * * [Customizing week-column cells in the MultiViewCalendar]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-week-column) */ export declare const CalendarWeekCell: (props: CalendarWeekCellProps) => JSX_2.Element; /** * The props which will be received by the custom week cell of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-weekcell) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-weekcell). */ export declare interface CalendarWeekCellProps { id?: string; value?: number | null; style?: React_2.CSSProperties; children?: React_2.ReactNode; className?: string; firstDate: Date; weekDays?: Date[]; onClick?: (firstDate: Date, value: Date[], event: React_2.MouseEvent<HTMLTableCellElement>) => void; /** * @hidden */ unstyled?: DateInputsClassStructure; } /** @hidden */ export declare class CalendarWithoutContext extends React_2.Component<CalendarProps, CalendarState> { /** * @hidden */ static displayName: string; /** * @hidden */ static propTypes: { className: default_2.Requireable<string>; defaultActiveView: default_2.Requireable<ActiveView>; defaultValue: default_2.Requireable<Date>; disabled: default_2.Requireable<boolean>; focusedDate: default_2.Requireable<Date>; id: default_2.Requireable<string>; ariaLabelledBy: default_2.Requireable<string>; ariaDescribedBy: default_2.Requireable<string>; weekDaysFormat: default_2.Requireable<string>; max: default_2.Requireable<Date>; min: default_2.Requireable<Date>; navigation: default_2.Requireable<boolean>; smoothScroll: default_2.Requireable<boolean>; onBlur: default_2.Requireable<(...args: any[]) => any>; onChange: default_2.Requireable<(...args: any[]) => any>; onFocus: default_2.Requireable<(...args: any[]) => any>; tabIndex: default_2.Requireable<number>; value: default_2.Requireable<Date>; weekNumber: default_2.Requireable<boolean>; topView: (props: CalendarProps, propName: keyof CalendarProps<any>, componentName: string) => Error | null; bottomView: (props: CalendarProps, propName: keyof CalendarProps<any>, componentName: string) => Error | null; }; /** * @hidden */ static defaultProps: { disabled: boolean; min: Date; max: Date; weekDaysFormat: string; navigation: boolean; defaultActiveView: ActiveView; defaultValue: null; topView: ActiveView; bottomView: ActiveView; showOtherMonthDays: boolean; }; protected dom: DOMService; protected scrollSyncService: ScrollSyncService | null; private valueDuringOnChange?; private focusedDate; private get cellUID(); private get id(); private Navigation; private calendarViewList; private _element; private intl; private bus; private service; private navigation; private isActive; private oldValue; private didNavigationChange; /** * Gets the wrapping element of the Calendar. */ get element(): HTMLDivElement | null; /** * Gets the value of the Calendar. */ get value(): Date | null; protected get min(): Date; protected get max(): Date; protected get bottomView(): CalendarViewEnum; protected get topView(): CalendarViewEnum; constructor(props: CalendarProps); /** * @hidden */ componentDidMount(): void; /** * @hidden */ componentDidUpdate(prevProps: CalendarProps, prevState: CalendarState): void; /** * @hidden */ focus: () => void; /** * @hidden */ render(): JSX_2.Element; private shouldScroll; private handleScroll; private handleNavigationChange; private handleViewChange; private handleDateChange; private handleFocus; private handleBlur; private handleKeyDown; private handleMouseDown; private handleClick; } /** * @hidden */ export declare interface CellContext { formattedValue: string; id: string; isWeekend: boolean; isFocused: boolean; isSelected: boolean; isInRange: boolean; isRangeStart: boolean; isRangeEnd: boolean; isRangeMid: boolean; isRangeSplitEnd?: boolean; isRangeSplitStart?: boolean; isToday: boolean; title?: string; value: Date; isOtherMonth?: boolean; } /** * @hidden */ export declare class CenturyViewService implements ViewService { addToDate(min: Date, skip: number): Date; datesList(start: Date, count: number): Date[]; data(options: any): CellContext[][]; isSelectedFromArray(candidate: Date, dates: Date[], min: Date, max: Date): boolean; isEqual(candidate: Date | null, expected: Date | null): boolean; isInArray(date: Date, dates: Date[]): boolean; isInRange(candidate: Date, min: Date, max: Date): boolean; isInSameView(candidate: Date, value: Date): boolean; isRangeStart(value: Date): boolean; move(value: Date, action: Action): Date; cellTitle(value: Date): string; navigationTitle(value?: Date): string; title(value?: Date): string; rowLength(_?: boolean): number; skip(value: Date, min: Date): number; total(min: Date, max: Date): number; value(current: Date): string; viewDate(date: Date, max: Date, border?: number): Date; private normalize; } /** * Represents the KendoReact DateInput Component. * * Accepts properties of type [DateInputProps]({% slug api_dateinputs_dateinputprops %}). * Obtaining the `ref` returns an object of type [DateInputHandle]({% slug api_dateinputs_dateinputhandle %}). */ export declare const DateInput: React_2.ForwardRefExoticComponent<DateInputProps<any> & React_2.RefAttributes<DateInputHandle>>; export declare type DateInput = DateInputHandle; /** * The arguments for the `change` event of the DateInput. The generic argument sets the target type of the event. Defaults to `DateInput`. */ export declare interface DateInputChangeEvent<T = DateInputHandle> { nativeEvent?: any; syntheticEvent: React_2.SyntheticEvent<any>; value: Date | null; target: T; } /** @hidden */ declare interface DateInputCommonPackageProps { /** * Determines whether to autocorrect invalid segments automatically. * * @default `true` */ autoCorrectParts?: boolean; /** * Determines whether to automatically move to the next segment after the user completes the current one. * * @default `true` */ autoSwitchParts?: boolean; /** * A string array representing custom keys, which will move the focus to the next date format segment. * * @default `[]` */ autoSwitchKeys?: string[]; /** * Determines if the users should see a blinking caret inside the Date Input when possible. * * @default `false` */ allowCaretMode?: boolean; } /** * The interface which defines a custom-format placeholder structure in the DateInput. */ export declare interface DateInputCustomFormatPlaceholder { /** * Defines the description for the `year` format section. */ year?: string; /** * Defines the description for the `month` format section. */ month?: string; /** * Defines the description for the `day` format section. */ day?: string; /** * Defines the description for the `hour` format section. */ hour?: string; /** * Defines the description for the `minute` format section. */ minute?: string; /** * Defines the description for the `second` format section. */ second?: string; } /** * @hidden */ export declare const dateInputDefaultProps: { format: string; size: "small" | "large" | "medium" | null | undefined; rounded: "small" | "large" | "medium" | "full" | null | undefined; fillMode: "flat" | "solid" | "outline" | null | undefined; formatPlaceholder: DateInputFormatPlaceholder; spinners: boolean; disabled: boolean; max: Date; min: Date; minTime: Date; maxTime: Date; validityStyles: boolean; validationMessage: string; placeholder: null; enableMouseWheel: boolean; autoCorrectParts: boolean; autoSwitchParts: boolean; allowCaretMode: boolean; twoDigitYearMax: number; ariaHasPopup: string; autoFocus: boolean; }; /** * The union type which defines all possible format options of the DateInput placeholder. * * The available options are: * * `'wide'`—Displays the full description of the format section. For example, turns `MM` into `month`. Retrieved from [CLDR](https://github.com/telerik/kendo-intl/blob/develop/docs/cldr/index.md). * * `'narrow'`—Displays the narrow description of the format section. For example, turns `MM` into `mo.`. Retrieved from [CLDR](https://github.com/telerik/kendo-intl/blob/develop/docs/cldr/index.md). * * `'short'`—Displays the short description of the format section. For example, turns `MM` into `mo.`. Retrieved from [CLDR](https://github.com/telerik/kendo-intl/blob/develop/docs/cldr/index.md). * * `'formatPattern'`—Directly displays the format section. For example, turns `MM` into `MM`. */ export declare type DateInputFormatPlaceholder = 'wide' | 'narrow' | 'short' | 'formatPattern' | DateInputCustomFormatPlaceholder; /** * Represent the `ref` of the DateInput component. */ export declare interface DateInputHandle { /** * @hidden */ focus: () => void; /** * @hidden */ updateOnPaste: (event: React_2.SyntheticEvent<HTMLInputElement>) => void; /** * Represents the props of the DateInput component. */ props: Readonly<DateInputProps>; /** * Represents the text of the DateInput component. */ text: string; /** * Represents the options of the DateInput component. */ options: DateInputOptions; /** * Returns the HTML element of the DateInput component. */ element: HTMLInputElement | null; /** * Gets the `name` property of the DateInput. */ name: string | undefined; /** * Returns the `value` of the DateInput component. */ value: Date | null; /** * Represents the validity state into which the DateInput is set. */ validity: FormComponentValidity; } /** * The interface which defines all possible incremental steps in the DateInput. */ export declare interface DateInputIncrementalSteps { year?: number; month?: number; day?: number; hour?: number; minute?: number; second?: number; } /** * @hidden */ declare class DateInputIntl { private service; format: (format: string, ...values: any[]) => string; toString: (value: any, format: any, localeId?: string) => string; formatDate: (value: Date, format?: string | DateFormatOptions_2, localeId?: string) => string; parseDate: (value: string, format?: string | DateFormatOptions_2 | string[] | DateFormatOptions_2[], localeId?: string) => Date; parseNumber: (value: string, format?: string | NumberFormatOptions, localeId?: string) => number; formatNumber: (value: number, format: string | NumberFormatOptions, localeId?: string) => string; splitDateFormat: (format: string | DateFormatOptions_2, localeId?: string) => DateFormatPart_2[]; numberSymbols: (localeId?: string) => void; firstDay: (localeId?: string) => number; weekendRange: (localeId?: string) => any; dateFieldName: (options: DateFieldNameOptions, localeId?: string) => string; dateFormatNames: (localeId: any, options: any) => any; cldr: any; locale: string; constructor(service: IntlService); } /** * Represents the options type of the DateInput. */ declare interface DateInputOptions { /** * Specifies the `date` format which is used for formatting the value ([see example]({% slug formats_dateinput %})). If not set, the default format will be used. */ format: string | DateFormatOptions_2; /** * Specifies the incremental steps of the DateInput ([see example]({% slug incrementalsteps_dateinput %})). * * The available options are: * - `year: Number`—Controls the incremental step of the year value. * - `month: Number`—Controls the incremental step of the month value. * - `day: Number`—Controls the incremental step of the day value. * - `hour: Number`—Controls the incremental step of the hour value. * - `minute: Number`—Controls the incremental step of the minute value. * - `second: Number`—Controls the incremental step of the second value. */ steps?: DateInputIncrementalSteps; /** * Specifies the descriptions of the format sections in the input field ([more information and example]({% slug placeholders_dateinput %})). */ formatPlaceholder?: DateInputFormatPlaceholder; /** * Specifies the hint the DateInput displays when its value is `null` or there is no partial selection. * For more information, refer to the article on * [placeholders]({% slug placeholders_dateinput %}). */ placeholder?: string | null; /** * Determines wether should select the previous segment on backspace. * * @default `true` */ selectPreviousSegmentOnBackspace: boolean; /** * Specifies the value of the DateInput. */ value: Date | null; /** * The Intl object that provides internationalization support. */ intlService: DateInputIntl; /** * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus. * * @default `false` */ autoFill: boolean; enableMouseWheel: boolean; /** * Indicates whether the mouse scroll can be used to increase/decrease the date segments values. * * @default `true` */ autoCorrectParts: boolean; /** * Determines whether to automatically move to the next segment after the user completes the current one. * * @default `true` */ autoSwitchParts: boolean; /** * A string array representing custom keys, which will move the focus to the next date format segment. * * @default `[]` */ autoSwitchKeys: string[]; /** * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)). * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx. * * @default `68` */ twoDigitYearMax: number; /** * Determines if the users should see a blinking caret inside the Date Input when possible. * * @default `false` */ allowCaretMode: boolean; } /** * Represents the props of the [KendoReact DateInput component]({% slug overview_dateinput %}). The generic argument is passed to the `onChange` property and is used as a target in the [`DateInputChangeEvent`]({% slug api_dateinputs_dateinputchangeevent %}) interface. */ export declare interface DateInputProps<T extends DateInputHandle = any> extends FormComponentProps, DateInputSettings, DateInputCommonPackageProps { /** @hidden */ _ref?: React_2.MutableRefObject<DateInputHandle | null>; /** * @hidden */ children?: React_2.ReactNode; /** * @hidden */ disableSelection?: boolean; /** * Sets a class of the DateInput DOM element. */ className?: string; /** * Specifies the value of the DateInput. */ value?: Date | null; /** * Specifies the default value of the DateInput. If `value` is not set, this value will correspond to the initial value. */ defaultValue?: Date | null; /** * Indicates the availability of interactive popup element that can be triggered by an element. By default the property is set to `grid`. * * @default `grid` */ ariaHasPopup?: boolean | 'grid' | 'dialog'; /** * Indicates whether the element is currently expanded or collapsed. */ ariaExpanded?: boolean; /** * Specifies the role of the DateInput. */ ariaRole?: string; /** * Identifies the element whose contents or presence are controlled by the current element. */ ariaControls?: string; /** * Determines the event handler that will be fired when the user edits the value ([see example]({% slug dateranges_dateinput %})). */ onChange?: (event: DateInputChangeEvent<T>) => void; /** * Configures the `size` of the DateInput. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DateInput. * * The available options are: * - small * - medium * - large * - full * - null—Does not set a rounded `className`. * * @default `medium` */ rounded?: null | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the DateInput. * * The available options are: * - solid * - outline * - flat * - null—Does not set a fillMode `className`. * * @default `solid` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Determines whether the DateInput is in its read-only state. */ readonly?: boolean; /** * If `clearButton` is set to `true`, the DateInput renders a button next to the date value. Clicking this button resets the value of the date and triggers the `change` event. */ clearButton?: boolean; /** * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateInput. (Defaults to `false`) * * @default `false` */ autoFocus?: boolean; /** * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus. * * @default `false` */ autoFill?: boolean; /** * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)). * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx. * * @default `68` */ twoDigitYearMax?: number; /** * Indicates whether the mouse scroll can be used to increase/decrease the date segments values. * * @default `true` */ enableMouseWheel?: boolean; /** * @hidden */ unstyled?: DateInputsClassStructure; /** * Sets the HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>; } /** * Represents the PropsContext of the `DateInput` component. * Used for global configuration of all `DateInput` instances. * * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article. */ export declare const DateInputPropsContext: React_2.Context<(p: DateInputProps<any>) => DateInputProps<any>>; /** * @hidden */ export declare interface DateInputSettings { /** * Specifies the `date` format which is used for formatting the value ([see example]({% slug formats_dateinput %})). If not set, the default format will be used. */ format?: string | DateFormatOptions; /** * Specifies the descriptions of the format sections in the input field ([more information and example]({% slug placeholders_dateinput %})). */ formatPlaceholder?: DateInputFormatPlaceholder; /** * Specifies the width of the DateInput. */ width?: number | string; /** * Sets the `tabIndex` property of the DateInput. */ tabIndex?: number; /** * Sets the title of the `input` element of the DateInput. */ title?: string; /** * Specifies the incremental steps of the DateInput ([see example]({% slug incrementalsteps_dateinput %})). * * The available options are: * - `year: Number`—Controls the incremental step of the year value. * - `month: Number`—Controls the incremental step of the month value. * - `day: Number`—Controls the incremental step of the day value. * - `hour: Number`—Controls the incremental step of the hour value. * - `minute: Number`—Controls the incremental step of the minute value. * - `second: Number`—Controls the incremental step of the second value. */ steps?: DateInputIncrementalSteps; /** * Specifies the smallest date that is valid ([see example]({% slug dateranges_dateinput %})). */ min?: Date; /** * Specifies the greatest date that is valid ([see example]({% slug dateranges_dateinput %})). */ max?: Date; /** * Specifies the smallest time that is valid ([see example]({% slug dateranges_dateinput %}#toc-limiting-the-time-range)). */ minTime?: Date; /** * Specifies the greatest time that is valid ([see example]({% slug dateranges_dateinput %}#toc-limiting-the-time-range)). */ maxTime?: Date; /** * Determines whether the DateInput is disabled ([see example]({% slug disabled_dateinput %})). */ disabled?: boolean; /** * Specifies whether the **Up** and **Down** spin buttons will be rendered ([see example]({% slug spinbuttons_dateinput %})). */ spinners?: boolean; /** * Specifies the name property of the input DOM element. */ name?: string; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Renders a floating label for the DateInput. */ label?: string; /** * Sets the `id` of the `input` DOM element. */ id?: string; /** * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). * For example these elements could contain error or hint message. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * The accessible label of the component. */ ariaLabel?: string; /** * Specifies the hint the DateInput displays when its value is `null` or there is no partial selection. * For more information, refer to the article on * [placeholders]({% slug placeholders_dateinput %}). */ placeholder?: string | null; } /** * @hidden */ export declare const dateInputsMessages: { "calendar.today": string; "timepicker.now": string; "timepicker.set": string; "timepicker.cancel": string; "datetimepicker.date": string; "datetimepicker.time": string; "datetimepicker.cancel": string; "datetimepicker.set": string; "daterangepicker.cancel": string; "daterangepicker.set": string; "daterangepicker.start": string; "daterangepicker.end": string; "daterangepicker.separator": string; "timepicker.selectNow": string; "timepicker.toggleTimeSelector": string; "timepicker.toggleClock": string; "dateinput.increment": string; "dateinput.decrement": string; "dateinput.clear": string; "datepicker.toggleCalendar": string; "multiviewcalendar.prevView": string; "multiviewcalendar.nextView": string; "daterangepicker.swapStartEnd": string; "datetimepicker.toggleDateTimeSelector": string; }; declare interface DateInputsPopupSettings extends PopupProps { /** * Controls the popup animation. By default, the open and close animations are enabled. */ animate?: boolean; /** * Controls the popup container. By default, the popup is appended to the [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element. */ appendTo?: HTMLElement; /** * Specifies a list of CSS classes that are used for styling the popup. */ popupClass?: string; } /** * Represents the KendoReact DatePicker Component. * * Accepts properties of type [DatePickerProps]({% slug api_dateinputs_datepickerprops %}). * Obtaining the `ref` returns an object of type [DatePickerHandle]({% slug api_dateinputs_datepickerhandle %}). */ export declare const DatePicker: React_2.ForwardRefExoticComponent<DatePickerProps & React_2.RefAttributes<DatePickerHandle>>; export declare type DatePicker = DatePickerHandle; /** * The arguments for the `onChange` event of the DatePicker. */ export declare interface DatePickerChangeEvent { nativeEvent?: any; syntheticEvent: React_2.SyntheticEvent<any>; value: Date | null; show: boolean; target: DatePickerHandle; } /** * The arguments for the `onClose` event of the DatePicker. */ export declare interface DatePickerCloseEvent { target: DatePickerHandle; } /** * @hidden */ export declare const datePickerDefaultProps: { defaultShow: boolean; defaultValue: null; dateInput: React_2.ComponentType<DateInputProps<any>>; calendar: React_2.ComponentType<CalendarProps<any>>; toggleButton: React_2.ComponentType<ToggleButtonProps>; popup: React_2.ComponentType<PopupProps>; pickerWrap: React_2.ComponentType<PickerWrapProps>; disabled: boolean; format: string; max: Date; min: Date; popupSettings: any; tabIndex: number; weekNumber: boolean; validityStyles: boolean; size: "small" | "large" | "medium" | null | undefined; rounded: "small" | "large" | "medium" | "full" | null | undefined; fillMode: "flat" | "solid" | "outline" | null | undefined; autoFocus: boolean; }; /** * Represent the `ref` of the DatePicker component. */ export declare interface DatePickerHandle { /** * @hidden */ focus: () => void; /** * Toggles the popup of the DatePicker. */ togglePopup: () => void; /** * Returns the props of the DatePicker component. */ props: DatePickerProps; /** * Returns a boolean value indicating whether the DatePicker is in mobile mode. */ mobileMode: boolean; /** * Returns the HTML element of the DatePicker component. */ element: HTMLSpanElement | null; /** * Gets the Calendar component inside the DatePicker component. */ calendar: Calendar | null; /** * Gets the DateInput component inside the DatePicker component. */ dateInput: DateInputHandle | null; /** * Gets the `name` property of the DatePicker. */ name: string | undefined; /** * Gets the popup state of the DatePicker. */ show: boolean; /** * Represents the validity state into which the DatePicker is set. */ validity: FormComponentValidity; /** * Gets the value of the DatePicker. */ value: Date | null; } /** * The arguments for the `onOpen` event of the DatePicker. */ export declare interface DatePickerOpenEvent { target: DatePickerHandle; } /** * Represents the props of the [KendoReact DatePicker component]({% slug overview_datepicker %}). */ export declare interface DatePickerProps extends DatePickerSettings, FormComponentProps, DateInputCommonPackageProps, Omit<React_2.HTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus' | 'placeholder'> { /** * Sets the default value of the DatePicker ([see example]({% slug default_value_datepicker %})). */ defaultValue?: Date | null; /** * Fires each time the user selects a new value ([see example]({% slug controlled_datepicker %}#toc-controlling-the-date-value)). */ onChange?: (event: DatePickerChangeEvent) => void; /** * Fires each time the popup is opened. */ onOpen?: (event: DatePickerOpenEvent) => void; /** * Fires each time the popup is closed. */ onClose?: (event: DatePickerCloseEvent) => void; /** * Specifies the value of the DatePicker ([see example]({% slug controlled_datepicker %}#toc-controlling-the-date-value)). * * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance. */ value?: Date | null; /** * Configures the `size` of the DatePicker. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DatePicker. * * The available options are: * - small * - medium * - large * - full * - null—Does not set a rounded `className`. * * @default `medium` */ rounded?: null | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the DatePicker. * * The available options are: * - solid * - outline * - flat * - null—Does not set a fillMode `className`. * * @default `solid` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Providing different rendering of the popup element based on the screen dimensions. */ adaptive?: boolean; /** * Specifies the text that is rendered as title in the adaptive popup. */ adaptiveTitle?: string; /** * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DatePicker. (Defaults to `false`) */ autoFocus?: boolean; /** * @hidden */ visited?: boolean; /** * @hidden */ touched?: boolean; /** * @hidden */ modified?: boolean; /** * When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus. * * @default `false` */ autoFill?: boolean; /** * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)). * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx. * * @default `68` */ twoDigitYearMax?: number; /** * Indicates whether the mouse scroll can be used to increase/decrease the date segments values. * * @default `true` */ enableMouseWheel?: boolean; /** * Sets the HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>; /** * @hidden * This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext. */ _adaptiveMode?: AdaptiveModeContextType; } /** * Represents the PropsContext of the `DatePicker` component. * Used for global configuration of all `DatePicker` instances. * * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article. */ export declare const DatePickerPropsContext: React_2.Context<(p: DatePickerProps) => DatePickerProps>; /** * @hidden */ export declare interface DatePickerSettings { /** * @deprecated The `DatePicker` no longer renders a `wrapper` around the DatePicker. */ pickerWrap?: React.ComponentType<PickerWrapProps>; /** * Enables the customization or the override of the default Toggle button which is rendered by the DatePicker * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-toggle-button)). */ toggleButton?: React.ComponentType<ToggleButtonProps>; /** * Enables the customization or the override of the default Calendar which is rendered by the DatePicker * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-calendar)). */ calendar?: React.ComponentType<CalendarProps<any>> | React.ComponentType<MultiViewCalendarProps<any>>; /** * Enables the customization or the override of the default Popup which is rendered by the DatePicker * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-popup)). */ popup?: React.ComponentType<PopupProps>; /** * Enables the customization or the override of the default DateInput which is rendered by the DatePicker * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-dateinput)). */ dateInput?: React.ComponentType<DateInputProps<any>>; /** * Sets the `className` of the DatePicker. */ className?: string; /** * Sets the default state of the DatePicker upon render ([see example]({% slug default_value_datepicker %})). */ defaultShow?: boolean; /** * Determines whether the DatePicker is disabled ([see example]({% slug disabled_datepicker %})). */ disabled?: boolean; /** * Specifies the focused date of the DatePicker ([see example]({% slug dates_datepicker %})). */ focusedDate?: Date; /** * Specifies the date format that is used to display the input value ([see example]({% slug formats_datepicker %})). */ format?: string | DateFormatOptions; /** * Defines the descriptions of the format sections in the input field ([more information and examples]({% slug placeholders_datepicker %})). */ formatPlaceholder?: DateInputFormatPlaceholder; /** * Specifies the `id` of the DatePicker. */ id?: string; /** * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). * For example these elements could contain error or hint message. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * The ac