diff --git a/docs/examples/customize.tsx b/docs/examples/customize.tsx
index c94e499a4..a60fc597d 100644
--- a/docs/examples/customize.tsx
+++ b/docs/examples/customize.tsx
@@ -121,6 +121,7 @@ class Customize extends React.Component<{}, DateRangeState> {
// format="YYYY/MM/DD"
format={['YYYY-MM-DD', 'YYYY/MM/DD']}
allowClear
+ prefix="Foobar"
clearIcon={X}
suffixIcon={O}
prevIcon={<}
diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
index 96124cf29..7cd36bd29 100644
--- a/src/PickerInput/Selector/RangeSelector.tsx
+++ b/src/PickerInput/Selector/RangeSelector.tsx
@@ -52,6 +52,7 @@ function RangeSelector(
const {
id,
+ prefix,
clearIcon,
suffixIcon,
separator = '~',
@@ -238,6 +239,7 @@ function RangeSelector(
onMouseDown?.(e);
}}
>
+ {prefix && {prefix}
}
(
open,
+ prefix,
clearIcon,
suffixIcon,
activeHelp,
@@ -224,6 +225,7 @@ function SingleSelector(
onMouseDown?.(e);
}}
>
+ {prefix && {prefix}
}
{selectorNode}
);
diff --git a/src/interface.tsx b/src/interface.tsx
index d43fe1cb7..02b055030 100644
--- a/src/interface.tsx
+++ b/src/interface.tsx
@@ -302,6 +302,7 @@ export type SharedHTMLAttrs = Omit<
| 'max'
| 'onKeyDown'
| 'size'
+ | 'prefix'
>;
export type PickerFocusEventHandler = (e: React.FocusEvent, info: BaseInfo) => void;
@@ -354,6 +355,7 @@ export interface SharedPickerProps
};
// Icons
+ prefix?: React.ReactNode;
suffixIcon?: React.ReactNode;
allowClear?:
| boolean
@@ -468,6 +470,7 @@ export type OnOpenChange = (open: boolean, config?: OpenConfig) => void;
export interface SelectorProps extends SharedHTMLAttrs {
picker: PickerMode;
+ prefix?: React.ReactNode;
clearIcon?: React.ReactNode;
suffixIcon?: React.ReactNode;
className?: string;
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index eb8a58b22..227b31172 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -582,6 +582,16 @@ describe('Picker.Basic', () => {
});
});
+ it('prefix', () => {
+ render(
+ }
+ allowClear
+ />,
+ );
+ expect(document.querySelector('.prefix')).toBeInTheDocument();
+ });
+
it('icon', () => {
expect(errorSpy).not.toHaveBeenCalled();
render(
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index a9c87fb7d..db5660154 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -704,6 +704,16 @@ describe('Picker.Range', () => {
expect(isOpen()).toBeFalsy();
});
+ it('prefix', () => {
+ render(
+ }
+ allowClear
+ />,
+ );
+ expect(document.querySelector('.prefix')).toBeInTheDocument();
+ });
+
it('icon', () => {
const { container } = render(