@progress/kendo-react-dateinputs/dist/npm/timepicker/models/TimePickerSettings.d.ts

KendoReact Date Inputs package

/// <reference types="react" />
import { DateInputFormatPlaceholder } from '../../dateinput/models/format-placeholder';
import { TimePickerIncrementalSteps } from './IncrementalSteps';
import { DateInputsPopupSettings } from '../../PopupSettings';
import { PopupProps } from '@progress/kendo-react-popup';
import { DateInputProps } from '../../main';
/**
 * @hidden
 */
export 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;
    /**
     * 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;
    /**
     * 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`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
     * - `appendTo:`&mdash; 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`&mdash;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>;
}