From 560fc198f7faea956a8d3bc9bf483295f574556f Mon Sep 17 00:00:00 2001 From: "ext.chenhuadong5" <17329351072@163.com> Date: Sat, 25 Apr 2026 17:14:25 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=97=A5=E5=8E=86=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=97=A0=E9=9A=9C=E7=A2=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendarcard/calendarcard.taro.tsx | 45 ++++++++++++++++--- 1 file changed, 39 insertions(+), 6 deletions(-) diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx index e6d75abdf7..f899e7e969 100644 --- a/src/packages/calendarcard/calendarcard.taro.tsx +++ b/src/packages/calendarcard/calendarcard.taro.tsx @@ -24,6 +24,7 @@ const defaultProps = { ...ComponentDefaults, type: 'single', firstDayOfWeek: 0, + weekdays: [], } const prefixCls = 'nut-calendarcard' @@ -47,6 +48,7 @@ export const CalendarCard = React.forwardRef< renderDay, renderDayTop, renderDayBottom, + weekdays, onDayClick, onPageChange, onChange, @@ -235,6 +237,30 @@ export const CalendarCard = React.forwardRef< return d === 0 || d === 6 } + const isToday = (day: CalendarCardDay) => { + const today = new Date() + return ( + day.year === today.getFullYear() && + day.month === today.getMonth() + 1 && + day.date === today.getDate() + ) + } + + // 日期无障碍朗读 + const getAriaLabel = (day: CalendarCardDay) => { + const today = isToday(day) + // 日期选定时,朗读="已选定 1号 按钮" + if (isActive(day)) { + return today ? `已选定今日${day.date}号` : `已选定${day.date}号` + } + // 若不可选中,朗读=“3号 按钮 变暗” + if (isDisable(day)) { + return today ? `${day.date}号今日按钮变暗` : `${day.date}号按钮变暗` + } + // 未选定时,朗读=“2号 按钮” + return today ? `${day.date}号今日` : `${day.date}号` + } + const getClasses = (day: CalendarCardDay) => { /** * active: single、multiple 激活日期 @@ -398,15 +424,17 @@ export const CalendarCard = React.forwardRef< } const [weekHeader] = useState(() => { - const weekdays = locale.calendaritem.weekdays.map((day, index) => { + const weekdaysList = + weekdays.length > 0 ? weekdays : locale.calendaritem.weekdays + const weekdaysData = weekdaysList.map((day, index) => { return { name: day, key: index, } }) return [ - ...weekdays.slice(firstDayOfWeek, 7), - ...weekdays.slice(0, firstDayOfWeek), + ...weekdaysData.slice(firstDayOfWeek, 7), + ...weekdaysData.slice(0, firstDayOfWeek), ] }) @@ -437,14 +465,19 @@ export const CalendarCard = React.forwardRef< )} key={`${day.year}-${day.month}-${day.date}`} onClick={() => handleDayClick(day)} + ariaLabel={getAriaLabel(day)} + ariaRole="button" > - + {/* @ts-ignore */} + {renderDayTop ? renderDayTop(day) : ''} - + {/* @ts-ignore */} + {renderDay ? renderDay(day) : day.date} - + {/* @ts-ignore */} + {renderDayBottom ? renderDayBottom(day) : ''} From 0dd2b346103305da71c6eb0bfc7674a09845e8e4 Mon Sep 17 00:00:00 2001 From: "ext.chenhuadong5" <17329351072@163.com> Date: Sat, 25 Apr 2026 18:24:56 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E6=97=A5=E5=8E=86=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=97=A0=E9=9A=9C=E7=A2=8D=E4=BF=AE=E6=94=B92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendarcard/calendarcard.taro.tsx | 18 ++++++----- src/packages/calendarcard/demo.taro.tsx | 3 ++ .../calendarcard/demos/taro/demo13.tsx | 30 +++++++++++++++++++ 3 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 src/packages/calendarcard/demos/taro/demo13.tsx diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx index f899e7e969..c2f850477d 100644 --- a/src/packages/calendarcard/calendarcard.taro.tsx +++ b/src/packages/calendarcard/calendarcard.taro.tsx @@ -251,14 +251,20 @@ export const CalendarCard = React.forwardRef< const today = isToday(day) // 日期选定时,朗读="已选定 1号 按钮" if (isActive(day)) { - return today ? `已选定今日${day.date}号` : `已选定${day.date}号` + return today + ? `已选定今日${day.month}月${day.date}号` + : `已选定${day.month}月${day.date}号` } // 若不可选中,朗读=“3号 按钮 变暗” if (isDisable(day)) { - return today ? `${day.date}号今日按钮变暗` : `${day.date}号按钮变暗` + return today + ? `${day.month}月${day.date}号今日按钮变暗` + : `${day.month}月${day.date}号按钮变暗` } // 未选定时,朗读=“2号 按钮” - return today ? `${day.date}号今日` : `${day.date}号` + return today + ? `${day.month}月${day.date}号今日` + : `${day.month}月${day.date}号` } const getClasses = (day: CalendarCardDay) => { @@ -468,16 +474,14 @@ export const CalendarCard = React.forwardRef< ariaLabel={getAriaLabel(day)} ariaRole="button" > - {/* @ts-ignore */} - + {renderDayTop ? renderDayTop(day) : ''} {/* @ts-ignore */} {renderDay ? renderDay(day) : day.date} - {/* @ts-ignore */} - + {renderDayBottom ? renderDayBottom(day) : ''} diff --git a/src/packages/calendarcard/demo.taro.tsx b/src/packages/calendarcard/demo.taro.tsx index d66f433074..fc9db57a23 100644 --- a/src/packages/calendarcard/demo.taro.tsx +++ b/src/packages/calendarcard/demo.taro.tsx @@ -16,6 +16,7 @@ import Demo9 from './demos/taro/demo9' import Demo10 from './demos/taro/demo10' import Demo11 from './demos/taro/demo11' import Demo12 from './demos/taro/demo12' +import Demo13 from './demos/taro/demo13' const CalendarDemo = () => { const [translated] = useTranslate({ @@ -97,6 +98,8 @@ const CalendarDemo = () => { {translated.title} + {translated.title} + ) diff --git a/src/packages/calendarcard/demos/taro/demo13.tsx b/src/packages/calendarcard/demos/taro/demo13.tsx new file mode 100644 index 0000000000..4b86673c09 --- /dev/null +++ b/src/packages/calendarcard/demos/taro/demo13.tsx @@ -0,0 +1,30 @@ +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(null) + + return ( + CalendarCardRef.current?.jump(-1)}> + 自定义头,当前2025-01-01,展示月份-1:{dateStr} + + } + /> + ) +} +export default Demo1 From 8a08fb8c40e65f84bb2bacac317e9044f158f177 Mon Sep 17 00:00:00 2001 From: "ext.chenhuadong5" <17329351072@163.com> Date: Sat, 25 Apr 2026 18:45:09 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=97=A5=E5=8E=86=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=87=AA=E5=AE=9A=E4=B9=89=E6=98=9F=E6=9C=9Fdemo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/calendarcard/demo.taro.tsx | 5 ++++- src/packages/calendarcard/demos/taro/demo13.tsx | 10 ++-------- src/types/spec/calendarcard/base.ts | 1 + 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/packages/calendarcard/demo.taro.tsx b/src/packages/calendarcard/demo.taro.tsx index fc9db57a23..ace887f98a 100644 --- a/src/packages/calendarcard/demo.taro.tsx +++ b/src/packages/calendarcard/demo.taro.tsx @@ -35,6 +35,7 @@ const CalendarDemo = () => { confirm: '确定', ref: '使用 Ref 上的方法', title: '搭配 Ref 使用自定义头', + customWeekdays: '自定义周几', }, 'zh-TW': { single: '選擇單個日期', @@ -51,6 +52,7 @@ const CalendarDemo = () => { confirm: '確定', ref: '使用 Ref 上的方法', title: '搭配 Ref 使用自定義头', + customWeekdays: '自定義周几', }, 'en-US': { single: 'Select a single date', @@ -67,6 +69,7 @@ const CalendarDemo = () => { confirm: 'Confirm', ref: 'Use ref', title: 'Custom title', + customWeekdays: 'Custom weekdays', }, }) @@ -98,7 +101,7 @@ const CalendarDemo = () => { {translated.title} - {translated.title} + {translated.customWeekdays} diff --git a/src/packages/calendarcard/demos/taro/demo13.tsx b/src/packages/calendarcard/demos/taro/demo13.tsx index 4b86673c09..2a9d0bb009 100644 --- a/src/packages/calendarcard/demos/taro/demo13.tsx +++ b/src/packages/calendarcard/demos/taro/demo13.tsx @@ -1,10 +1,9 @@ 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 Demo13 = () => { const [dateStr, setDate] = useState(date.getMonth()) const onPageChange = (val: any) => { console.log('onPageChange', val) @@ -19,12 +18,7 @@ const Demo1 = () => { onPageChange={onPageChange} weekdays={['周日', '周一', '周二', '周三', '周四', '周五', '周六']} firstDayOfWeek={1} - title={ - CalendarCardRef.current?.jump(-1)}> - 自定义头,当前2025-01-01,展示月份-1:{dateStr} - - } /> ) } -export default Demo1 +export default Demo13 diff --git a/src/types/spec/calendarcard/base.ts b/src/types/spec/calendarcard/base.ts index a3f2e2a823..525fa15778 100644 --- a/src/types/spec/calendarcard/base.ts +++ b/src/types/spec/calendarcard/base.ts @@ -30,6 +30,7 @@ export interface BaseCalendarCard extends BaseProps { firstDayOfWeek: number // 0-6 startDate: Date endDate: Date + weekdays?: string[] disableDay: (day: CalendarCardDay) => boolean renderDay: (day: CalendarCardDay) => ReactNode renderDayTop: (day: CalendarCardDay) => ReactNode From ecbf64a535fc5f4ac8836eac1cb6a424f3156b6a Mon Sep 17 00:00:00 2001 From: "ext.chenhuadong5" <17329351072@163.com> Date: Sat, 25 Apr 2026 19:24:49 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20ai=E4=BB=A3=E7=A0=81=E5=BB=BA?= =?UTF-8?q?=E8=AE=AE=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/calendarcard/calendarcard.taro.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx index c2f850477d..5d4f51d36f 100644 --- a/src/packages/calendarcard/calendarcard.taro.tsx +++ b/src/packages/calendarcard/calendarcard.taro.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState, useRef } from 'react' +import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react' import classNames from 'classnames' import { View } from '@tarojs/components' import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon.taro' @@ -429,7 +429,7 @@ export const CalendarCard = React.forwardRef< ) } - const [weekHeader] = useState(() => { + const [weekHeader] = useMemo(() => { const weekdaysList = weekdays.length > 0 ? weekdays : locale.calendaritem.weekdays const weekdaysData = weekdaysList.map((day, index) => { @@ -442,7 +442,7 @@ export const CalendarCard = React.forwardRef< ...weekdaysData.slice(firstDayOfWeek, 7), ...weekdaysData.slice(0, firstDayOfWeek), ] - }) + }, [weekdays, firstDayOfWeek, locale.calendaritem.weekdays]) const renderContent = () => { return ( From 0bf2c87894039e22f78f2bcba809c14561a0fad6 Mon Sep 17 00:00:00 2001 From: "ext.chenhuadong5" <17329351072@163.com> Date: Sat, 25 Apr 2026 19:35:29 +0800 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20ai=E4=BB=A3=E7=A0=81=E5=BB=BA?= =?UTF-8?q?=E8=AE=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/calendarcard/calendarcard.taro.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx index 5d4f51d36f..f17c314f38 100644 --- a/src/packages/calendarcard/calendarcard.taro.tsx +++ b/src/packages/calendarcard/calendarcard.taro.tsx @@ -429,7 +429,7 @@ export const CalendarCard = React.forwardRef< ) } - const [weekHeader] = useMemo(() => { + const weekHeader = useMemo(() => { const weekdaysList = weekdays.length > 0 ? weekdays : locale.calendaritem.weekdays const weekdaysData = weekdaysList.map((day, index) => {