@progress/kendo-react-dateinputs
Version:
KendoReact Date Inputs package
104 lines (103 loc) • 4.08 kB
TypeScript
/// <reference types="react" />
import { DateInputFormatPlaceholder } from '../../dateinput/models/format-placeholder';
import { DateInputsPopupSettings } from '../../PopupSettings';
import { CalendarProps } from '../../calendar/components/Calendar';
import { PopupProps } from '@progress/kendo-react-popup';
import { DateInputProps } from '../../main';
/**
* @hidden
*/
export interface DatePickerSettings {
/**
* 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>>;
/**
* 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;
/**
* 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;
/**
* 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;
}