week select

assets/index.less

@@ -83,19 +83,30 @@
 
   // ====================== Week Panel ======================
   &-week-panel {
-    table {
-      tr:hover {
+    &-row {
+      &:hover {
         .@{prefix-cls}-week-panel-cell {
           background: red;
         }
       }
+
+      &-selected {
+        .@{prefix-cls}-week-panel-cell {
+          background: rgba(0, 0, 255, 0.3);
+        }
+      }
     }
 
     &-cell-week {
       font-size: 12px;
       color: #999;
       font-weight: bold;
     }
+
+    &-cell:hover > button,
+    &-cell-selected > button {
+      background: transparent;
+    }
   }
 
   // ====================== Date Panel ======================

src/panels/DatePanel/DateBody.tsx

@@ -9,23 +9,27 @@ import {
 } from '../../utils/dateUtil';
 import { Locale } from '../../interface';
 
-export interface DateBodyProps<DateType> {
+export interface DateBodyPassProps<DateType> {
+  // Used for week panel
+  prefixColumn?: (date: DateType) => React.ReactNode;
+  rowClassName?: (date: DateType) => string;
+}
+
+export interface DateBodyProps<DateType> extends DateBodyPassProps<DateType> {
   prefixCls: string;
   generateConfig: GenerateConfig<DateType>;
   value: DateType;
   viewDate: DateType;
   locale: Locale;
   rowCount: number;
   onSelect: (value: DateType) => void;
-
-  // Used for week panel
-  prefixColumn?: (date: DateType) => React.ReactNode;
 }
 
 function DateBody<DateType>({
   prefixCls,
   generateConfig,
   prefixColumn,
+  rowClassName,
   locale,
   rowCount,
   viewDate,
@@ -101,7 +105,14 @@ function DateBody<DateType>({
       );
     }
 
-    rows.push(<tr key={y}>{row}</tr>);
+    rows.push(
+      <tr
+        key={y}
+        className={classNames(rowClassName && rowClassName(startWeekDate))}
+      >
+        {row}
+      </tr>,
+    );
   }
 
   return (

src/panels/DatePanel/index.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import DateBody from './DateBody';
+import DateBody, { DateBodyPassProps } from './DateBody';
 import DateHeader from './DateHeader';
 import { PanelSharedProps } from '../../interface';
 import { WEEK_DAY_COUNT } from '../../utils/dateUtil';
 import { createKeyDownHandler } from '../../utils/uiUtil';
 
 const DATE_ROW_COUNT = 6;
 
-export interface DatePanelProps<DateType> extends PanelSharedProps<DateType> {
+export interface DatePanelProps<DateType>
+  extends PanelSharedProps<DateType>,
+    DateBodyPassProps<DateType> {
   active?: boolean;
 
   // Used for week panel
   panelName?: string;
-  prefixColumn?: (date: DateType) => React.ReactNode;
 }
 
 function DatePanel<DateType>(props: DatePanelProps<DateType>) {

src/panels/WeekPanel/index.tsx

@@ -2,12 +2,14 @@ import * as React from 'react';
 import classNames from 'classnames';
 import DatePanel from '../DatePanel';
 import { PanelSharedProps } from '../../interface';
+import { isSameWeek } from '../../utils/dateUtil';
 
 export type WeekPanelProps<DateType> = PanelSharedProps<DateType>;
 
 function WeekPanel<DateType>(props: WeekPanelProps<DateType>) {
-  const { prefixCls, generateConfig, locale } = props;
+  const { prefixCls, generateConfig, locale, value } = props;
 
+  // Render additional column
   const cellPrefixCls = `${prefixCls}-week-panel-cell`;
   const prefixColumn = (date: DateType) => (
     <td
@@ -18,7 +20,26 @@ function WeekPanel<DateType>(props: WeekPanelProps<DateType>) {
     </td>
   );
 
-  return <DatePanel {...props} panelName="week" prefixColumn={prefixColumn} />;
+  // Add row className
+  const rowPrefixCls = `${prefixCls}-week-panel-row`;
+  const rowClassName = (date: DateType) =>
+    classNames(rowPrefixCls, {
+      [`${rowPrefixCls}-selected`]: isSameWeek(
+        generateConfig,
+        locale.locale,
+        value,
+        date,
+      ),
+    });
+
+  return (
+    <DatePanel
+      {...props}
+      panelName="week"
+      prefixColumn={prefixColumn}
+      rowClassName={rowClassName}
+    />
+  );
 }
 
 export default WeekPanel;

src/utils/dateUtil.ts

@@ -51,6 +51,25 @@ export function isSameTime<DateType>(
   );
 }
 
+export function isSameWeek<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  locale: string,
+  date1?: DateType | null,
+  date2?: DateType | null,
+) {
+  if (!date1 && !date2) {
+    return true;
+  }
+  if (!date1 || !date2) {
+    return false;
+  }
+
+  return (
+    generateConfig.locale.getWeek(locale, date1) ===
+    generateConfig.locale.getWeek(locale, date2)
+  );
+}
+
 export function isEqual<DateType>(
   generateConfig: GenerateConfig<DateType>,
   value1?: DateType | null,