@carbon/react
Version:
React components for the Carbon Design System
135 lines (134 loc) • 4.59 kB
TypeScript
/**
* 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<HTMLTextAreaElement>) => 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 `<body>` 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<DateOption>[];
/**
* The flatpickr `enable` option that allows a user to enable certain dates.
*/
enable?: DateLimit<DateOption>[];
/**
* 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<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
export default DatePicker;