@carbon/react
Version:
React components for the Carbon Design System
132 lines (131 loc) • 4.13 kB
TypeScript
/**
* 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 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 | 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;
/**
* Provide the text that is displayed when the control is in warning state (Fluid only)
*/
warnText?: ReactNode;
/**
* 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<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
export default DatePicker;