/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { DateFormatOptions } from '@progress/kendo-intl'; import { DateInputIncrementalSteps } from './incremental-steps'; import { DateInputIntl } from '../dateInputIntl.js'; import { DateInputFormatPlaceholder } from './format-placeholder'; /** * Represents the options type of the DateInput. */ export interface DateInputOptions { /** * Specifies the `date` format which is used for formatting the value ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/formats)). If not set, the default format will be used. */ format: string | DateFormatOptions; /** * Specifies the incremental steps of the DateInput ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/incremental-steps)). * * 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](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/placeholders)). */ 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](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/placeholders). */ placeholder?: string | null; /** * Example usage of the `placeholder` property: * ```jsx * * ``` */ /** * 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; /** * Enables mouse wheel scrolling to increase or decrease date segment values. * * @default `true` */ 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](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/formats#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; }