(props: PanelBod
// Render
const inner = {getCellText(currentDate)}
;
+ // Week panel uses isSameWeek which matches all 7 days in a row — use isSameDate
+ // so only the specific navigated cell gets tabIndex=0.
+ const isFocused =
+ !!focusedDate &&
+ (type === 'week'
+ ? isSameDate(generateConfig, currentDate, focusedDate)
+ : isSame(generateConfig, locale, currentDate, focusedDate, type));
+ const isSelected =
+ !hoverRangeValue &&
+ // WeekPicker use row instead
+ type !== 'week' &&
+ matchValues(currentDate);
+
rowNode.push(
@@ -133,11 +189,7 @@ export default function PanelBody(props: PanelBod
[`${cellPrefixCls}-in-range`]: inRange && !rangeStart && !rangeEnd,
[`${cellPrefixCls}-range-start`]: rangeStart,
[`${cellPrefixCls}-range-end`]: rangeEnd,
- [`${prefixCls}-cell-selected`]:
- !hoverRangeValue &&
- // WeekPicker use row instead
- type !== 'week' &&
- matchValues(currentDate),
+ [`${prefixCls}-cell-selected`]: isSelected,
...getCellClassName(currentDate),
})}
style={styles.item}
@@ -161,6 +213,37 @@ export default function PanelBody(props: PanelBod
onHover?.(null);
}
}}
+ onKeyDown={(e) => {
+ switch (e.key) {
+ case 'ArrowLeft':
+ e.preventDefault();
+ pendingFocusRef.current = true;
+ onCellFocusedDateChange(getCellDate(currentDate, -1));
+ break;
+ case 'ArrowRight':
+ e.preventDefault();
+ pendingFocusRef.current = true;
+ onCellFocusedDateChange(getCellDate(currentDate, 1));
+ break;
+ case 'ArrowUp':
+ e.preventDefault();
+ pendingFocusRef.current = true;
+ onCellFocusedDateChange(getCellDate(currentDate, -colNum));
+ break;
+ case 'ArrowDown':
+ e.preventDefault();
+ pendingFocusRef.current = true;
+ onCellFocusedDateChange(getCellDate(currentDate, colNum));
+ break;
+ case 'Enter':
+ case ' ':
+ e.preventDefault();
+ if (!disabled) {
+ onSelect(currentDate);
+ }
+ break;
+ }
+ }}
>
{cellRender
? cellRender(currentDate, {
@@ -176,7 +259,7 @@ export default function PanelBody(props: PanelBod
}
rows.push(
-
+
{rowNode}
,
);
@@ -185,9 +268,14 @@ export default function PanelBody(props: PanelBod
// ============================== Render ==============================
return (
-
+
{headerCells && (
-
+
{headerCells}
)}
diff --git a/src/PickerPanel/PanelHeader.tsx b/src/PickerPanel/PanelHeader.tsx
index 407489a59..41e6facec 100644
--- a/src/PickerPanel/PanelHeader.tsx
+++ b/src/PickerPanel/PanelHeader.tsx
@@ -7,6 +7,13 @@ const HIDDEN_STYLE: React.CSSProperties = {
visibility: 'hidden',
};
+export interface PanelHeaderLabels {
+ superPrev?: string;
+ prev?: string;
+ next?: string;
+ superNext?: string;
+}
+
export interface HeaderProps {
offset?: (distance: number, date: DateType) => DateType;
superOffset?: (distance: number, date: DateType) => DateType;
@@ -16,6 +23,8 @@ export interface HeaderProps {
getStart?: (date: DateType) => DateType;
getEnd?: (date: DateType) => DateType;
+ labels?: PanelHeaderLabels;
+
children?: React.ReactNode;
}
@@ -28,6 +37,8 @@ function PanelHeader(props: HeaderProps) {
getStart,
getEnd,
+ labels,
+
children,
} = props;
@@ -124,9 +135,8 @@ function PanelHeader(props: HeaderProps) {
{superOffset && (
|