feat(date-picker): 新增自定义触发器(#2891)

.changeset/hot-fans-beg.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(date-picker): 新增自定义触发器

.changeset/metal-squids-unite.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: 新增自定义触发器

packages/ui/date-picker/src/DatePicker.tsx

@@ -78,14 +78,16 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
       cellRender,
       footerRender,
       strideSelectMode = 'auto',
+      customRender,
       prefix,
       needConfirm: needConfirmProp = false,
       onConfirm,
       ...otherProps
     },
     ref
   ) => {
-    const i18n = useLocaleContext()
+    const i18n = useLocaleConte
+    xt()
     const locale = i18n.locale
 
     const [dateRangeTimePanelNow, setDateRangeTimePanelNow] = useState(0)
@@ -461,6 +463,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
             setAttachEl={setAttachEl}
             dateRangeTimePanelNow={dateRangeTimePanelNow}
             invalid={invalid}
+            customRender={customRender}
             prefix={prefix}
           />
           <Popper

packages/ui/date-picker/src/components/root.tsx

@@ -15,6 +15,7 @@ const Root = ({
   setAttachEl,
   dateRangeTimePanelNow,
   invalid,
+  customRender,
   prefix,
 }: {
   onTrigger: (index: number) => void
@@ -24,6 +25,7 @@ const Root = ({
   inputChangeEvent: InputChangeEvent
   dateRangeTimePanelNow: number
   invalid: boolean
+  customRender?: React.ReactNode | ((option: (Date | undefined)[]) => React.ReactNode)
   prefix: React.ReactNode
 }) => {
   const {
@@ -135,7 +137,22 @@ const Root = ({
     (invalid || !isValueValid) && `${prefixCls}__picker--invalid`
   )
 
-  return (
+  return customRender ? (
+    <div
+      ref={setAttachEl}
+      onClick={() => {
+        if (renderRange) {
+          onPickerClickEvent(1)
+        } else {
+          onPickerClickEvent(0)
+        }
+      }}
+    >
+      {typeof customRender === 'function'
+        ? customRender(inputData.map((item) => item?.toDate()))
+        : customRender}
+    </div>
+  ) : (
     <div className={_cls} ref={setAttachEl}>
       <div className={`${prefixCls}__picker__wrapper`}>
         {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}

packages/ui/date-picker/src/types.ts

@@ -284,6 +284,9 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    */
   strideSelectMode?: 'auto' | 'fixed'
   /**
+   * 自定义触发器
+   */
+  customRender?: React.ReactNode | ((option: (Date | undefined)[]) => React.ReactNode)
    * 选择框前置内容
    */
   prefix?: React.ReactNode

packages/ui/date-picker/stories/custom-render.stories.tsx

@@ -0,0 +1,62 @@
+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[0]} 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) => {
+            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>
+    </>
+  )
+}

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 * from './addon.stories'
 export * from './need-confirm.stories'