@carbon/react
Version:
React components for the Carbon Design System
102 lines (101 loc) • 3.3 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 { ReactElementLike } from 'prop-types';
import React, { type HTMLAttributes, type ReactNode } from 'react';
type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
export type ReactNodeLike = ReactElementLike | ReadonlyArray<ReactNode> | string | number | boolean | null | undefined;
export type func = (...args: any[]) => any;
export interface DatePickerInputProps extends Omit<HTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
/**
* 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?: 'simple' | 'single' | 'range';
/**
* **Experimental**: Provide a `decorator` component to be rendered inside the `DatePickerInput` component
*/
decorator?: ReactNode;
/**
* Specify whether or not the input should be disabled
*/
disabled?: boolean;
/**
* Provide text that is used alongside the control label for additional help
*/
helperText?: ReactNodeLike;
/**
* Specify if the label should be hidden
*/
hideLabel?: boolean;
/**
* Specify an id that uniquely identifies the `<input>`
*/
id: string;
/**
* Specify whether or not the input should be invalid
*/
invalid?: boolean;
/**
* Specify the text to be rendered when the input is invalid
*/
invalidText?: ReactNodeLike;
/**
* Provide the text that will be read by a screen reader when visiting this
* control
*/
labelText: ReactNodeLike;
/**
* Specify an `onChange` handler that is called whenever a change in the
* input field has occurred
*/
onChange?: func;
/**
* Provide a function to be called when the input field is clicked
*/
onClick?: func;
/**
* Provide a regular expression that the input value must match
* TODO:need to be rewritten
*/
pattern?: (props: {
[key: string]: any;
}, propName: string, componentName: string) => null | any | Error;
/**
* Specify the placeholder text
*/
placeholder?: string;
/**
* whether the DatePicker is to be readOnly
*/
readOnly?: boolean;
/**
* Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
*/
size?: 'sm' | 'md' | 'lg';
/**
* @deprecated please use decorator instead.
* **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
*/
slug?: ReactNodeLike;
/**
* Specify the type of the `<input>`
*/
type?: string;
/**
* Specify whether the control is currently in warning state
*/
warn?: boolean;
/**
* Provide the text that is displayed when the control is in warning state
*/
warnText?: ReactNodeLike;
}
declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLDivElement>>;
export default DatePickerInput;