feat(calendarcard): 增加自定义头 (#3285)

xiaoyatong · web-flow · commit c415f48a17fa · 2025-06-26T19:16:58.000+08:00
* feat(calendarcard): 增加自定义头

* fix: 使用 view 替换
diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx
@@ -37,6 +37,7 @@ export const CalendarCard = React.forwardRef<
     style,
     className,
     type,
+    title,
     value,
     defaultValue,
     firstDayOfWeek,
@@ -455,7 +456,7 @@ export const CalendarCard = React.forwardRef<
 
   return days.length > 0 ? (
     <View className={classNames(prefixCls, className)} style={style}>
-      {renderHeader()}
+      {title || renderHeader()}
       {renderContent()}
     </View>
   ) : null
diff --git a/src/packages/calendarcard/calendarcard.tsx b/src/packages/calendarcard/calendarcard.tsx
@@ -36,6 +36,7 @@ export const CalendarCard = React.forwardRef<
     style,
     className,
     type,
+    title,
     value,
     defaultValue,
     firstDayOfWeek,
@@ -456,7 +457,7 @@ export const CalendarCard = React.forwardRef<
 
   return days.length > 0 ? (
     <div className={classNames(prefixCls, className)} style={style}>
-      {renderHeader()}
+      {title || renderHeader()}
       {renderContent()}
     </div>
   ) : null
diff --git a/src/packages/calendarcard/demo.taro.tsx b/src/packages/calendarcard/demo.taro.tsx
@@ -15,6 +15,7 @@ import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
 import Demo10 from './demos/taro/demo10'
 import Demo11 from './demos/taro/demo11'
+import Demo12 from './demos/taro/demo12'
 
 const CalendarDemo = () => {
   const [translated] = useTranslate({
@@ -32,6 +33,7 @@ const CalendarDemo = () => {
       select: '选择日期',
       confirm: '确定',
       ref: '使用 Ref 上的方法',
+      title: '搭配 Ref 使用自定义头',
     },
     'zh-TW': {
       single: '選擇單個日期',
@@ -47,6 +49,7 @@ const CalendarDemo = () => {
       select: '選擇日期',
       confirm: '確定',
       ref: '使用 Ref 上的方法',
+      title: '搭配 Ref 使用自定義头',
     },
     'en-US': {
       single: 'Select a single date',
@@ -62,6 +65,7 @@ const CalendarDemo = () => {
       select: 'Select',
       confirm: 'Confirm',
       ref: 'Use ref',
+      title: 'Custom title',
     },
   })
 
@@ -71,36 +75,28 @@ const CalendarDemo = () => {
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.single}</View>
         <Demo1 />
-
         <View className="h2">{translated.multiple}</View>
         <Demo2 />
-
         <View className="h2">{translated.range}</View>
         <Demo3 />
-
         <View className="h2">{translated.week}</View>
         <Demo4 />
-
         <View className="h2">{translated.control}</View>
         <Demo5 />
-
         <View className="h2">{translated.renderDay}</View>
         <Demo6 />
-
         <View className="h2">{translated.firstDay}</View>
         <Demo7 />
-
         <View className="h2">{translated.customRange}</View>
         <Demo8 />
-
         <View className="h2">{translated.disable}</View>
         <Demo9 />
-
         <View className="h2">{translated.popup}</View>
         <Demo10 />
-
         <View className="h2">{translated.ref}</View>
         <Demo11 />
+        <View className="h2">{translated.title}</View>
+        <Demo12 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/calendarcard/demo.tsx b/src/packages/calendarcard/demo.tsx
@@ -11,6 +11,7 @@ import Demo8 from './demos/h5/demo8'
 import Demo9 from './demos/h5/demo9'
 import Demo10 from './demos/h5/demo10'
 import Demo11 from './demos/h5/demo11'
+import Demo12 from './demos/h5/demo12'
 
 const CalendarDemo = () => {
   const [translated] = useTranslate({
@@ -28,6 +29,7 @@ const CalendarDemo = () => {
       select: '选择日期',
       confirm: '确定',
       ref: '使用 Ref 上的方法',
+      title: '搭配 Ref 使用自定义头',
     },
     'zh-TW': {
       single: '選擇單個日期',
@@ -43,6 +45,7 @@ const CalendarDemo = () => {
       select: '選擇日期',
       confirm: '確定',
       ref: '使用 Ref 上的方法',
+      title: '搭配 Ref 使用自定義头',
     },
     'en-US': {
       single: 'Select a single date',
@@ -58,6 +61,7 @@ const CalendarDemo = () => {
       select: 'Select',
       confirm: 'Confirm',
       ref: 'Use ref',
+      title: 'Custom title',
     },
   })
 
@@ -66,36 +70,28 @@ const CalendarDemo = () => {
       <div className="demo">
         <h2>{translated.single}</h2>
         <Demo1 />
-
         <h2>{translated.multiple}</h2>
         <Demo2 />
-
         <h2>{translated.range}</h2>
         <Demo3 />
-
         <h2>{translated.week}</h2>
         <Demo4 />
-
         <h2>{translated.control}</h2>
         <Demo5 />
-
         <h2>{translated.renderDay}</h2>
         <Demo6 />
-
         <h2>{translated.firstDay}</h2>
         <Demo7 />
-
         <h2>{translated.customRange}</h2>
         <Demo8 />
-
         <h2>{translated.disable}</h2>
         <Demo9 />
-
         <h2>{translated.popup}</h2>
         <Demo10 />
-
         <h2>{translated.ref}</h2>
         <Demo11 />
+        <h2>{translated.title}</h2>
+        <Demo12 />
       </div>
     </>
   )
diff --git a/src/packages/calendarcard/demos/h5/demo12.tsx b/src/packages/calendarcard/demos/h5/demo12.tsx
@@ -0,0 +1,27 @@
+import React, { useRef, useState } from 'react'
+import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react'
+
+const date = new Date('2025-01-01')
+
+const Demo1 = () => {
+  const [dateStr, setDate] = useState(date.getMonth())
+  const onPageChange = (val: any) => {
+    console.log('onPageChange', val)
+    setDate(val.month)
+  }
+  const CalendarCardRef = useRef<CalendarCardRef>(null)
+
+  return (
+    <CalendarCard
+      ref={CalendarCardRef}
+      defaultValue={date}
+      onPageChange={onPageChange}
+      title={
+        <div onClick={() => CalendarCardRef.current?.jump(-1)}>
+          自定义头，当前2025-01-01，展示月份-1：{dateStr}
+        </div>
+      }
+    />
+  )
+}
+export default Demo1
diff --git a/src/packages/calendarcard/demos/taro/demo12.tsx b/src/packages/calendarcard/demos/taro/demo12.tsx
@@ -0,0 +1,28 @@
+import React, { useRef, useState } from 'react'
+import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
+
+const date = new Date('2025-01-01')
+
+const Demo1 = () => {
+  const [dateStr, setDate] = useState(date.getMonth())
+  const onPageChange = (val: any) => {
+    console.log('onPageChange', val)
+    setDate(val.month)
+  }
+  const CalendarCardRef = useRef<CalendarCardRef>(null)
+
+  return (
+    <CalendarCard
+      ref={CalendarCardRef}
+      defaultValue={date}
+      onPageChange={onPageChange}
+      title={
+        <View onClick={() => CalendarCardRef.current?.jump(-1)}>
+          自定义头，当前2025-01-01，展示月份-1：{dateStr}
+        </View>
+      }
+    />
+  )
+}
+export default Demo1
diff --git a/src/packages/calendarcard/doc.en-US.md b/src/packages/calendarcard/doc.en-US.md
@@ -98,13 +98,22 @@ import { CalendarCard } from '@nutui/nutui-react'
 
 :::
 
+### Use ref and custom title
+
+:::demo
+
+<CodeBlock src='h5/demo12.tsx'></CodeBlock>
+
+:::
+
 ## CalendarCard
 
 ### Props
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | type | Type, single date `single`, multiple dates `multiple`, date range `range`, week selection `week` | `string` | `single` |
+| title | Custom title | `ReactNode` | `-` |
 | defaultValue | Default value, choose string format for date, choose Array format for interval | `Date \| Date[]` | `-` |
 | startDate | Limit range start date | `Date` | `-` |
 | endDate | Limit range end date | `Date` | `-` |
diff --git a/src/packages/calendarcard/doc.md b/src/packages/calendarcard/doc.md
@@ -98,13 +98,22 @@ import { CalendarCard } from '@nutui/nutui-react'
 
 :::
 
+### 搭配 Ref 使用自定义头
+
+:::demo
+
+<CodeBlock src='h5/demo12.tsx'></CodeBlock>
+
+:::
+
 ## CalendarCard
 
 ### Props
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 类型，单个日期 `single`，多个日期 `multiple`，日期范围 `range`，周选择 `week` | `string` | `single` |
+| title | 自定义标题 | `ReactNode` | `-` |
 | defaultValue | 默认值，单个日期 Date 格式，多个日期/范围选择 Date[] 格式 | `Date \| Date[]` | `-` |
 | startDate | 限制范围开始日期 | `Date` | `-` |
 | endDate | 限制范围结束日期 | `Date` | `-` |
diff --git a/src/packages/calendarcard/doc.taro.md b/src/packages/calendarcard/doc.taro.md
@@ -98,13 +98,22 @@ import { CalendarCard } from '@nutui/nutui-react-taro'
 
 :::
 
+### 搭配 Ref 使用自定义头
+
+:::demo
+
+<CodeBlock src='taro/demo12.tsx'></CodeBlock>
+
+:::
+
 ## CalendarCard
 
 ### Props
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 类型，单个日期 `single`，多个日期 `multiple`，日期范围 `range`，周选择 `week` | `string` | `single` |
+| title | 自定义标题 | `ReactNode` | `-` |
 | defaultValue | 默认值，单个日期 Date 格式，多个日期/范围选择 Date[] 格式 | `Date \| Date[]` | `-` |
 | startDate | 限制范围开始日期 | `Date` | `-` |
 | endDate | 限制范围结束日期 | `Date` | `-` |
diff --git a/src/packages/calendarcard/doc.zh-TW.md b/src/packages/calendarcard/doc.zh-TW.md
@@ -98,13 +98,22 @@ import { CalendarCard } from '@nutui/nutui-react'
 
 :::
 
+### 搭配 Ref 使用自定義头
+
+:::demo
+
+<CodeBlock src='h5/demo12.tsx'></CodeBlock>
+
+:::
+
 ## CalendarCard
 
 ### Props
 
 | 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
 | type | 類型，單個日期 `single`，多個日期 `multiple`，日期範圍 `range`，周選擇 `week` | `string` | `single` |
+| title | 自定义标题 | `ReactNode` | `-` |
 | defaultValue | 默認值，單個日期 Date 格式，多個日期/範圍選擇 Date[] 格式 | `Date \| Date[]` | `-` |
 | startDate | 限製範圍開始日期 | `Date` | `-` |
 | endDate | 限製範圍結束日期 | `Date` | `-` |
diff --git a/src/types/spec/calendarcard/base.ts b/src/types/spec/calendarcard/base.ts
@@ -24,6 +24,7 @@ export type CalendarCardRef = {
 export interface BaseCalendarCard extends BaseProps {
   // 日视图-选择一个日期 | 日视图-选择多个日期 | 日视图-选择范围 | 周视图-选择某一周
   type: 'single' | 'multiple' | 'range' | 'week'
+  title: ReactNode
   value: CalendarCardValue
   defaultValue: CalendarCardValue
   firstDayOfWeek: number // 0-6
