diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx
index e6d75abdf7..f17c314f38 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'
@@ -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,36 @@ 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.month}月${day.date}号`
+ : `已选定${day.month}月${day.date}号`
+ }
+ // 若不可选中,朗读=“3号 按钮 变暗”
+ if (isDisable(day)) {
+ return today
+ ? `${day.month}月${day.date}号今日按钮变暗`
+ : `${day.month}月${day.date}号按钮变暗`
+ }
+ // 未选定时,朗读=“2号 按钮”
+ return today
+ ? `${day.month}月${day.date}号今日`
+ : `${day.month}月${day.date}号`
+ }
+
const getClasses = (day: CalendarCardDay) => {
/**
* active: single、multiple 激活日期
@@ -397,18 +429,20 @@ export const CalendarCard = React.forwardRef<
)
}
- const [weekHeader] = useState(() => {
- const weekdays = locale.calendaritem.weekdays.map((day, index) => {
+ const weekHeader = useMemo(() => {
+ 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),
]
- })
+ }, [weekdays, firstDayOfWeek, locale.calendaritem.weekdays])
const renderContent = () => {
return (
@@ -437,11 +471,14 @@ export const CalendarCard = React.forwardRef<
)}
key={`${day.year}-${day.month}-${day.date}`}
onClick={() => handleDayClick(day)}
+ ariaLabel={getAriaLabel(day)}
+ ariaRole="button"
>
{renderDayTop ? renderDayTop(day) : ''}
-
+ {/* @ts-ignore */}
+
{renderDay ? renderDay(day) : day.date}
diff --git a/src/packages/calendarcard/demo.taro.tsx b/src/packages/calendarcard/demo.taro.tsx
index d66f433074..ace887f98a 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({
@@ -34,6 +35,7 @@ const CalendarDemo = () => {
confirm: '确定',
ref: '使用 Ref 上的方法',
title: '搭配 Ref 使用自定义头',
+ customWeekdays: '自定义周几',
},
'zh-TW': {
single: '選擇單個日期',
@@ -50,6 +52,7 @@ const CalendarDemo = () => {
confirm: '確定',
ref: '使用 Ref 上的方法',
title: '搭配 Ref 使用自定義头',
+ customWeekdays: '自定義周几',
},
'en-US': {
single: 'Select a single date',
@@ -66,6 +69,7 @@ const CalendarDemo = () => {
confirm: 'Confirm',
ref: 'Use ref',
title: 'Custom title',
+ customWeekdays: 'Custom weekdays',
},
})
@@ -97,6 +101,8 @@ const CalendarDemo = () => {
{translated.title}
+ {translated.customWeekdays}
+
>
)
diff --git a/src/packages/calendarcard/demos/taro/demo13.tsx b/src/packages/calendarcard/demos/taro/demo13.tsx
new file mode 100644
index 0000000000..2a9d0bb009
--- /dev/null
+++ b/src/packages/calendarcard/demos/taro/demo13.tsx
@@ -0,0 +1,24 @@
+import React, { useRef, useState } from 'react'
+import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react-taro'
+
+const date = new Date('2025-01-01')
+
+const Demo13 = () => {
+ const [dateStr, setDate] = useState(date.getMonth())
+ const onPageChange = (val: any) => {
+ console.log('onPageChange', val)
+ setDate(val.month)
+ }
+ const CalendarCardRef = useRef(null)
+
+ return (
+
+ )
+}
+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