@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
4,509 lines • 154 kB
text/typescript
/**
* @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 accessible label of the component.
*/
ariaLabel?: string;
/**
* Specifies the greatest valid date ([see example]({% slug dateranges_datepicker %})).
*/
max?: Date;
/**
* Specifies the smallest valid date ([see example]({% slug dateranges_datepicker %})).
*/
min?: Date;
/**
* Specifies the `name` property of the `input` DOM element.
*/
name?: string;
/**
* Fires each time any of the DatePicker elements gets blurred.
*/
onBlur?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
/**
* Fires each time the user focuses any of the DatePicker elements.
*/
onFocus?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
/**
* Configures the popup options of the DatePicker.
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `appendTo`: — Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
*/
popupSettings?: DateInputsPopupSettings;
/**
* Specifies if the calendar will be displayed ([see example]({% slug controlled_datepicker %}#toc-controlling-the-popup-state)).
*/
show?: boolean;
/**
* Sets the `tabIndex` property of the DatePicker.
*/
tabIndex?: number;
/**
* Sets the title of the `input` element of the DatePicker.
*/
title?: string;
/**
* Determines whether to display a week number column in the `month` view of the Calendar ([see example]({% slug weeknumcolumn_datepicker %})).
*/
weekNumber?: boolean;
/**
* Specifies the width of the DatePicker.
*/
width?: number | string;
/**
* Renders a floating label for the DatePicker.
*/
label?: 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_datepicker %}).
*/
placeholder?: string | null;
}
/** @hidden */
export declare type DateRangePicker = DateRangePickerHandle;
/**
* Represents the KendoReact DateRangePicker Component.
*
* Accepts properties of type [DateRangePickerProps]({% slug api_dateinputs_daterangepickerprops %}).
* Obtaining the `ref` returns an object of type [DateRangePickerHandle]({% slug api_dateinputs_daterangepickerhandle %}).
*/
export declare const DateRangePicker: React_2.ForwardRefExoticComponent<DateRangePickerProps & React_2.RefAttributes<any>>;
/**
* Represents the settings that can be passed to the MultiViewCalendar inside the DateRangePicker.
*/
export declare interface DateRangePickerCalendarSettings extends Omit<MultiViewCalendarSettings, 'showOtherMonthDays'> {
}
/**
* The arguments for the `onChange` event of the DateRangePicker.
*/
export declare interface DateRangePickerChangeEvent {
syntheticEvent: React_2.SyntheticEvent<any>;
nativeEvent?: any;
value: SelectionRange;
show?: boolean;
target: DateRangePicker;
}
/**
* The arguments for the `onClose` event of the DateRangePicker.
*/
export declare interface DateRangePickerCloseEvent {
target: DateRangePicker;
}
/**
* Represents the settings that can be passed to the DateInput inside the DateRangePicker.
*/
export declare interface DateRangePickerDateInputSettings extends DateInputSettings {
}
/**
* Represent the `ref` of the DateRangePicker component.
*/
export declare interface DateRangePickerHandle extends Pick<DateRangePickerWithoutContext, keyof DateRangePickerWithoutContext> {
/**
* Gets the MultiVieCalendar inside the DateRangePicker.
*/
calendar: MultiViewCalendar | null;
/**
* Returns the HTML element of the DateRangePicker component.
*/
element: HTMLSpanElement | null;
/**
* Gets the end DateInput component inside the DateRangePicker component.
*/
endDateInput: DateInputHandle | null;
/**
* Gets the start DateInput component inside the DateRangePicker component.
*/
startDateInput: DateInputHandle | null;
/**
* Gets the value of the DateRangePicker.
*/
value: SelectionRange;
}
/**
* The arguments for the `onOpen` event of the DateRangePicker.
*/
export declare interface DateRangePickerOpenEvent {
target: DateRangePicker;
}
/**
* Represents the settings that can be passed to the Popup inside the DateRangePicker.
*/
export declare interface DateRangePickerPopupSettings extends PopupProps {
}
/**
* Represents the props of the [KendoReact DateRangePicker component]({% slug overview_daterangepicker %}).
*/
export declare interface DateRangePickerProps extends DateRangePickerSettings {
/**
* Overrides the validity state of the component.
* If `valid` is set, the `required` property will be ignored.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*/
valid?: boolean;
/**
* Sets the default value of the DateRangePicker ([see example]({% slug default_value_daterangepicker %})).
*/
defaultValue?: SelectionRange;
/**
* Fires each time the user selects a part of a date range ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
*/
onChange?: (event: DateRangePickerChangeEvent) => void;
/**
* Fires each time the popup is opened.
*/
onOpen?: (event: DateRangePickerOpenEvent) => void;
/**
* Fires each time the popup is closed.
*/
onClose?: (event: DateRangePickerCloseEvent) => void;
/**
* Fires each time the popup of the DateRangePicker is about to cancel in ([adaptive mode]({% slug adaptive_rendering_daterangepicker %})).
*/
onCancel?: (event: React_2.MouseEvent<HTMLButtonElement>) => void;
/**
* Specifies the selected date range of the DateRangePicker ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
*
* > The `value` has to be an object with `start` and `end` valid JavaScript [`Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instances or `null`.
*/
value?: SelectionRange;
/**
* 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;
/**
* If `clearButton` is set to `true`, the DateRangePicker renders a button next to the start and end date values. 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 DateRangePicker. (Defaults to `false`)
*/
autoFocus?: boolean;
/**
* @hidden
*/
dir?: string;
/**
* 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 `DateRangePicker` component.
* Used for global configuration of all `DateRangePicker` instances.
*
* For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
*/
export declare const DateRangePickerPropsContext: React_2.Context<(p: DateRangePickerProps) => DateRangePickerProps>;
/**
* @hidden
*/
export declare interface DateRangePickerSettings {
/**
* Enables the customization or the override of the default start DateInput which is rendered by the DateRangePicker
* ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-dateinputs)).
*/
startDateInput?: React.ComponentType<DateInputProps<any>>;
/**
* Enables the customization or the override of the default end DateInput which is rendered by the DateRangePicker
* ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-calendar)).
*/
endDateInput?: React.ComponentType<DateInputProps<any>>;
/**
* Enables the customization or the override of the default Popup which is rendered by the DateRangePicker
* ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-popup)).
*/
popup?: React.ComponentType<PopupProps>;
/**
* Enables the customization or the override of the default Calendar which is rendered by the DateRangePicker.
*/
calendar?: React.ComponentType<MultiViewCalendarProps<any>>;
/**
* If `allowReverse` is set to `true`, the component skips the validation of whether the `from` value is after the `to` value ([see example]({% slug reverse_daterangepicker %})).
*
* > If the [`calendarSettings`](#toc-calendarsettings) property is set, its `allowReverse` will take precedence.
*/
allowReverse?: boolean;
/**
* Represents the additional props that can be passed to the [MultiViewCalendar]({% slug overview_multiviewcalendar %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-multiviewcalendar)).
*/
calendarSettings?: DateRangePickerCalendarSettings;
/**
* Sets the `className` of the DateRangePicker.
*/
className?: string;
/**
* Sets the default state of the DateRangePicker upon render ([see example]({% slug default_value_daterangepicker %})).
*/
defaultShow?: boolean;
/**
* Determines whether the DateRangePicker is disabled ([see example]({% slug disabled_daterangepicker %})).
*/
disabled?: boolean;
/**
* Represents the additional props that can be passed to the end-date [DateInput]({% slug overview_dateinput %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-dateinputs)).
*/
endDateInputSettings?: DateRangePickerDateInputSettings;
/**
* Specifies the focused date of the DateRangePicker ([see example]({% slug focused_daterangepicker %})).
*/
focusedDate?: Date;
/**
* Specifies the `date` format which is used for formatting the value of the DateInput ([see example]({% slug formats_dateinput %})).
*
* > If [`startDateInputSettings`](#toc-startdateinputsettings) or [`endDateInputSettings`](#toc-enddateinputsettings) are set, their `format` will take precedence.
*/
format?: string | DateFormatOptions;
/**
* Specifies the `id` of the DateRangePicker.
*/
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;
/**
* Specifies the greatest valid date ([see example]({% slug dateranges_daterangepicker %})).
*/
max?: Date;
/**
* Specifies the smallest valid date ([see example]({% slug dateranges_daterangepicker %})).
*/
min?: Date;
/**
* Fires each time any of the DateRangePicker elements gets blurred.
*/
onBlur?: (event: React.FocusEvent<any>) => void;
/**
* Fires each time the user focuses any of the DateRangePicker elements.
*/
onFocus?: (event: React.FocusEvent<any>) => void;
/**
* Represents the additional props that will be passed to the [Popup]({% slug overview_popup %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-popup)).
*/
popupSettings?: DateRangePickerPopupSettings;
/**
* Specifies if the calendar will be displayed ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-popup-state)).
*/
show?: boolean;
/**
* Represents the additional props that will be passed to the start-date [DateInput]({% slug overview_dateinput %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-dateinputs)).
*/
startDateInputSettings?: DateRangePickerDateInputSettings;
/**
* Specifies the additional styles that will be applied to the wrapping DateRangePicker element.
*/
style?: React.CSSProperties;
/**
* Determines whether the DateRangePicker will display a **Swap Value** button ([see example]({% slug reverse_daterangepicker %}#toc-swapping-start-and-end-dates-in-ranges)).
*
* > The DateRangePicker will display the swap button only if the [`allowReverse`](#toc-allowreverse) property is also set to `true`.
*/
swapButton?: boolean;
/**
* Sets the `tabIndex` property of the DatePicker.
*/
tabIndex?: number;
}
/**
* @hidden
*/
declare interface DateRangePickerState {
show: boolean;
value: SelectionRange;
windowWidth?: number;
currentValue: SelectionRange;
}
/** @hidden */
export declare class DateRangePickerWithoutContext extends React_2.Component<DateRangePickerProps, DateRangePickerState> {
/**
* @hidden
*/
static displayName: string;
/**
* @hidden
*/
static propTypes: {
allowReverse: default_2.Requireable<boolean>;
calendarSettings: default_2.Requireable<any>;
className: default_2.Requireable<string>;
defaultShow: default_2.Requireable<boolean>;
defaultValue: default_2.Validator<SelectionRange>;
disabled: default_2.Requireable<boolean>;
endDateInputSettings: default_2.Requireable<default_2.InferProps<default_2.ValidationMap<DateInputProps<any>>>>;
focusedDate: default_2.Requireable<Date>;
format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
skeleton: default_2.Requireable<string>;
pattern: default_2.Requireable<string>;
date: default_2.Requireable<string>;
time: default_2.Requireable<string>;
datetime: default_2.Requireable<string>;
era: default_2.Requireable<string>;
year: default_2.Requireable<string>;
month: default_2.Requireable<string>;
day: default_2.Requireable<string>;
weekday: default_2.Requireable<string>;
hour: default_2.Requireable<string>;
hour12: default_2.Requireable<boolean>;
minute: default_2.Requireable<string>;
second: default_2.Requireable<string>;
timeZoneName: default_2.Requireable<string>;
}> | null | undefined>>;
id: default_2.Requireable<string>;
ariaLabelledBy: default_2.Requireable<string>;
ariaDescribedBy: default_2.Requireable<string>;
max: default_2.Requireable<Date>;
min: default_2.Requireable<Date>;
onBlur: default_2.Requireable<(...args: any[]) => any>;
onChange: default_2.Requireable<(...args: any[]) => any>;
onFocus: default_2.Requireable<(...args: any[]) => any>;
popupSettings: default_2.Requireable<any>;
show: default_2.Requireable<boolean>;
startDateInputSettings: default_2.Requireable<any>;
style: default_2.Requireable<any>;
swapButton: default_2.Requireable<any>;
tabIndex: default_2.Requireable<number>;
dir: default_2.Requireable<string>;
value: default_2.Validator<SelectionRange>;
autoFocus: default_2.Requireable<boolean>;
inputAttributes: default_2.Requireable<object>;
};
/**
* @hidden
*/
static defaultProps: {
allowReverse: boolean;
defaultShow: boolean;
defaultValue: SelectionRange;
disabled: boolean;
format: string;
max: Date;
min: Date;
swapButton: boolean;
autoFocus: boolean;
};
private _element;
private _calendar;
private _startDateInput;
private _endDateInput;
private valueDuringOnChange?;
private showDuringOnChange?;
private nextTickId;
private get _popupId();
private get _startInputId();
private get _endInputId();
private shouldFocusDateInput;
private shouldFocusCalendar;
private observerResize?;
private readonly showLicenseWatermark;
constructor(props: DateRangePickerProps);
/**
* Gets the wrapping element of the DateRangePicker.
*/
get element(): HTMLSpanElement | null;
/**
* Gets the start DateInput component inside the DatePicker component.
*/
get startDateInput(): DateInputHandle | null;
/**
* Gets the end DateInput component inside the DatePicker component.
*/
get endDateInput(): DateInputHandle | null;
/**
* Gets the MultiVieCalendar inside the DateRangePicker.
*/
get calendar(): MultiViewCalendar | null;
/**
* Gets the value of the DateRangePicker.
*/
get value(): SelectionRange;
/**
* Gets the popup state of the DateRangePicker.
*/
get show(): boolean;
protected get min(): Date;
protected get max(): Date;
private get document();
private get localizationService();
/**
* The mobile mode of the DateRangePicker.
*/
get mobileMode(): boolean;
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentDidUpdate(): void;
/**
* @hidden
*/
componentWillUnmount(): void;
/**
* @hidden
*/
focus: () => void;
/**
* @hidden
*/
render(): JSX_2.Element;
protected setCalendarRef: (calendar: MultiViewCalendarHandle | null) => void;
protected focusCalendarElement: () => void;
protected focusDateInputElement(): void;
protected calculateValue: (props: DateRangePickerProps, state: DateRangePickerState) => SelectionRange;
protected calculateShow: (nextProps: DateRangePickerProps, nextState: DateRangePickerState) => boolean;
protected nextTick(f: () => any): void;
protected setShow(show: boolean): void;
private renderCalendar;
private renderPopup;
private renderAdaptivePopup;
private handleReverseClick;
private handleReverseMouseDown;
private handleFocus;
private handleClick;
private handleBlur;
private handleCancel;
private handleEndChange;
private handleStartChange;
private extractRangeFromValue;
private handleCalendarChange;
private handleKeyDown;
private handleChange;
private calculateMedia;
}
/** @hidden */
export declare type DateTimePicker = DateTimePickerHandle;
/**
* Represents the KendoReact DateTimePicker Component.
*
* Accepts properties of type [DateTimePickerProps]({% slug api_dateinputs_datetimepickerprops %}).
* Obtaining the `ref` returns an object of type [DateTimePickerHandle]({% slug api_dateinputs_datetimepickerhandle %}).
*/
export declare const DateTimePicker: React_2.ForwardRefExoticComponent<DateTimePickerProps & React_2.RefAttributes<any>>;
/**
* The arguments for the `onChange` event of the DateTimePicker.
*/
export declare interface DateTimePickerChangeEvent {
nativeEvent: any;
syntheticEvent: React_2.SyntheticEvent<any>;
value: Date | null;
show: boolean;
target: DateTimePicker;
}
/**
* The arguments for the `onClose` event of the DateTimePicker.
*/
export declare interface DateTimePickerCloseEvent {
target: DateTimePicker;
}
/**
* Represent the `ref` of the DateTimePicker component.
*/
export declare interface DateTimePickerHandle extends Pick<DateTimePickerWithoutContext, keyof DateTimePickerWithoutContext> {
/**
* Gets the DateInput component inside the DateTimePicker component.
*/
dateInput: DateInputHandle | null;
/**
* Returns the HTML element of the DateTimePicker component.
*/
element: HTMLSpanElement | null;
/**
* Gets the `name` property of the DateTimePicker.
*/
name: string | undefined;
/**
* Gets the popup state of the DateTimePicker.
*/
show: boolean;
/**
* Represents the validity state into which the DateTimePicker is set.
*/
validity: FormComponentValidity;
/**
* Gets the value of the DateTimePicker.
*/
value: Date | null;
}
/**
* The arguments for the `onOpen` event of the DateTimePicker.
*/
export declare interface DateTimePickerOpenEvent {
target: DateTimePicker;
}
/**
* Represents the props of the [KendoReact DateTimePicker component]({% slug overview_datetimepicker %}).
*/
export declare interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
/**
* Sets the default value of the DateTimePicker
* ([see example]({% slug default_value_datetimepicker %})).
* For more information, refer to the article on
* [uncontrolled components in React](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
*/
defaultValue?: Date | null;
/**
* Fires each time the user selects a new value
* ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-date-value)).
*/
onChange?: (event: DateTimePickerChangeEvent) => void;
/**
* Fires each time the popup is opened.
*/
onOpen?: (event: DateTimePickerOpenEvent) => void;
/**
* Fires each time the popup is closed.
*/
onClose?: (event: DateTimePickerCloseEvent) => void;
/**
* Specifies the value of the DateTimePicker
* ([see example]({% slug controlled_datetimepicker %}#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 DateTimePicker.
*
* 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 DateTimePicker.
*
* 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 DateTimePicker.
*
* 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 DateTimePicker. (Defaults to `false`)
*/
autoFocus?: boolean;
/**
* @hidden
*/
unstyled?: DateInputsClassStructure;
/**
* When enabled, the DateTimePicker will autofill the rest of the date/time to the current date/time 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 datetime 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 `DateTimePicker` component.
* Used for global configuration of all `DateTimePicker` instances.
*
* For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
*/
export declare const DateTimePickerPropsContext: React_2.Context<(p: DateTimePickerProps) => DateTimePickerProps>;
/**
* @hidden
*/
export declare interface DateTimePickerSettings {
/**
* Enables the customization or the override of the default Calendar which is rendered by the DateTimePicker
* ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-calendar)).
*/
calendar?: React.ComponentType<CalendarProps>;
/**
* Enables the customization or the override of the default Popup which is rendered by the DateTimePicker
* ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-popup)).
*/
popup?: React.ComponentType<PopupProps>;
/**
* Enables the customization or the override of the default DateInput which is rendered by the DateTimePicker
* ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-dateinput)).
*/
dateInput?: React.ComponentType<DateInputProps>;
/**
* Sets the `className` of the DateTimePicker.
*/
className?: string;
/**
* Sets if the calendar popup is opened upon initial render.
* For more information, refer to the article on
* [uncontrolled components in React](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
*/
defaultShow?: boolean;
/**
* Specifies the incremental steps of the `DateInput` and the internal `TimePart` ([see examples]({% slug incrementalsteps_datetimepicker %})).
*
* 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;
/**
* Determines whether the DateTimePicker is disabled
* ([see example]({% slug disabled_datetimepicker %})).
*/
disabled?: boolean;
/**
* Specifies the initial focusedDate of the Calendar inside the DateTimePicker
* ([see example]({% slug dates_datetimepicker %})).
*/
focusedDate?: Date;
/**
* Specifies the date format that is used to display the input value
* ([see example]({% slug formats_datetimepicker %})).
*/
format?: string | DateFormatOptions;
/**
* Defines the descriptions of the format sections in the input field
* ([more information and examples]({% slug placeholders_datetimepicker %})).
*/
formatPlaceholder?: DateInputFormatPlaceholder;
/**
* Specifies the `id` of the DateTimePicker.
*/
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;
/**
* Specifies the greatest valid date
* ([see example]({% slug dateranges_datetimepicker %})).
*/
max?: Date;
/**
* Specifies the smallest valid date
* ([see example]({% slug dateranges_datetimepicker %})).
*/
min?: Date;
minTime?: Date;
maxTime?: Date;
/**
* Specifies the `name` property of the `input` DOM element.
*/
name?: string;
/**
* Fires each time any of the DateTimePicker elements gets blurred.
*/
onBlur?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
/**
* Fires each time the user focuses any of the DateTimePicker elements.
*/
onFocus?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
/**
* Specifies if the popup will be displayed
* ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-popup-state)).
*/
show?: boolean;
/**
* Sets the `tabIndex` property of the DateTimePicker.
*/
tabIndex?: number;
/**
* Sets the title of the `input` element of the DateTimePicker.
*/
title?: string;
/**
* Determines whether to display a week number column of the Calendar inside the DateTimePicker
* ([see example]({% slug weeksnumbers_calendar %})).
*/
weekNumber?: boolean;
/**
* Specifies the width of the DateTimePicker.
*/
width?: number | string;
/**
* Determines whether to display the **Cancel** button in the popup.
*/
cancelButton?: boolean;
/**
* Renders a floating label for the DateTimePicker.
*/
label?: 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_datetimepicker %}).
*/
placeholder?: string | null;
}
/**
* @hidden
*/
declare interface DateTimePickerState {
value: Date | null;
show: boolean;
focused: boolean;
windowWidth?: number;
}
/** @hidden */
export declare class DateTimePickerWithoutContext extends React_2.Component<DateTimePickerProps, DateTimePickerState> implements FormComponent {
/**
* @hidden
*/
static displayName: string;
/**
* @hidden
*/
static propTypes: {
className: default_2.Requireable<string>;
defaultShow: default_2.Requireable<boolean>;
defaultValue: default_2.Requireable<Date>;
disabled: default_2.Requireable<boolean>;
focusedDate: default_2.Requireable<Date>;
format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
skeleton: default_2.Requireable<string>;
pattern: default_2.Requireable<string>;
date: default_2.Requireable<string>;
time: default_2.Requireable<string>;
datetime: default_2.Requireable<string>;
era: default_2.Requireable<string>;
year: default_2.Requireable<string>;
month: default_2.Requireable<string>;
day: default_2.Requireable<string>;
weekday: default_2.Requireable<string>;
hour: default_2.Requireable<string>;
hour12: default_2.Requireable<boolean>;
minute: default_2.Requireable<string>;
second: default_2.Requireable<string>;
timeZoneName: default_2.Requireable<string>;
}> | null | undefined>>;
formatPlaceholder: default_2.Requireable<NonNullable<"short" | "narrow" | "wide" | "formatPattern" | default_2.InferProps<{
year: default_2.Requireable<string>;
month: default_2.Requireable<string>;
day: default_2.Requireable<string>;
hour: default_2.Requireable<string>;
minute: default_2.Requireable<string>;
second: default_2.Requireable<string>;
}> | null | undefined>>;
id: default_2.Requireable<string>;
ariaLabelledBy: default_2.Requireable<string>;
ariaDescribedBy: default_2.Requireable<string>;
min: default_2.Requireable<Date>;
max: default_2.Requireable<Date>;
name: default_2.Requireable<string>;
popupSettings: default_2.Requireable<default_2.InferProps<{
animate: default_2.Requireable<boolean>;
appendTo: default_2.Requireable<any>;
popupClass: default_2.Requireable<string>;
}>>;
show: default_2.Requireable<boolean>;
tabIndex: default_2.Requireable<number>;
title: default_2.Requireable<string>;
value: default_2.Requireable<Date>;
weekNumber: default_2.Requireable<boolean>;
width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
validationMessage: default_2.Requireable<string>;
required: default_2.Requireable<boolean>;
validate: default_2.Requireable<boolean>;
valid: default_2.Requireable<boolean>;
cancelButton: default_2.Requireable<boolean>;
size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
autoFocus: default_2.Requireable<boolean>;
inputAttributes: default_2.Requireable<object>;
};
/**
* @hidden
*/
static defaultProps: {
defaultShow: boolean;
defaultValue: null;
disabled: boolean;
format: string;
max: Date;
min: Date;
popupSettings: {};
tabIndex: number;
weekNumber: boolean;
validityStyles: boolean;
cancelButton: boolean;
dateInput: React_2.ComponentType<DateInputProps<any>>;
size: "small" | "large" | "medium" | null | undefined;
rounded: "small" | "large" | "medium" | "full" | null | undefined;
fillMode: "flat" | "solid" | "outline" | null | undefined;
autoFocus: boolean;
};
/**
* @hidden
*/
readonly state: DateTimePickerState;
private get _popupId();
private _element;
private _dateInput;
private _dateTimeSelector;
private valueDuringOnChange?;
private showDuringOnChange?;
private nextTickId;
private shouldFocusDateInput;
private prevShow;
private observerResize?;
private get document();
constructor(props: DateTimePickerProps);
/**
* Gets the wrapping element of the DateTimePicker.
*/
get element(): HTMLSpanElement | null;
/**
* Gets the DateInput component inside the DateTimePicker component.
*/
get dateInput(): DateInputHandle | null;
/**
* Gets the value of the DateTimePicker.
*/
get value(): Date | null;
/**
* Gets the popup state of the DateTimePicker.
*/
get show(): boolean;
/**
* Gets the `name` property of the DateTimePicker.
*/
get name(): string | undefined;
/**
* The mobile mode of the DateTimePicker.
*/
get mobileMode(): boolean;
protected get min(): Date;
protected get max(): Date;
/**
* Represents the validity state into which the DateTimePicker is set.
*/
get validity(): FormComponentValidity;
/**
* @hidden
*/
protected get validityStyles(): boolean;
/**
* @hidden
*/
protected get required(): boolean;
/**
* @hidden
*/
protected get dateInputComp(): React_2.ComponentType<DateInputProps<any>>;
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentDidUpdate(): void;
/**
* @hidden
*/
componentWillUnmount(): void;
/**
* @hidden
*/
focus: () => void;
/**
* @hidden
*/
render(): JSX_2.Element;
private renderPicker;
private renderAdaptivePopup;
protected setShow(show: boolean): void;
protected nextTick(f: () => any): void;
private handleReject;
private handleValueChange;
private handleFocus;
private handleBlur;
private handleDateIconClick;
private handleIconMouseDown;
private handleKeyDown;
private dateInputElement;
private calculateMedia;
}
/**
* @hidden
*/
export declare class DayPeriodService implements ListService {
private intl;
private min;
private max;
private part;
constructor(intl: IntlService);
/**
* @hidden
*/
apply(value: Date, candidate: Date): Date;
/**
* @hidden
*/
configure(settings: ListServiceSettings): void;
/**
* @hidden
*/
data(_?: Date): ListItem[];
/**
* @hidden
*/
isRangeChanged(_: Date, __: Date): boolean;
/**
* @hidden
*/
limitRange(min: Date, max: Date, _?: Date): Date[];
/**
* @hidden
*/
total(): number;
/**
* @hidden
*/
selectedIndex(value: Date): number;
/**
* @hidden
*/
valueInList(value: Date): boolean;
private normalizedRange;
}
/**
* @hidden
*/
export declare class DecadeViewService 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;
isRangeStart(value: Date): boolean;
isInSameView(candidate: Date, 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;
}
/**
* @hidden
*/
export declare const decreaseValue = "dateinput.decrement";
/**
* @hidden
*/
declare type Direction = 'horizontal' | 'vertical';
/**
* @hidden
*/
declare enum Direction_2 {
Left = 0,
Right = 1
}
/**
* @hidden
*/
export declare class DOMService {
calendarHeight: number;
headerHeight: number;
monthViewHeight: number;
yearViewHeight: number;
decadeViewHeight: number;
centuryViewHeight: number;
navigationItemHeight: number;
scrollableContentHeight: number;
scrollableYearContentHeight: number;
calendarWidth: number;
monthViewWidth: number;
yearViewWidth: number;
decadeViewWidth: number;
centuryViewWidth: number;
scrollableContentWidth: number;
didCalculate: boolean;
private hostContainer;
ensureHeights(): void;
calculateHeights(container?: HTMLElement, unstyled?: any): void;
viewHeight(viewType: CalendarViewEnum): number;
viewWidth(viewType: CalendarViewEnum): number;
private viewDimension;
private batch;
}
/**
* @hidden
*/
declare class DOMService_2 {
itemHeight: number;
timeListHeight: number;
didCalculate: boolean;
ensureHeights(): void;
calculateHeights(container?: HTMLElement, unstyled?: DateInputsClassStructure): void;
}
/**
* @hidden
*/
export declare const EMPTY_SELECTIONRANGE: SelectionRange;
/**
* @hidden
*/
export declare const end = "daterangepicker.end";
export { FormComponentValidity }
/**
* @hidden
*/
export declare const getNow: () => Date;
/**
* @hidden
*/
export declare const getToday: () => Date;
/**
* @hidden
*/
export declare class Header extends React_2.Component<HeaderProps> {
static propTypes: {
activeView: default_2.Validator<number>;
currentDate: default_2.Validator<Date>;
max: default_2.Validator<Date>;
min: default_2.Validator<Date>;
rangeLength: default_2.Requireable<number>;
};
static defaultProps: {
rangeLength: number;
min: Date;
max: Date;
};
protected get min(): Date;
protected get max(): Date;
protected get rangeLength(): number;
protected get canMoveUp(): boolean;
render(): JSX_2.Element;
protected getTitle: () => string;
private handleTitleClick;
}
/**
* @hidden
*/
declare interface HeaderEventArguments {
syntheticEvent: React_2.SyntheticEvent<any>;
nativeEvent?: any;
value: Date;
target: Header;
isTodayClick?: boolean;
}
/**
* @hidden
*/
declare interface HeaderProps {
activeView: CalendarViewEnum;
bus: BusViewService;
currentDate: Date;
max?: Date;
min?: Date;
rangeLength?: number;
service: ViewService;
headerTitle?: React_2.ComponentType<CalendarHeaderTitleProps>;
header?: React_2.ComponentType<CalendarHeaderProps>;
commands?: React_2.ReactNode;
verticalView?: boolean;
unstyled?: DateInputsClassStructure;
}
/**
* @hidden
*/
export declare class HorizontalViewList extends React_2.Component<HorizontalViewListProps, {}> {
static defaultProps: {
showWeekNumbers: boolean;
views: number;
take: number;
allowReverse: boolean;
weekDaysFormat: string;
min: Date;
max: Date;
};
private _element;
private isActive;
get element(): HTMLDivElement | null;
protected get weekNumber(): boolean;
protected get min(): Date;
protected get max(): Date;
constructor(props: HorizontalViewListProps);
focusActiveDate: () => void;
blurActiveDate: () => void;
componentDidUpdate(): void;
render(): JSX_2.Element;
protected rotateSelectionRange: (selectionRange: SelectionRange) => SelectionRange;
private handleWeekCellClick;
private handleDateChange;
}
/**
* @hidden
*/
declare interface HorizontalViewListEventArguments {
syntheticEvent: React_2.SyntheticEvent<any>;
nativeEvent?: any;
value: Date;
target: HorizontalViewList;
isTodayClick: boolean;
}
/**
* @hidden
*/
export declare interface HorizontalViewListProps {
activeView: CalendarViewEnum;
bus: BusViewService;
cellUID: string;
focusedDate: Date;
max?: Date;
min?: Date;
onChange?: (event: HorizontalViewListEventArguments) => void;
onWeekSelect?: (firstDate: Date, daysToEqualize: number, event: React_2.MouseEvent<HTMLTableCellElement>) => void;
selectionRange: SelectionRange;
service: ViewService;
showWeekNumbers?: boolean;
weekDaysFormat?: WeekDaysFormat;
take?: number;
value: Date[] | Date | null;
views?: number;
onCellEnter?: (value: Date) => void;
allowReverse?: boolean;
cell?: React_2.ComponentType<CalendarCellProps>;
weekCell?: React_2.ComponentType<CalendarWeekCellProps>;
showOtherMonthDays?: boolean;
headerTitle?: React_2.ComponentType<CalendarHeaderTitleProps>;
dates: any[];
verticalView?: boolean;
}
/**
* @hidden
*/
export declare class HoursService implements ListService {
private intl;
private boundRange;
private insertUndividedMax;
private min;
private max;
private step;
private toListItem;
constructor(intl: IntlService);
apply(value: Date, candidate: Date): Date;
configure(settings: ListServiceSettings): void;
data(selectedValue?: Date): ListItem[];
isRangeChanged(min: Date, max: Date): boolean;
limitRange(min: Date, max: Date, value?: Date): Date[];
total(value?: Date): number;
selectedIndex(value: Date): number;
valueInList(value?: Date): boolean;
private addLast;
private addMissing;
private countFromMin;
private isMissing;
private isLastMissing;
private divideByStep;
private lastHour;
private range;
}
/**
* @hidden
*/
export declare const increaseValue = "dateinput.increment";
/**
* @hidden
*/
declare interface ListItem {
text: string;
value: Date;
}
/**
* @hidden
*/
declare interface ListService {
apply(value: Date, candidate: Date): Date;
configure(settings: ListServiceSettings): void;
data(value?: Date): ListItem[];
isRangeChanged(min: Date, max: Date): boolean;
limitRange(min: Date, max: Date, value?: Date): Date[];
total(value?: Date): number;
selectedIndex(value: Date): number;
valueInList(value: Date): boolean;
}
/**
* @hidden
*/
declare interface ListServiceSettings {
boundRange: boolean;
insertUndividedMax: boolean;
min: Date;
max: Date;
part: DateFormatPart;
step: number;
}
/**
* @hidden
*/
export declare const MAX_DATE: Date;
/**
* @hidden
*/
export declare const MAX_TIME: Date;
/**
* @hidden
*/
export declare const MIN_DATE: Date;
/**
* @hidden
*/
export declare const MIN_TIME: Date;
/**
* @hidden
*/
export declare class MinutesService implements ListService {
private intl;
private toListItem;
private min;
private max;
private step;
private insertUndividedMax;
constructor(intl: IntlService);
apply(value: Date, candidate: Date): Date;
configure(settings: ListServiceSettings): void;
data(selectedValue?: Date): ListItem[];
isRangeChanged(min: Date, max: Date): boolean;
limitRange(min: Date, max: Date, value?: Date): Date[];
total(value?: Date): number;
selectedIndex(value: Date): number;
valueInList(value: Date): boolean;
private addLast;
private addMissing;
private countFromMin;
private isMissing;
private isLastMissing;
private divideByStep;
private lastMinute;
private range;
}
/**
* @hidden
*/
export declare class MonthViewService implements ViewService {
private intl;
constructor(intl: IntlService);
addToDate(min: Date, skip: number): Date;
datesList(start: Date, count: number): Date[];
data(options: any): CellContext[][];
isEqual(candidate: Date | null, expected: Date | null): boolean;
isSelectedFromArray(candidate: Date, dates: Date[], min: Date, max: Date): 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(current: Date): string;
rowLength(prependCell?: 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;
isWeekend(date: Date): boolean;
private abbrMonthNames;
private normalize;
private wideMonthNames;
}
/** @hidden */
export declare type MultiViewCalendar = MultiViewCalendarHandle;
/**
* Represents the KendoReact MultiViewCalendar Component.
*
* Accepts properties of type [MultiViewCalendarProps]({% slug api_dateinputs_multiviewcalendarprops %}).
* Obtaining the `ref` returns an object of type [MultiViewCalendarHandle]({% slug api_dateinputs_multiviewcalendarhandle %}).
*/
export declare const MultiViewCalendar: React_2.ForwardRefExoticComponent<MultiViewCalendarProps<any> & React_2.RefAttributes<any>>;
/**
* The arguments for the `onChange` event of the MultiViewCalendar. * The generic argument sets the target type of the event. Defaults to `MultiViewCalendar`.
*/
export declare interface MultiViewCalendarChangeEvent<T = MultiViewCalendar> {
syntheticEvent: React_2.SyntheticEvent<any>;
nativeEvent?: any;
value: Date | Date[] | SelectionRange | null;
target: T;
}
/**
* Represent the `ref` of the MultiViewCalendar component.
*/
export declare interface MultiViewCalendarHandle extends Pick<MultiViewCalendarWithoutContext, keyof MultiViewCalendarWithoutContext> {
/**
* Returns the HTML element of the MultiViewCalendar component.
*/
element: HTMLDivElement | null;
/**
* Gets the current focused date of the MultiViewCalendar.
*/
focusedDate: Date;
/**
* Gets the value of the MultiViewCalendar.
*/
value: Date | Date[] | SelectionRange | null;
}
/**
* Represents the selection modes of the MultiViewCalendar.
*
* The supported modes are:
* * (Default) `single`—Renders a single-date selection.
* * `multiple`—Renders a multiple-date selection.
* * `range`—Renders a date-range selection.
*/
export declare type MultiViewCalendarMode = 'single' | 'multiple' | 'range';
/**
* Represents the props of the [KendoReact MultiViewCalendar component]({% slug overview_multiviewcalendar %}). The generic argument is passed to the `onChange` property and is used as a target in the [`MultiViewCalendarChangeEvent`]({% slug api_dateinputs_multiviewcalendarchangeevent %}) interface.
*/
export declare interface MultiViewCalendarProps<T = any> extends MultiViewCalendarSettings {
/** @hidden */
_ref?: (instance: {
element: HTMLDivElement | null;
}) => void;
/**
* Sets the default value of the MultiViewCalendar.
*/
defaultValue?: Date | Date[] | SelectionRange | null;
/**
* An event that is called after the value of the MultiViewCalendar has changed. The new value is generated based on the current `mode` of the MultiViewCalendar.
*/
onChange?: (event: MultiViewCalendarChangeEvent<T>) => void;
/**
* Sets the value of the MultiViewCalendar. Based on the value type, the MultiViewcalendar renders a single, multiple, or range selection.
*/
value?: Date | Date[] | SelectionRange | null;
/** @hidden */
mobileMode?: boolean;
/**
* @hidden
*/
dir?: string;
}
/**
* Represents the PropsContext of the `MultiViewCalendar` component.
* Used for global configuration of all `MultiViewCalendar` instances.
*
* For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
*/
export declare const MultiViewCalendarPropsContext: React_2.Context<(p: MultiViewCalendarProps<any>) => MultiViewCalendarProps<any>>;
/**
* @hidden
*/
export declare interface MultiViewCalendarSettings {
/**
* Specifies which end of the defined selection range will be marked as active.
*
* > If the selection range is undefined, the value is ignored.
*/
activeRangeEnd?: SelectionRangeEnd;
/**
* If set to `true`, the component skips the validation of whether the `from` value is after the `to` value.
*/
allowReverse?: boolean;
/**
* Defines the bottommost view to which the user can navigate.
*/
bottomView?: ActiveView;
/**
* Sets the `className` of the MultiViewCalendar.
*/
className?: string;
/**
* Sets the default active view of the MultiViewCalendar.
* If not set, the MultiViewCalendar displays the month view.
*/
defaultActiveView?: ActiveView;
/**
* Sets the `views` property of the MultiViewCalendar and defines the number of rendered views.
*/
views?: number;
/**
* Determines if the week number column will be displayed.
*/
weekNumber?: boolean;
/**
* Specifies the possible format options for the displayed Calendar week days' names.
*
* @default short
*/
weekDaysFormat?: WeekDaysFormat;
/**
* Fires each time the MultiViewCalendar is focused.
*/
onFocus?: (event: React.FocusEvent<any>) => void;
/**
* Sets the `tabIndex` property of the MultiViewCalendar.
*/
tabIndex?: number;
/**
* Defines the topmost view to which the user can navigate.
*/
topView?: ActiveView;
/**
* Determines whether the MultiViewCalendar is disabled.
*/
disabled?: boolean;
/**
* Sets the initial focused date of the MultiViewCalendar.
*/
focusedDate?: Date;
/**
* Sets the `id` of the MultiViewCalendar.
*/
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 MultiViewCalendar. Defaults to `2099-12-31`.
*/
max?: Date;
/**
* Sets the minimum allowed date of the MultiViewCalendar. Defaults to `1900-1-1`.
*/
min?: Date;
/**
* Sets the selection mode of the MultiViewCalendar.
*
* The available modes are:
* * (Default) `single`—Renders a single-date selection.
* * `multiple`—Renders a multiple-date selection.
* * `range`—Renders a date-range selection.
*/
mode?: MultiViewCalendarMode;
/**
* Displays the days that fall out of the current month.
*/
showOtherMonthDays?: boolean;
/**
* Fires each time the MultiViewCalendar is blurred.
*/
onBlur?: (event: React.FocusEvent<any>) => void;
/**
* Enables the customization or the override of the default MultiViewCalendar cell
* ([see example]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-view)).
*/
cell?: React.ComponentType<CalendarCellProps>;
/**
* Enables the customization or the override of the default week cell in the MultiViewCalendar
* ([see example]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-week-column)).
*/
weekCell?: React.ComponentType<CalendarWeekCellProps>;
/**
* Enables the customization or the override of the default header title in the MultiViewCalendar
* ([see example]({% slug custom_rendering_multiviewcalendar %}#toc-titles-of-current-views)).
*/
headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
}
/**
* @hidden
*/
declare interface MultiViewCalendarState {
value: Date | Date[] | SelectionRange | null;
activeView: CalendarViewEnum;
focusedDate: Date;
navigateDate: Date;
}
/** @hidden */
export declare class MultiViewCalendarWithoutContext extends React_2.Component<MultiViewCalendarProps, MultiViewCalendarState> {
/**
* @hidden
*/
static displayName: string;
/**
* @hidden
*/
static propTypes: {
activeRangeEnd: default_2.Requireable<"end" | "start">;
allowReverse: default_2.Requireable<boolean>;
bottomView: default_2.Requireable<ActiveView>;
className: default_2.Requireable<string>;
defaultActiveView: default_2.Requireable<ActiveView>;
defaultValue: default_2.Requireable<any>;
disabled: default_2.Requireable<boolean>;
focusedDate: default_2.Requireable<Date>;
id: default_2.Requireable<string>;
weekDaysFormat: default_2.Requireable<string>;
ariaLabelledBy: default_2.Requireable<string>;
ariaDescribedBy: default_2.Requireable<string>;
max: default_2.Requireable<Date>;
min: default_2.Requireable<Date>;
mode: default_2.Requireable<"range" | "multiple" | "single">;
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>;
topView: default_2.Requireable<ActiveView>;
value: default_2.Requireable<any>;
views: (props: MultiViewCalendarProps, propName: keyof MultiViewCalendarProps<any>, componentName: string) => Error | null;
weekNumber: default_2.Requireable<boolean>;
showOtherMonthDays: default_2.Requireable<boolean>;
dir: default_2.Requireable<string>;
};
/**
* @hidden
*/
static defaultProps: {
disabled: boolean;
min: Date;
max: Date;
navigation: boolean;
defaultActiveView: ActiveView;
defaultValue: null;
topView: ActiveView;
weekDaysFormat: string;
tabIndex: number;
bottomView: ActiveView;
views: number;
allowReverse: boolean;
showOtherMonthDays: boolean;
};
protected dates: any[];
private lastView;
private lastViewsCount;
protected selectedDate: Date | null;
protected selectedMultiple: Date[] | null;
protected selectedRange: SelectionRange;
protected _focusedDate: Date;
protected cellUID: string | undefined;
private valueDuringOnChange?;
private activeRangeEnd;
private _element;
private bus;
private navigation;
private intl;
private localization;
private service;
private get wrapperID();
private calendarViewList;
private isActive;
private calculateFocusFromValue;
private get isRtl();
/**
* Gets the wrapping element of the MultiViewCalendar component.
*/
get element(): HTMLDivElement | null;
/**
* Gets the value of the MultiViewCalendar.
*/
get value(): Date | Date[] | SelectionRange | null;
/**
* Gets the current focused date of the MultiViewCalendar.
*/
get focusedDate(): Date;
protected get min(): Date;
protected get max(): Date;
protected get bottomView(): CalendarViewEnum;
protected get topView(): CalendarViewEnum;
protected get activeRange(): SelectionRangeEnd;
protected get todayIsInRange(): boolean;
private readonly showLicenseWatermark;
constructor(props: MultiViewCalendarProps);
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentDidUpdate(): void;
/**
* @hidden
*/
focus: () => void;
/**
* @hidden
*/
render(): JSX_2.Element;
protected clampRange: (value: Date) => SelectionRange;
protected rangeWithFocused: (range: SelectionRange, focusedDate: Date) => SelectionRange;
protected generateRange: (candidate: Date, value: SelectionRange) => SelectionRange;
protected canNavigate: (action: Action) => boolean;
protected isInMonth(date: Date, month: Date): boolean;
protected navigate: (action: Action, date: Date) => void;
protected move: (action: Action, date: Date) => Date;
protected clampDate: (value: Date) => Date;
protected shouldAutoCorrect: (candidate: Date, value: SelectionRange) => boolean;
private handleCellEnter;
private handleMouseDown;
private handleClick;
private handleFocus;
private handleBlur;
private handleTodayClick;
private handlePrevButtonClick;
private handleNextButtonClick;
private handleKeyDown;
private handleViewChange;
private handleWeekSelection;
private handleDateChange;
}
/**
* @hidden
*/
export declare class NavigationService {
private bus;
constructor(bus: BusViewService);
action(event: React_2.KeyboardEvent<any>): Action;
move(value: Date, action: Action, activeView: CalendarViewEnum, service: ViewService, event?: React_2.SyntheticEvent<any>): Date;
}
/**
* @hidden
*/
declare class PageAction {
skip: number;
constructor(skip: number);
}
/**
* @hidden
* @deprecated
*/
export declare const PickerWrap: React_2.ForwardRefExoticComponent<PickerWrapProps & React_2.RefAttributes<HTMLSpanElement>>;
/**
* @hidden
* @deprecated
*/
export declare interface PickerWrapProps {
_ref?: React_2.Ref<HTMLSpanElement | null>;
id?: string;
tabIndex?: number;
className?: string;
children?: React_2.ReactNode;
style?: React_2.CSSProperties;
}
/**
* @hidden
*/
declare class ScrollAction {
offset: number;
constructor(offset: number);
}
/**
* @hidden
*/
declare interface ScrollActionArguments {
index: number;
target: HTMLDivElement | null;
scrollAction?: ScrollAction;
pageAction?: PageAction;
animationInProgress: boolean;
}
/**
* @hidden
*/
declare enum ScrollDirection {
Backward = 0,
Forward = 1
}
/**
* @hidden
*/
export declare class ScrollSyncService {
dom: DOMService;
private divideByMagnitude;
private powerByMagnitude;
private navigator;
private view;
private monthScrolled;
private navScrolled;
constructor(dom: DOMService);
configure(activeView: CalendarViewEnum): void;
sync(navigator: Virtualization, view: Virtualization, e: any): void;
scrollSiblingOf(scrolledElement: any): void;
siblingComponent(scrollableElement: HTMLElement): Virtualization;
calculateScroll(component: Virtualization, scrollTop: number): number;
}
/**
* @hidden
*/
export declare class SecondsService implements ListService {
private intl;
private toListItem;
private min;
private max;
private step;
private insertUndividedMax;
constructor(intl: IntlService);
apply(value: Date, candidate: Date): Date;
configure(settings: ListServiceSettings): void;
data(selectedValue?: Date): ListItem[];
isRangeChanged(min: Date, max: Date): boolean;
limitRange(min: Date, max: Date, value?: Date): Date[];
total(value?: Date): number;
selectedIndex(value: Date): number;
valueInList(value: Date): boolean;
private divideByStep;
private addLast;
private addMissing;
private countFromMin;
private isMissing;
private isLastMissing;
private lastSecond;
private range;
}
/**
* The type that defines the selection range of the Calendar.
*/
export declare interface SelectionRange {
/**
* The beginning of the selection range.
*/
start: Date | null;
/**
* The end of the selection range.
*/
end: Date | null;
}
/**
* The literal type that defines which end of the selection range is active.
*/
export declare type SelectionRangeEnd = 'start' | 'end' | null;
/**
* @hidden
*/
export declare const separator = "daterangepicker.separator";
/**
* @hidden
*/
export declare const start = "daterangepicker.start";
/**
* @hidden
*/
export declare const swapStartEnd = "daterangepicker.swapStartEnd";
/**
* @hidden
*/
export declare class TimeList extends React_2.Component<TimeListProps, {}> {
static propTypes: {
id: default_2.Requireable<number>;
max: default_2.Requireable<Date>;
min: default_2.Requireable<Date>;
part: (props: TimeListProps, propName: string, componentName: string) => null;
step: (props: TimeListProps, propName: string, componentName: string) => null;
value: default_2.Requireable<Date>;
smoothScroll: default_2.Requireable<boolean>;
show: default_2.Requireable<boolean>;
};
static defaultProps: {
boundRange: boolean;
max: Date;
min: Date;
step: number;
smoothScroll: boolean;
};
protected dom: DOMService_2;
private intl;
private _element;
private service;
private virtualization;
private topOffset;
private bottomOffset;
private itemHeight;
private listHeight;
private topThreshold;
private bottomThreshold;
private animateToIndex;
constructor(props: TimeListProps);
get element(): HTMLDivElement | null;
protected get animate(): boolean;
private get min();
private get max();
private get step();
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentDidUpdate(): void;
/**
* @hidden
*/
render(): JSX_2.Element | undefined;
focus: (args?: any) => void;
protected itemOffset: (scrollTop: number) => number;
protected calculateHeights: () => void;
protected configureServices: ({ min, max, value }?: TimeListProps) => void;
protected serviceSettings: (settings?: any) => ListServiceSettings;
private handleScrollAction;
private handleFocus;
private handleBlur;
private handleMouseOver;
private handleKeyDown;
private handleChange;
}
/**
* @hidden
*/
declare interface TimeListProps {
id?: number;
max?: Date;
min?: Date;
onBlur?: any;
onChange?: any;
onFocus?: any;
part: DateFormatPart;
step?: number;
value: Date;
smoothScroll?: boolean;
boundRange?: boolean;
disabled?: boolean;
show?: boolean;
mobileMode?: boolean;
unstyled?: DateInputsClassStructure;
}
/**
* @hidden
*/
export declare class TimePart extends React_2.Component<TimePartProps, TimePartState> {
static propTypes: {
cancelButton: default_2.Requireable<boolean>;
disabled: default_2.Requireable<boolean>;
format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
skeleton: default_2.Requireable<string>;
pattern: default_2.Requireable<string>;
date: default_2.Requireable<string>;
time: default_2.Requireable<string>;
datetime: default_2.Requireable<string>;
era: default_2.Requireable<string>;
year: default_2.Requireable<string>;
month: default_2.Requireable<string>;
day: default_2.Requireable<string>;
weekday: default_2.Requireable<string>;
hour: default_2.Requireable<string>;
hour12: default_2.Requireable<boolean>;
minute: default_2.Requireable<string>;
second: default_2.Requireable<string>;
timeZoneName: default_2.Requireable<string>;
}> | null | undefined>>;
max: default_2.Requireable<Date>;
min: default_2.Requireable<Date>;
nowButton: default_2.Requireable<boolean>;
steps: default_2.Requireable<default_2.InferProps<{
hour: default_2.Requireable<number>;
minute: default_2.Requireable<number>;
second: default_2.Requireable<number>;
}>>;
smoothScroll: default_2.Requireable<boolean>;
tabIndex: default_2.Requireable<number>;
value: default_2.Requireable<Date>;
show: default_2.Requireable<boolean>;
};
static defaultProps: {
value: null;
disabled: boolean;
nowButton: boolean;
cancelButton: boolean;
format: string;
min: Date;
max: Date;
steps: {};
boundRange: boolean;
};
readonly state: TimePartState;
private _element;
private _nowButton;
private dateFormatParts;
private timeLists;
private snapTime;
private nextTickId;
constructor(props: TimePartProps);
/**
* @hidden
*/
get element(): HTMLSpanElement | null;
get value(): Date;
protected get intl(): IntlService;
private get min();
private get max();
private get steps();
protected get boundRange(): boolean;
/**
* @hidden
*/
componentWillUnmount(): void;
componentDidMount(): void;
/**
* @hidden
*/
render(): JSX_2.Element;
focus: (args?: FocusOptions, focusNowButton?: boolean) => void;
protected timeFormatReducer: (acc: string, current: DateFormatPart) => string;
protected timeFormatFilter: (part: DateFormatPart, index: number, all: DateFormatPart[]) => boolean;
protected nextTick(f: () => any): void;
protected hasActiveButton(): boolean | null;
protected focusList: (dir: Direction_2) => void;
protected listReducer: (state: any, list: any, idx: number, all: any) => any;
protected showNowButton: () => boolean | undefined;
protected hasSteps(): boolean;
private handleKeyDown;
private handleListBlur;
private handleListFocus;
private handleChange;
}
/**
* @hidden
*/
declare interface TimePartProps {
disabled?: boolean;
format?: string | DateFormatOptions;
max?: Date;
min?: Date;
nowButton?: boolean;
onChange?: any;
steps?: TimePickerIncrementalSteps;
smoothScroll?: boolean;
tabIndex?: number;
value?: Date | null;
boundRange?: boolean;
onNowClick?: any;
className?: string;
onMount?: (value: Date) => void;
onNowKeyDown?: (event: React_2.KeyboardEvent) => void;
show?: boolean;
mobileMode?: boolean;
unstyled?: DateInputsClassStructure;
}
/**
* @hidden
*/
declare interface TimePartState {
activeListIndex: number;
}
/** @hidden */
export declare type TimePicker = TimePickerHandle;
/**
* Represents the KendoReact TimePicker Component.
*
* Accepts properties of type [TimePicker]({% slug api_dateinputs_timepickerprops %}).
* Obtaining the `ref` returns an object of type [TimePickerHandle]({% slug api_dateinputs_timepickerhandle %}).
*/
export declare const TimePicker: React_2.ForwardRefExoticComponent<TimePickerProps & React_2.RefAttributes<any>>;
/**
* The arguments for the `onChange` event of the TimePicker.
*/
export declare interface TimePickerChangeEvent {
nativeEvent?: any;
syntheticEvent: React_2.SyntheticEvent<any>;
value: Date | null;
show: boolean;
target: TimePicker;
}
/**
* The arguments for the `onClose` event of the TimePicker.
*/
export declare interface TimePickerCloseEvent {
target: TimePicker;
}
/**
* Represent the `ref` of the TimePicker component.
*/
export declare interface TimePickerHandle extends Pick<TimePickerWithoutContext, keyof TimePickerWithoutContext> {
/**
* Gets the DateInput component inside the TimePicker component.
*/
dateInput: DateInputHandle | null;
/**
* Returns the HTML element of the TimePicker component.
*/
element: HTMLSpanElement | null;
/**
* Gets the `name` property of the TimePicker.
*/
name: string | undefined;
/**
* Gets the popup state of the TimeSelector.
*/
show: boolean;
/**
* Represents the validity state into which the TimePicker is set.
*/
validity: FormComponentValidity;
/**
* Gets the value of the TimePicker.
*/
value: Date | null;
/**
* Gets the TimeSelector component inside the TimePicker component.
*/
timeSelector: TimeSelector | null;
}
/**
* The interface which defines all possible incremental steps in the TimePicker.
*/
declare interface TimePickerIncrementalSteps {
hour?: number;
minute?: number;
second?: number;
}
/**
* The arguments for the `onOpen` event of the TimePicker.
*/
export declare interface TimePickerOpenEvent {
target: TimePicker;
}
/**
* Represents the props of the [KendoReact TimePicker component]({% slug overview_timepicker %}).
*/
export declare interface TimePickerProps extends TimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
/**
* Sets the default value of the TimePicker ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-value)).
*/
defaultValue?: Date | null;
/**
* Fires each time the user selects a new value ([see example]({% slug controlled_timepicker %}#toc-controlling-the-date-value)).
*/
onChange?: (event: TimePickerChangeEvent) => void;
/**
* Fires each time the popup is opened.
*/
onOpen?: (event: TimePickerOpenEvent) => void;
/**
* Fires each time the popup is closed.
*/
onClose?: (event: TimePickerCloseEvent) => void;
/**
* Specifies the value of the TimePicker ([see example]({% slug controlled_timepicker %}#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 TimePicker.
*
* 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 TimePicker.
*
* 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 TimePicker.
*
* 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;
/**
* @hidden
*/
unstyled?: DateInputsClassStructure;
/**
* Indicates whether the mouse scroll can be used to increase/decrease the time 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 `TimePicker` component.
* Used for global configuration of all `TimePicker` instances.
*
* For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
*/
export declare const TimePickerPropsContext: React_2.Context<(p: TimePickerProps) => TimePickerProps>;
/**
* @hidden
*/
export declare interface TimePickerSettings {
/**
* Sets the `className` of the TimePicker.
*/
className?: string;
/**
* Determines whether to display the **Cancel** button in the popup.
*/
cancelButton?: boolean;
/**
* Determines whether to display the **Now** button in the popup.
*
* > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
*/
nowButton?: boolean;
/**
* Sets the default state of the popup upon render ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-popup-state)).
*/
defaultShow?: boolean;
/**
* Determines whether the TimePicker is disabled ([see example]({% slug disabled_timepicker %})).
*/
disabled?: boolean;
/**
* Specifies the date format that is used to display the input value ([see example]({% slug formats_timepicker %})).
*/
format?: string | DateFormatOptions;
/**
* Defines the descriptions of the format sections in the input field ([see example]({% slug placeholders_timepicker %})).
*/
formatPlaceholder?: DateInputFormatPlaceholder;
/**
* Specifies the `id` of the TimePicker.
*/
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;
/**
* Specifies the greatest valid time ([see example]({% slug timeranges_timepicker %})).
*/
max?: Date;
/**
* Specifies the smallest valid time ([see example]({% slug timeranges_timepicker %})).
*/
min?: Date;
/**
* Specifies the `name` property of the `input` DOM element.
*/
name?: string;
/**
* Fires each time any of the TimePicker elements gets blurred.
*/
onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
/**
* Fires each time the user focuses any of the TimePicker elements.
*/
onFocus?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
/**
* Configures the popup options of the TimePicker.
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `appendTo:`— Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
*/
popupSettings?: DateInputsPopupSettings;
/**
* Specifies if a time selector will be displayed ([see example]({% slug controlled_timepicker %}#toc-controlling-the-popup-state)).
*/
show?: boolean;
/**
* Configures the incremental steps of the TimePicker ([see example]({% slug incrementalsteps_timepicker %})).
*
* > If the incremental step is greater than `1`, the **Now** button will be hidden.
*/
steps?: TimePickerIncrementalSteps;
/**
* Toggles the smooth scroll animation on time click. By default, the animation is enabled.
*/
smoothScroll?: boolean;
/**
* Sets the `tabIndex` property of the TimePicker.
*/
tabIndex?: number;
/**
* Sets the title of the `input` element of the TimePicker.
*/
title?: string;
/**
* Specifies the width of the TimePicker.
*/
width?: number | string;
/**
* Enables the customization or the override of the default Popup which is rendered by the TimePicker
* ([see example]({% slug custom_rendering_timepicker %}#toc-customizing-the-popup)).
*/
popup?: React.ComponentType<PopupProps>;
/**
* Enables the customization or the override of the default DateInput which is rendered by the TimePicker
* ([see example]({% slug custom_rendering_timepicker %}#toc-customizing-the-dateinput)).
*/
dateInput?: React.ComponentType<DateInputProps>;
/**
* Renders a floating label for the TimePicker.
*/
label?: 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_timepicker %}).
*/
placeholder?: string | null;
}
/**
* @hidden
*/
declare interface TimePickerState {
value: Date | null;
show: boolean;
focused: boolean;
windowWidth?: number;
candidate: Date | null;
}
/** @hidden */
export declare class TimePickerWithoutContext extends React_2.Component<TimePickerProps, TimePickerState> implements FormComponent {
/**
* @hidden
*/
static displayName: string;
/**
* @hidden
*/
static propTypes: {
className: default_2.Requireable<string>;
cancelButton: default_2.Requireable<boolean>;
nowButton: default_2.Requireable<boolean>;
defaultShow: default_2.Requireable<boolean>;
defaultValue: default_2.Requireable<Date>;
disabled: default_2.Requireable<boolean>;
format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
skeleton: default_2.Requireable<string>;
pattern: default_2.Requireable<string>;
date: default_2.Requireable<string>;
time: default_2.Requireable<string>;
datetime: default_2.Requireable<string>;
era: default_2.Requireable<string>;
year: default_2.Requireable<string>;
month: default_2.Requireable<string>;
day: default_2.Requireable<string>;
weekday: default_2.Requireable<string>;
hour: default_2.Requireable<string>;
hour12: default_2.Requireable<boolean>;
minute: default_2.Requireable<string>;
second: default_2.Requireable<string>;
timeZoneName: default_2.Requireable<string>;
}> | null | undefined>>;
formatPlaceholder: default_2.Requireable<NonNullable<"short" | "narrow" | "wide" | "formatPattern" | default_2.InferProps<{
year: default_2.Requireable<string>;
month: default_2.Requireable<string>;
day: default_2.Requireable<string>;
hour: default_2.Requireable<string>;
minute: default_2.Requireable<string>;
second: default_2.Requireable<string>;
}> | null | undefined>>;
id: default_2.Requireable<string>;
ariaLabelledBy: default_2.Requireable<string>;
ariaDescribedBy: default_2.Requireable<string>;
min: default_2.Requireable<Date>;
max: default_2.Requireable<Date>;
name: default_2.Requireable<string>;
popupSettings: default_2.Requireable<default_2.InferProps<{
animate: default_2.Requireable<boolean>;
appendTo: default_2.Requireable<any>;
popupClass: default_2.Requireable<string>;
}>>;
show: default_2.Requireable<boolean>;
steps: default_2.Requireable<default_2.InferProps<{
hour: default_2.Requireable<number>;
minute: default_2.Requireable<number>;
second: default_2.Requireable<number>;
}>>;
smoothScroll: default_2.Requireable<boolean>;
tabIndex: default_2.Requireable<number>;
title: default_2.Requireable<string>;
value: default_2.Requireable<Date>;
width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
validationMessage: default_2.Requireable<string>;
required: default_2.Requireable<boolean>;
validate: default_2.Requireable<boolean>;
valid: default_2.Requireable<boolean>;
size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
inputAttributes: default_2.Requireable<object>;
};
/**
* @hidden
*/
static defaultProps: {
defaultShow: boolean;
defaultValue: null;
disabled: boolean;
format: string;
max: Date;
min: Date;
popupSettings: {};
tabIndex: number;
steps: {};
validityStyles: boolean;
dateInput: React_2.ComponentType<DateInputProps<any>>;
size: "small" | "large" | "medium" | null | undefined;
rounded: "small" | "large" | "medium" | "full" | null | undefined;
fillMode: "flat" | "solid" | "outline" | null | undefined;
};
/**
* @hidden
*/
readonly state: TimePickerState;
private get _popupId();
private _element;
private _dateInput;
private _timeSelector;
private valueDuringOnChange?;
private showDuringOnChange?;
private shouldFocusDateInput;
private prevShow;
private observerResize?;
private get document();
private readonly showLicenseWatermark;
constructor(props: TimePickerProps);
/**
* Gets the wrapping element of the TimePicker.
*/
get element(): HTMLSpanElement | null;
/**
* Gets the DateInput component inside the TimePicker component.
*/
get dateInput(): DateInputHandle | null;
/**
* Gets the TimeSelector component inside the TimePicker component.
*/
get timeSelector(): TimeSelector | null;
/**
* Gets the value of the TimePicker.
*/
get value(): Date | null;
/**
* Gets the popup state of the TimeSelector.
*/
get show(): boolean;
/**
* Gets the `name` property of the TimePicker.
*/
get name(): string | undefined;
/**
* Represents the validity state into which the TimePicker is set.
*/
get validity(): FormComponentValidity;
/**
* The mobile mode of the ComboBox.
*/
get mobileMode(): boolean;
/**
* @hidden
*/
protected get validityStyles(): boolean;
/**
* @hidden
*/
protected get required(): boolean;
private get popupSettings();
private get min();
private get max();
protected get dateInputComp(): React_2.ComponentType<DateInputProps<any>>;
protected get localizationService(): LocalizationService;
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentDidUpdate(): void;
/**
* @hidden
*/
componentWillUnmount(): void;
/**
* @hidden
*/
focus: () => void;
/**
* @hidden
*/
render(): JSX_2.Element;
private renderTimeSelector;
private renderPopup;
private renderAdaptivePopup;
protected setTimeSelectorRef: (timeSelector: TimeSelector | null) => void;
protected nextValue: (nextProps: TimePickerProps, nextState: TimePickerState) => Date | null;
protected nextShow: (nextProps: TimePickerProps, nextState: TimePickerState) => boolean;
protected normalizeTime(date: Date): Date;
protected setShow(show: boolean): void;
protected mergeTime(value: Date | null): Date | null;
private handleInputValueChange;
private handleTimeChange;
private handleValueChange;
private handleFocus;
private handleBlur;
private handleValueReject;
private handleIconClick;
private handleIconMouseDown;
private handleKeyDown;
private calculateMedia;
}
/**
* @hidden
*/
export declare class TimeSelector extends React_2.Component<TimeSelectorProps, TimeSelectorState> {
static propTypes: {
cancelButton: default_2.Requireable<boolean>;
className: default_2.Requireable<string>;
disabled: default_2.Requireable<boolean>;
format: default_2.Requireable<NonNullable<string | default_2.InferProps<{
skeleton: default_2.Requireable<string>;
pattern: default_2.Requireable<string>;
date: default_2.Requireable<string>;
time: default_2.Requireable<string>;
datetime: default_2.Requireable<string>;
era: default_2.Requireable<string>;
year: default_2.Requireable<string>;
month: default_2.Requireable<string>;
day: default_2.Requireable<string>;
weekday: default_2.Requireable<string>;
hour: default_2.Requireable<string>;
hour12: default_2.Requireable<boolean>;
minute: default_2.Requireable<string>;
second: default_2.Requireable<string>;
timeZoneName: default_2.Requireable<string>;
}> | null | undefined>>;
max: default_2.Requireable<Date>;
min: default_2.Requireable<Date>;
nowButton: default_2.Requireable<boolean>;
steps: default_2.Requireable<default_2.InferProps<{
hour: default_2.Requireable<number>;
minute: default_2.Requireable<number>;
second: default_2.Requireable<number>;
}>>;
smoothScroll: default_2.Requireable<boolean>;
tabIndex: default_2.Requireable<number>;
value: default_2.Requireable<Date>;
show: default_2.Requireable<boolean>;
};
static defaultProps: {
value: null;
disabled: boolean;
cancelButton: boolean;
format: string;
min: Date;
max: Date;
boundRange: boolean;
footer: boolean;
};
readonly state: TimeSelectorState;
private _element;
private _cancelButton;
private _acceptButton;
private dateFormatParts;
private valueDuringOnChange?;
private timePart;
private mergeValue;
private nextTickId;
constructor(props: TimeSelectorProps);
/**
* @hidden
*/
get element(): HTMLSpanElement | null;
get value(): Date | null;
protected get intl(): IntlService;
private get current();
/**
* @hidden
*/
componentWillUnmount(): void;
/**
* @hidden
*/
render(): JSX_2.Element;
focusActiveList: () => void;
protected nextTick(f: () => any): void;
protected hasActiveButton(): boolean | null;
private handleKeyDown;
private revertToNowButton;
private handleNowKeyDown;
private handleAccept;
private handleReject;
private handleNowClick;
private handleChange;
}
/**
* @hidden
*/
declare interface TimeSelectorProps {
cancelButton?: boolean;
className?: string;
disabled?: boolean;
format?: string | DateFormatOptions;
max?: Date;
min?: Date;
nowButton?: boolean;
onChange?: any;
handleTimeChange?: any;
onReject?: any;
steps?: TimePickerIncrementalSteps;
smoothScroll?: boolean;
tabIndex?: number;
value?: Date | null;
boundRange?: boolean;
show?: boolean;
footer?: boolean;
mobileMode?: boolean;
unstyled?: DateInputsClassStructure;
}
/**
* @hidden
*/
declare interface TimeSelectorState {
value: Date | null;
current: Date | null;
}
/**
* @hidden
*/
export declare const today = "calendar.today";
export declare class TodayCommand extends React_2.Component<TodayCommandProps> {
static propTypes: {
max: default_2.Validator<Date>;
min: default_2.Validator<Date>;
onClick: default_2.Requireable<(...args: any[]) => any>;
disabled: default_2.Requireable<boolean>;
};
static defaultProps: {
min: Date;
max: Date;
};
protected get min(): Date;
protected get max(): Date;
private localization;
protected get todayIsInRange(): boolean;
private handleClick;
render(): JSX_2.Element;
}
/**
* @hidden
*/
declare interface TodayCommandProps {
min: Date;
max: Date;
onClick?: (event: HeaderEventArguments) => void;
disabled?: boolean;
tabIndex?: number;
unstyled?: DateInputsClassStructure;
}
/**
* Represents the default `toggleButton` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).
*/
export declare const ToggleButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<ButtonHandle | null>>;
/**
* Represents the props of the KendoReact [Toggle Button]({% slug api_dateinputs_togglebutton %}) component.
*/
export declare interface ToggleButtonProps extends ButtonProps {
}
/**
* @hidden
*/
export declare const toggleCalendar = "datepicker.toggleCalendar";
/**
* @hidden
*/
export declare const toggleDateTimeSelector = "datetimepicker.toggleDateTimeSelector";
/**
* @hidden
*/
export declare class ViewList extends React_2.Component<ViewListProps, ViewListState> {
static propTypes: {
activeView: default_2.Validator<number>;
bottomOffset: default_2.Requireable<number>;
cellUID: default_2.Validator<string>;
focusedDate: default_2.Validator<Date>;
max: default_2.Validator<Date>;
min: default_2.Validator<Date>;
onChange: default_2.Requireable<(...args: any[]) => any>;
showWeekNumbers: default_2.Requireable<boolean>;
smoothScroll: default_2.Requireable<boolean>;
take: default_2.Requireable<number>;
value: default_2.Requireable<Date>;
viewHeight: default_2.Requireable<number>;
viewOffset: default_2.Requireable<number>;
weekDaysFormat: default_2.Requireable<string>;
tabIndex: default_2.Requireable<number>;
};
static defaultProps: {
take: number;
showWeekNumbers: boolean;
weekDaysFormat: string;
smoothScroll: boolean;
};
virtualization: Virtualization | null;
private calendarView;
private table;
private intl;
private bottomOffset;
private viewOffset;
private viewHeight;
private _element;
private lastView;
private isActive;
private animateToIndex;
private shouldScroll;
private indexToScroll?;
private lastFocus;
private weekService;
get element(): HTMLDivElement | null;
protected get weekNames(): string[];
protected get weekNumber(): boolean;
protected get take(): number;
protected get animate(): boolean;
protected get todayIsInRange(): boolean;
constructor(props: ViewListProps);
componentDidUpdate(_prevProps: ViewListProps, _prevState: ViewListState): void;
focusActiveDate: () => void;
blurActiveDate: () => void;
render(): JSX_2.Element;
protected handleVirtualizationMount: (virtualization: Virtualization) => void;
protected buildMonthView: (cols: any[], weekNames: any[]) => JSX_2.Element;
protected buildDates: (cols: any[], dates: Date[]) => JSX_2.Element;
protected calculateHeights: () => void;
protected getTake: (skip: number, total: number) => number;
private handleScrollAction;
private handleTodayClick;
private handleDateChange;
}
/**
* @hidden
*/
declare interface ViewListEventArguments {
syntheticEvent: React_2.SyntheticEvent<any>;
nativeEvent?: any;
value: Date;
target: ViewList;
isTodayClick?: boolean;
}
/**
* @hidden
*/
declare interface ViewListProps {
activeView: CalendarViewEnum;
bottomOffset?: number;
bus: BusViewService;
cellUID: string;
dom: DOMService;
focusedDate: Date;
max: Date;
min: Date;
cell?: React_2.ComponentType<CalendarCellProps>;
onScroll?: (event: React_2.SyntheticEvent) => void;
onChange?: (event: ViewListEventArguments) => void;
service: ViewService;
showWeekNumbers?: boolean;
smoothScroll?: boolean;
take?: number;
weekDaysFormat?: WeekDaysFormat;
value: Date | null;
viewHeight?: number;
viewOffset?: number;
weekCell?: React_2.ComponentType<CalendarWeekCellProps>;
showOtherMonthDays?: boolean;
headerTitle?: React_2.ComponentType<CalendarHeaderTitleProps>;
header?: React_2.ComponentType<CalendarHeaderProps>;
shouldScroll?: () => boolean;
tabIndex?: number;
unstyled?: DateInputsClassStructure;
}
/**
* @hidden
*/
declare interface ViewListState {
skip: number;
index: number;
}
/**
* @hidden
*/
export declare interface ViewService {
isSelectedFromArray(candidate: Date, dates: Date[], min: Date, max: Date): boolean;
addToDate(min: Date, skip: number): Date;
datesList(start: Date, count: number): Date[];
data(options: any): CellContext[][];
isEqual(candidate: Date, expected: Date): boolean;
isInArray(date: Date, dates: Date[]): boolean;
isInRange(candidate: Date, min: Date, max: Date): boolean;
isRangeStart(date: Date): boolean;
isInSameView(candidate: Date, value: Date): boolean;
move(date: Date, action: Action): Date;
cellTitle(current: Date): string;
navigationTitle(current: Date): string;
title(current: Date): string;
rowLength(prependCell?: 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;
}
/**
* @hidden
*/
export declare class Virtualization extends React_2.Component<VirtualizationProps, {}> {
static propTypes: {
bottomOffset: default_2.Validator<number>;
className: default_2.Requireable<string>;
direction: default_2.Requireable<string>;
forceScroll: default_2.Requireable<boolean>;
itemHeight: default_2.Requireable<number>;
itemWidth: default_2.Requireable<number>;
maxScrollDifference: default_2.Requireable<number>;
onScroll: default_2.Requireable<(...args: any[]) => any>;
onScrollAction: default_2.Requireable<(...args: any[]) => any>;
scrollDuration: default_2.Requireable<number>;
scrollOffsetSize: default_2.Requireable<number>;
skip: default_2.Validator<number>;
tabIndex: default_2.Requireable<number>;
take: default_2.Validator<number>;
topOffset: default_2.Validator<number>;
total: default_2.Validator<number>;
role: default_2.Requireable<string>;
};
static defaultProps: {
direction: Direction;
forceScroll: boolean;
scrollOffsetSize: number;
maxScrollDifference: number;
scrollDuration: number;
};
private cancelAnimation;
private rowHeightService;
private scrollerService;
private scrollContainer;
private scrollAction?;
private pageAction?;
private lastDirection;
private lastTotal;
private lastTake;
private animationInProgress;
private restrictScroll;
get element(): HTMLDivElement | null;
protected get containerOffsetSize(): number;
get containerScrollSize(): number;
get containerScrollPosition(): number;
protected get direction(): Direction;
protected get scrollOffsetSize(): number;
constructor(props: VirtualizationProps);
activeIndex(): number;
itemIndex(offset: number): number;
itemOffset(index: number): number;
isIndexVisible(index: number): boolean;
isListScrolled(index: number): boolean;
scrollTo: (value: number) => void;
scrollToIndex: (index: number) => void;
animateToIndex: (index: number) => void;
scrollToBottom: () => void;
componentDidMount(): void;
render(): JSX_2.Element;
protected scrollStep: (start: number, end: number) => number;
protected scrollRange: (indexOffset: number, direction: ScrollDirection) => any;
protected containerMaxScroll: () => number;
protected getContainerScrollDirection: (indexOffset: number) => ScrollDirection;
protected initServices: (props?: VirtualizationProps) => void;
protected getContainerProperty: (propertyName: 'offsetHeight' | 'offsetWidth' | 'scrollHeight' | 'scrollWidth' | 'scrollTop' | 'scrollLeft') => number;
private handleScroll;
private handleScrollAction;
private handlePageAction;
}
/**
* @hidden
*/
declare interface VirtualizationProps {
bottomOffset: number;
className?: string;
direction?: Direction;
itemHeight?: number;
itemWidth?: number;
maxScrollDifference?: number;
onMount?: any;
onScroll?: (event: React_2.SyntheticEvent) => void;
onScrollAction?: (args: ScrollActionArguments) => void;
scrollOffsetSize?: number;
scrollDuration?: number;
skip: number;
tabIndex?: number;
take: number;
topOffset: number;
total: number;
role?: string;
children?: React_2.ReactNode;
unstyled?: DateInputsClassStructure;
}
/**
* Specifies the possible format options for the displayed Calendar week days' names.
*/
declare type WeekDaysFormat = 'short' | 'narrow' | 'abbreviated';
/**
* @hidden
*/
export declare class WeekNamesService {
private intl;
constructor(intl: IntlService);
getWeekNames(includeWeekNumber?: boolean, weekDaysFormat?: WeekDaysFormat): string[];
}
/**
* @hidden
*/
export declare class YearViewService implements ViewService {
private _intl;
constructor(intl: IntlService);
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(current?: 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 abbrMonthNames;
private normalize;
}
export { }