diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx
index 1b137c8b0..4ab06f468 100644
--- a/docs/examples/range.tsx
+++ b/docs/examples/range.tsx
@@ -202,6 +202,17 @@ export default () => {
disabledDate={disabledDate}
/>
+
+
Custom Format
+
+ {...sharedProps}
+ locale={zhCN}
+ picker="year"
+ format={(date, index) => {
+ return index === 0 ? date.format('YYYY') : date.format('YYYY-MM-DD');
+ }}
+ />
+
);
diff --git a/src/PickerInput/Selector/hooks/useInputProps.ts b/src/PickerInput/Selector/hooks/useInputProps.ts
index 251777982..1574c3980 100644
--- a/src/PickerInput/Selector/hooks/useInputProps.ts
+++ b/src/PickerInput/Selector/hooks/useInputProps.ts
@@ -86,7 +86,8 @@ export default function useInputProps(
const firstFormat = format[0];
const getText = React.useCallback(
- (date: DateType) => formatValue(date, { locale, format: firstFormat, generateConfig }),
+ (date: DateType, index?: number) =>
+ formatValue(date, { locale, index, format: firstFormat, generateConfig }),
[locale, generateConfig, firstFormat],
);
@@ -97,7 +98,7 @@ export default function useInputProps(
const defaultSize = picker === 'time' ? 8 : 10;
const length =
typeof firstFormat === 'function'
- ? firstFormat(generateConfig.getNow()).length
+ ? firstFormat(generateConfig.getNow(), 0).length
: firstFormat.length;
return Math.max(defaultSize, length) + 2;
}, [firstFormat, picker, generateConfig]);
diff --git a/src/interface.tsx b/src/interface.tsx
index 2fe3dae7d..ed8fb82b2 100644
--- a/src/interface.tsx
+++ b/src/interface.tsx
@@ -281,7 +281,7 @@ export type Components = Partial<
>;
// ========================= Picker =========================
-export type CustomFormat = (value: DateType) => string;
+export type CustomFormat = (value: DateType, index: number) => string;
export type FormatType = string | CustomFormat;
diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts
index 7508e067e..4a72e1ff9 100644
--- a/src/utils/dateUtil.ts
+++ b/src/utils/dateUtil.ts
@@ -232,10 +232,12 @@ export function formatValue(
generateConfig,
locale,
format,
+ index = 0,
}: {
generateConfig: GenerateConfig;
locale: Locale;
format: string | CustomFormat;
+ index?: number;
},
) {
if (!value) {
@@ -243,7 +245,7 @@ export function formatValue(
}
return typeof format === 'function'
- ? format(value)
+ ? format(value, index)
: generateConfig.locale.format(locale.locale, value, format);
}