Add html title prop to picker

src/Picker.tsx

@@ -57,7 +57,10 @@ export type PickerSharedProps<DateType> = {
 
   // Value
   format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
-
+
+  // cell tittle
+  htmlTitle?: boolean | { format?: string | CustomFormat<DateType> };
+
   // Render
   suffixIcon?: React.ReactNode;
   clearIcon?: React.ReactNode;

src/PickerPanel.tsx

@@ -38,6 +38,7 @@ import RangeContext from './RangeContext';
 import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
 import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil';
+import type { CustomFormat } from './interface';
 
 export type PickerPanelSharedProps<DateType> = {
   prefixCls?: string;
@@ -83,6 +84,8 @@ export type PickerPanelSharedProps<DateType> = {
 
   /** @private Internal usage. Do not use in your production env */
   components?: Components;
+
+  htmlTitle?: boolean | { format?: string | CustomFormat<DateType> };
 };
 
 export type PickerPanelBaseProps<DateType> = {

src/interface.ts

@@ -79,6 +79,8 @@ export type PanelSharedProps<DateType> = {
   onSelect: OnSelect<DateType>;
   onViewDateChange: (value: DateType) => void;
   onPanelChange: (mode: PanelMode | null, viewValue: DateType) => void;
+
+  htmlTitle?: boolean | { format?: string | CustomFormat<DateType>; useCustomFormat?: boolean };
 };
 
 export type DisabledTimes = {

src/panels/DatePanel/DateBody.tsx

@@ -11,6 +11,7 @@ import type { Locale } from '../../interface';
 import RangeContext from '../../RangeContext';
 import useCellClassName from '../../hooks/useCellClassName';
 import PanelBody from '../PanelBody';
+import type { CustomFormat } from '../../interface';
 
 export type DateRender<DateType> = (currentDate: DateType, today: DateType) => React.ReactNode;
 
@@ -31,6 +32,7 @@ export type DateBodyProps<DateType> = {
   locale: Locale;
   rowCount: number;
   onSelect: (value: DateType) => void;
+  htmlTitle?: boolean | { format?: string | CustomFormat<DateType> };
 } & DateBodyPassProps<DateType>;
 
 function DateBody<DateType>(props: DateBodyProps<DateType>) {
@@ -43,6 +45,7 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
     viewDate,
     value,
     dateRender,
+    htmlTitle,
   } = props;
 
   const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
@@ -92,12 +95,15 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
       getCellText={generateConfig.getDate}
       getCellClassName={getCellClassName}
       getCellDate={generateConfig.addDate}
-      titleCell={date =>
-        formatValue(date, {
-          locale,
-          format: 'YYYY-MM-DD',
-          generateConfig,
-        })
+      titleCell={
+        typeof htmlTitle === 'boolean' && !htmlTitle
+          ? undefined
+          : (date) =>
+            formatValue(date, {
+              locale,
+              format: typeof htmlTitle !== 'boolean' && (htmlTitle?.format ?? 'YYYY-MM-DD'),
+              generateConfig,
+            })
       }
       headerCells={headerCells}
     />