/** * Copyright IBM Corp. 2016, 2025 * * 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, { ReactNode } from 'react'; import flatpickr from 'flatpickr'; import { DateLimit, DateOption } from 'flatpickr/dist/types/options'; export type DatePickerTypes = 'simple' | 'single' | 'range'; export type CalRef = { inline: boolean; disableMobile: boolean; defaultDate: Date; closeOnSelect: (evt: React.ChangeEvent) => void; mode: 'simple' | 'single' | 'range'; allowInput: boolean; dateFormat: string; locale: string; plugins: []; clickOpens: any; }; 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 to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy 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; /** * Provide the text that is displayed when the control is in error state (Fluid Only) */ invalidText?: ReactNode; /** * `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 | 'ar' | 'at' | 'az' | 'be' | 'bg' | 'bn' | 'bs' | 'cat' | 'cs' | 'cy' | 'da' | 'de' | 'en' | 'eo' | 'es' | 'et' | 'fa' | 'fi' | 'fo' | 'fr' | 'ga' | 'gr' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'is' | 'it' | 'ja' | 'ka' | 'km' | 'ko' | 'kz' | 'lt' | 'lv' | 'mk' | 'mn' | 'ms' | 'my' | 'nl' | 'no' | 'pa' | 'pl' | 'pt' | 'ro' | 'ru' | 'si' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'th' | 'tr' | 'uk' | 'uz' | 'uz_latn' | 'vn' | 'zh_tw' | 'zh' | 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 | [] | any | 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; /** * Provide the text that is displayed when the control is in warning state (Fluid only) */ warnText?: ReactNode; } declare const DatePicker: React.ForwardRefExoticComponent>; export default DatePicker;