From 28f0d71528d2d83e5e9418b0875aa5947b40a3fd Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Thu, 20 Jun 2024 11:39:13 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat(date-picker):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A7=A6=E5=8F=91=E5=99=A8(#2891)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/date-picker/src/DatePicker.tsx    |  2 +
 .../ui/date-picker/src/components/root.tsx    | 25 +++++++++++-
 packages/ui/date-picker/src/types.ts          |  4 ++
 .../stories/custom-render.stories.tsx         | 40 +++++++++++++++++++
 .../ui/date-picker/stories/index.stories.tsx  |  1 +
 5 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/date-picker/stories/custom-render.stories.tsx

diff --git a/packages/ui/date-picker/src/DatePicker.tsx b/packages/ui/date-picker/src/DatePicker.tsx
index 6524fb284..a4f70aa60 100644
--- a/packages/ui/date-picker/src/DatePicker.tsx
+++ b/packages/ui/date-picker/src/DatePicker.tsx
@@ -78,6 +78,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
       cellRender,
       footerRender,
       strideSelectMode = 'auto',
+      customRender,
       ...otherProps
     },
     ref
@@ -441,6 +442,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
             setAttachEl={setAttachEl}
             dateRangeTimePanelNow={dateRangeTimePanelNow}
             invalid={invalid}
+            customRender={customRender}
           />
           <Popper
             {...(overlay || {})}
diff --git a/packages/ui/date-picker/src/components/root.tsx b/packages/ui/date-picker/src/components/root.tsx
index aeab9c552..a04334d41 100644
--- a/packages/ui/date-picker/src/components/root.tsx
+++ b/packages/ui/date-picker/src/components/root.tsx
@@ -15,6 +15,7 @@ const Root = ({
   setAttachEl,
   dateRangeTimePanelNow,
   invalid,
+  customRender,
 }: {
   onTrigger: (index: number) => void
   onClear: () => void
@@ -23,6 +24,7 @@ const Root = ({
   inputChangeEvent: InputChangeEvent
   dateRangeTimePanelNow: number
   invalid: boolean
+  customRender?: React.ReactNode | ((option: string[]) => React.ReactNode)
 }) => {
   const {
     i18n,
@@ -133,7 +135,28 @@ const Root = ({
     (invalid || !isValueValid) && `${prefixCls}__picker--invalid`
   )
 
-  return (
+  const dataValue = []
+  if (inputData[0]) {
+    dataValue.push(inputData[0].format('YYYY-MM-DD'))
+  }
+  if (inputData[1]) {
+    dataValue.push(inputData[1].format('YYYY-MM-DD'))
+  }
+
+  return customRender ? (
+    <div
+      ref={setAttachEl}
+      onClick={() => {
+        if (renderRange) {
+          onPickerClickEvent(1)
+        } else {
+          onPickerClickEvent(0)
+        }
+      }}
+    >
+      {typeof customRender === 'function' ? customRender(dataValue) : customRender}
+    </div>
+  ) : (
     <div className={_cls} ref={setAttachEl}>
       <div className={`${prefixCls}__picker__wrapper`}>
         <div
diff --git a/packages/ui/date-picker/src/types.ts b/packages/ui/date-picker/src/types.ts
index 5ccfa01fa..7d1897c56 100644
--- a/packages/ui/date-picker/src/types.ts
+++ b/packages/ui/date-picker/src/types.ts
@@ -283,4 +283,8 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    * @default 'auto'
    */
   strideSelectMode?: 'auto' | 'fixed'
+  /**
+   * 自定义触发器
+   */
+  customRender?: React.ReactNode | ((option: string[]) => React.ReactNode)
 }
diff --git a/packages/ui/date-picker/stories/custom-render.stories.tsx b/packages/ui/date-picker/stories/custom-render.stories.tsx
new file mode 100644
index 000000000..019d1e093
--- /dev/null
+++ b/packages/ui/date-picker/stories/custom-render.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import DatePicker from '../src'
+import Input from '@hi-ui/input'
+
+/**
+ * @title 自定义触发器
+ */
+export const CustomRender = () => {
+  return (
+    <>
+      <h1>日期</h1>
+      <div className="date-picker-custom-render__wrap">
+        <h2>基础</h2>
+        <DatePicker
+          style={{ width: 240 }}
+          onChange={(date, dateStr) => {
+            console.log('onChange', date, dateStr)
+          }}
+          onSelect={console.log}
+          customRender={(data) => {
+            return <Input value={data} readOnly placeholder="请选择" />
+          }}
+        />
+        <h2>日期时间范围</h2>
+        <DatePicker
+          style={{ width: 420 }}
+          type="daterange"
+          showTime
+          onChange={(date, dateStr) => {
+            console.log('onChange', date, dateStr)
+          }}
+          defaultValue={[new Date(), new Date()]}
+          customRender={(data) => {
+            return <Input value={`${data[0]}  ~  ${data[1]}`} readOnly placeholder="请选择" />
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/date-picker/stories/index.stories.tsx b/packages/ui/date-picker/stories/index.stories.tsx
index 3ec21ef85..35950f3d2 100644
--- a/packages/ui/date-picker/stories/index.stories.tsx
+++ b/packages/ui/date-picker/stories/index.stories.tsx
@@ -11,6 +11,7 @@ export * from './shortcut.stories'
 export * from './lunar.stories'
 export * from './size.stories'
 export * from './footer-render.stories'
+export * from './custom-render.stories'
 
 export default {
   title: 'Data Input/DatePicker',

From 57cd05bf401e5bf7f92fa8ee2b0e52650e547e52 Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Thu, 20 Jun 2024 11:41:23 +0800
Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=E7=94=9F=E6=88=90=E5=8F=98?=
 =?UTF-8?q?=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/hot-fans-beg.md       | 5 +++++
 .changeset/metal-squids-unite.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/hot-fans-beg.md
 create mode 100644 .changeset/metal-squids-unite.md

diff --git a/.changeset/hot-fans-beg.md b/.changeset/hot-fans-beg.md
new file mode 100644
index 000000000..971b6c242
--- /dev/null
+++ b/.changeset/hot-fans-beg.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(date-picker): 新增自定义触发器
diff --git a/.changeset/metal-squids-unite.md b/.changeset/metal-squids-unite.md
new file mode 100644
index 000000000..8eecf3c0e
--- /dev/null
+++ b/.changeset/metal-squids-unite.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: 新增自定义触发器

From 93b3f5f947b8d7c383b7fba56fef01e56b1755f1 Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Thu, 29 Aug 2024 16:50:41 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix(data-picker):=20=E4=BF=AE=E6=94=B9(#289?=
 =?UTF-8?q?1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/date-picker/src/components/root.tsx    | 14 ++++----------
 .../date-picker/stories/custom-render.stories.tsx  |  2 +-
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/ui/date-picker/src/components/root.tsx b/packages/ui/date-picker/src/components/root.tsx
index a04334d41..5f1bb44bb 100644
--- a/packages/ui/date-picker/src/components/root.tsx
+++ b/packages/ui/date-picker/src/components/root.tsx
@@ -24,7 +24,7 @@ const Root = ({
   inputChangeEvent: InputChangeEvent
   dateRangeTimePanelNow: number
   invalid: boolean
-  customRender?: React.ReactNode | ((option: string[]) => React.ReactNode)
+  customRender?: React.ReactNode | ((option: (string | undefined)[]) => React.ReactNode)
 }) => {
   const {
     i18n,
@@ -135,14 +135,6 @@ const Root = ({
     (invalid || !isValueValid) && `${prefixCls}__picker--invalid`
   )
 
-  const dataValue = []
-  if (inputData[0]) {
-    dataValue.push(inputData[0].format('YYYY-MM-DD'))
-  }
-  if (inputData[1]) {
-    dataValue.push(inputData[1].format('YYYY-MM-DD'))
-  }
-
   return customRender ? (
     <div
       ref={setAttachEl}
@@ -154,7 +146,9 @@ const Root = ({
         }
       }}
     >
-      {typeof customRender === 'function' ? customRender(dataValue) : customRender}
+      {typeof customRender === 'function'
+        ? customRender(inputData.map((item) => item?.format('YYYY-MM-DD')))
+        : customRender}
     </div>
   ) : (
     <div className={_cls} ref={setAttachEl}>
diff --git a/packages/ui/date-picker/stories/custom-render.stories.tsx b/packages/ui/date-picker/stories/custom-render.stories.tsx
index 019d1e093..89ae076f9 100644
--- a/packages/ui/date-picker/stories/custom-render.stories.tsx
+++ b/packages/ui/date-picker/stories/custom-render.stories.tsx
@@ -18,7 +18,7 @@ export const CustomRender = () => {
           }}
           onSelect={console.log}
           customRender={(data) => {
-            return <Input value={data} readOnly placeholder="请选择" />
+            return <Input value={data[0]} readOnly placeholder="请选择" />
           }}
         />
         <h2>日期时间范围</h2>

From 406ad4f0feb70f4094dcf8236ee2559f8d73230e Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Thu, 29 Aug 2024 16:53:04 +0800
Subject: [PATCH 4/5] =?UTF-8?q?fix(data-picker):=20=E4=BF=AE=E6=94=B9(#289?=
 =?UTF-8?q?1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/date-picker/src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/date-picker/src/types.ts b/packages/ui/date-picker/src/types.ts
index 7d1897c56..70954ba01 100644
--- a/packages/ui/date-picker/src/types.ts
+++ b/packages/ui/date-picker/src/types.ts
@@ -286,5 +286,5 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
   /**
    * 自定义触发器
    */
-  customRender?: React.ReactNode | ((option: string[]) => React.ReactNode)
+  customRender?: React.ReactNode | ((option: (string | undefined)[]) => React.ReactNode)
 }

From d5733aa7cfd26b2ed039e8bb6c066dddcd72878b Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Thu, 29 Aug 2024 17:18:32 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix(data-picker):=20=E4=BF=AE=E6=94=B9(#289?=
 =?UTF-8?q?1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/date-picker/src/components/root.tsx    |  4 ++--
 packages/ui/date-picker/src/types.ts          |  2 +-
 .../stories/custom-render.stories.tsx         | 24 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/ui/date-picker/src/components/root.tsx b/packages/ui/date-picker/src/components/root.tsx
index 5f1bb44bb..3295d1784 100644
--- a/packages/ui/date-picker/src/components/root.tsx
+++ b/packages/ui/date-picker/src/components/root.tsx
@@ -24,7 +24,7 @@ const Root = ({
   inputChangeEvent: InputChangeEvent
   dateRangeTimePanelNow: number
   invalid: boolean
-  customRender?: React.ReactNode | ((option: (string | undefined)[]) => React.ReactNode)
+  customRender?: React.ReactNode | ((option: (Date | undefined)[]) => React.ReactNode)
 }) => {
   const {
     i18n,
@@ -147,7 +147,7 @@ const Root = ({
       }}
     >
       {typeof customRender === 'function'
-        ? customRender(inputData.map((item) => item?.format('YYYY-MM-DD')))
+        ? customRender(inputData.map((item) => item?.toDate()))
         : customRender}
     </div>
   ) : (
diff --git a/packages/ui/date-picker/src/types.ts b/packages/ui/date-picker/src/types.ts
index 70954ba01..7165c3163 100644
--- a/packages/ui/date-picker/src/types.ts
+++ b/packages/ui/date-picker/src/types.ts
@@ -286,5 +286,5 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
   /**
    * 自定义触发器
    */
-  customRender?: React.ReactNode | ((option: (string | undefined)[]) => React.ReactNode)
+  customRender?: React.ReactNode | ((option: (Date | undefined)[]) => React.ReactNode)
 }
diff --git a/packages/ui/date-picker/stories/custom-render.stories.tsx b/packages/ui/date-picker/stories/custom-render.stories.tsx
index 89ae076f9..c2d62756e 100644
--- a/packages/ui/date-picker/stories/custom-render.stories.tsx
+++ b/packages/ui/date-picker/stories/custom-render.stories.tsx
@@ -31,7 +31,29 @@ export const CustomRender = () => {
           }}
           defaultValue={[new Date(), new Date()]}
           customRender={(data) => {
-            return <Input value={`${data[0]}  ~  ${data[1]}`} readOnly placeholder="请选择" />
+            const date1 = new Date(data[0])
+            const date2 = new Date(data[1])
+            const year1 = date1.getFullYear()
+            const year2 = date2.getFullYear()
+            const month1 = (date1.getMonth() + 1).toString().padStart(2, '0')
+            const month2 = (date2.getMonth() + 1).toString().padStart(2, '0')
+            const day1 = date1.getDate().toString().padStart(2, '0')
+            const day2 = date2.getDate().toString().padStart(2, '0')
+            const hours1 = date1.getHours().toString().padStart(2, '0')
+            const hours2 = date2.getHours().toString().padStart(2, '0')
+            const minutes1 = date1.getMinutes().toString().padStart(2, '0')
+            const minutes2 = date2.getMinutes().toString().padStart(2, '0')
+            const seconds1 = date1.getSeconds().toString().padStart(2, '0')
+            const seconds2 = date2.getSeconds().toString().padStart(2, '0')
+            const formattedDateTime1 = `${year1}-${month1}-${day1} ${hours1}:${minutes1}:${seconds1}`
+            const formattedDateTime2 = `${year2}-${month2}-${day2} ${hours2}:${minutes2}:${seconds2}`
+            return (
+              <Input
+                value={`${formattedDateTime1}  ~  ${formattedDateTime2}`}
+                readOnly
+                placeholder="请选择"
+              />
+            )
           }}
         />
       </div>