@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
130 lines (129 loc) • 4.28 kB
TypeScript
/**
* MSKCC DSM 2021, 2023
*/
import { ReactNodeLike } from 'prop-types';
import React from 'react';
import flatpickr from 'flatpickr';
import { ReactAttr } from '../../types/common';
type ExcludedAttributes = 'value' | 'onChange' | 'locale';
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;
};
interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
/**
* flatpickr prop passthrough. Allows the user to enter a date directly
* into the input field
*/
allowInput?: boolean;
/**
* The DOM element the flatpickr should be inserted into `<body>` by default.
*/
appendTo?: object;
/**
* The child nodes.
*/
children: React.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?: string[];
/**
* The flatpickr `enable` option that allows a user to enable certain dates.
*/
enable?: string[];
/**
* 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?: ReactNodeLike;
/**
* `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?: string;
/**
* The minimum date that a user can start picking from.
*/
minDate?: string;
/**
* The `change` event handler.
*/
onChange?: flatpickr.Options.Hook;
/**
* The `close` event handler.
*/
onClose?: flatpickr.Options.Hook;
/**
* The `open` event handler.
*/
onOpen?: flatpickr.Options.Hook;
/**
* 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?: string | number | (string | number | object)[] | object | undefined;
/**
* 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?: ReactNodeLike;
}
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
export default DatePicker;