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