/** * Copyright IBM Corp. 2016, 2026 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import React, { type ReactNode } from 'react'; import flatpickr from 'flatpickr'; import { DateLimit, DateOption } from 'flatpickr/dist/types/options'; import { type SupportedLocale } from './DatePickerLocales'; export type DatePickerTypes = 'simple' | 'single' | 'range'; export interface DatePickerProps { /** * Flatpickr prop passthrough enables direct date input, and when set to * false, we must clear dates manually by resetting the value prop to an empty * value (such as `""`, `null`, or `undefined`) or an array of all empty * values, making it a controlled input. */ allowInput?: boolean; /** * The DOM element the flatpickr should be inserted into `` by default. */ appendTo?: HTMLElement; /** * The child nodes. */ children: ReactNode | object; /** * The CSS class names. */ className?: string; /** * flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection. */ closeOnSelect?: boolean; /** * The date format. */ dateFormat?: string; /** * The type of the date picker: * * * `simple` - Without calendar dropdown. * * `single` - With calendar dropdown and single date. * * `range` - With calendar dropdown and a date range. */ datePickerType?: DatePickerTypes; /** * The flatpickr `disable` option that allows a user to disable certain dates. */ disable?: DateLimit[]; /** * The flatpickr `enable` option that allows a user to enable certain dates. */ enable?: DateLimit[]; /** * The flatpickr `inline` option. */ inline?: boolean; /** * Specify whether or not the control is invalid (Fluid only) */ invalid?: boolean; /** * `true` to use the light version. */ light?: boolean; /** * The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n */ locale?: string | any | SupportedLocale | undefined; /** * The maximum date that a user can pick to. */ maxDate?: DateOption; /** * The minimum date that a user can start picking from. */ minDate?: DateOption; /** * The `change` event handler. */ onChange?: flatpickr.Options.Hook; /** * The `close` event handler. */ onClose?: flatpickr.Options.Hook; /** * The `open` event handler. */ onOpen?: flatpickr.Options.Hook; /** * flatpickr prop passthrough. Controls how dates are parsed. */ parseDate?: (date: string) => Date | false; /** * whether the DatePicker is to be readOnly * if boolean applies to all inputs * if array applies to each input in order */ readOnly?: boolean | undefined; /** * `true` to use the short version. */ short?: boolean; /** * The value of the date value provided to flatpickr, could * be a date, a date number, a date string, an array of dates. */ value?: DateOption | DateOption[]; /** * Specify whether the control is currently in warning state (Fluid only) */ warn?: boolean; /** * Accessible aria-label for the "next month" arrow icon. */ nextMonthAriaLabel?: string; /** * Accessible aria-label for the "previous month" arrow icon. */ prevMonthAriaLabel?: string; } declare const DatePicker: React.ForwardRefExoticComponent>; export default DatePicker;