feat: Year & Month range picker

Author: zombieJ

examples/range.tsx

@@ -70,7 +70,7 @@ export default () => {
         </div>
 
         <div style={{ margin: '0 8px' }}>
-          <h3>Basic</h3>
+          <h3>Focus</h3>
           <RangePicker<Moment>
             {...sharedProps}
             locale={zhCN}
@@ -87,11 +87,22 @@ export default () => {
             Focus!
           </button>
         </div>
+
         <div style={{ margin: '0 8px' }}>
-          <h3>Basic</h3>
+          <h3>Year</h3>
           <RangePicker<Moment> {...sharedProps} locale={zhCN} picker="year" />
         </div>
 
+        <div style={{ margin: '0 8px' }}>
+          <h3>Month</h3>
+          <RangePicker<Moment> {...sharedProps} locale={zhCN} picker="month" />
+        </div>
+
+        <div style={{ margin: '0 8px' }}>
+          <h3>Week</h3>
+          <RangePicker<Moment> {...sharedProps} locale={zhCN} picker="week" />
+        </div>
+
         <div style={{ margin: '0 8px' }}>
           <h3>Allow Empty</h3>
           <RangePicker<Moment>

src/RangePicker.tsx

@@ -380,6 +380,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     const startValue = getValue(values, 0);
     let endValue = getValue(values, 1);
 
+    // Clean up end date when start date is after end date
     if (
       startValue &&
       endValue &&
@@ -388,6 +389,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     ) {
       values = [startValue, null];
       endValue = null;
+
+      setViewDates(updateValues(viewDates, startValue, 1));
     }
 
     setSelectedValue(values);

src/hooks/useCellClassName.ts

@@ -19,8 +19,8 @@ export default function useCellClassName<DateType>({
   ) => boolean;
   rangedValue?: RangeValue<DateType>;
   hoverRangedValue?: RangeValue<DateType>;
-  today?: DateType;
-  value?: DateType;
+  today?: NullableDateType<DateType>;
+  value?: NullableDateType<DateType>;
 }) {
   function getClassName(currentDate: DateType) {
     return {

src/panels/DatePanel/DateBody.tsx

@@ -81,8 +81,8 @@ function DateBody<DateType>({
     today,
     value,
     generateConfig,
-    rangedValue,
-    hoverRangedValue,
+    rangedValue: prefixColumn ? null : rangedValue,
+    hoverRangedValue: prefixColumn ? null : hoverRangedValue,
     isSameCell: (current, target) =>
       isSameDate(generateConfig, current, target),
   });

src/panels/MonthPanel/MonthBody.tsx

@@ -4,6 +4,8 @@ import { GenerateConfig } from '../../generate';
 import { Locale } from '../../interface';
 import { isSameMonth } from '../../utils/dateUtil';
 import PanelContext from '../../PanelContext';
+import RangeContext from '../../RangeContext';
+import useCellClassName from '../../hooks/useCellClassName';
 
 export const MONTH_COL_COUNT = 3;
 const MONTH_ROW_COUNT = 4;
@@ -34,10 +36,22 @@ function MonthBody<DateType>({
   monthCellRender,
   onSelect,
 }: MonthBodyProps<DateType>) {
+  const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
   const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext);
 
   const monthPrefixCls = `${prefixCls}-cell`;
+
+  // =============================== Month ===============================
   const rows: React.ReactNode[] = [];
+  const getCellClassName = useCellClassName({
+    cellPrefixCls: monthPrefixCls,
+    value,
+    generateConfig,
+    rangedValue,
+    hoverRangedValue,
+    isSameCell: (current, target) =>
+      isSameMonth(generateConfig, current, target),
+  });
 
   const monthsLocale: string[] =
     locale.shortMonths ||
@@ -71,6 +85,7 @@ function MonthBody<DateType>({
               value,
               monthDate,
             ),
+            ...getCellClassName(monthDate),
           })}
           onClick={() => {
             if (!disabled) {

src/panels/YearPanel/YearBody.tsx

@@ -4,6 +4,9 @@ import { GenerateConfig } from '../../generate';
 import { YEAR_DECADE_COUNT } from '.';
 import { Locale, NullableDateType } from '../../interface';
 import PanelContext from '../../PanelContext';
+import useCellClassName from '../../hooks/useCellClassName';
+import { isSameYear } from '../../utils/dateUtil';
+import RangeContext from '../../RangeContext';
 
 export const YEAR_COL_COUNT = 3;
 const YEAR_ROW_COUNT = 4;
@@ -27,12 +30,23 @@ function YearBody<DateType>({
   disabledDate,
   onSelect,
 }: YearBodyProps<DateType>) {
+  const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
   const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext);
 
   const yearPrefixCls = `${prefixCls}-cell`;
+
+  // =============================== Year ===============================
   const rows: React.ReactNode[] = [];
+  const getCellClassName = useCellClassName<DateType>({
+    cellPrefixCls: yearPrefixCls,
+    value,
+    generateConfig,
+    rangedValue,
+    hoverRangedValue,
+    isSameCell: (current, target) =>
+      isSameYear(generateConfig, current, target),
+  });
 
-  const valueYearNumber = value ? generateConfig.getYear(value) : null;
   const yearNumber = generateConfig.getYear(viewDate);
   const startYear =
     Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT;
@@ -60,8 +74,7 @@ function YearBody<DateType>({
             [`${yearPrefixCls}-disabled`]: disabled,
             [`${yearPrefixCls}-in-view`]:
               startYear <= currentYearNumber && currentYearNumber <= endYear,
-            [`${yearPrefixCls}-selected`]:
-              currentYearNumber === valueYearNumber,
+            ...getCellClassName(yearDate),
           })}
           onClick={() => {
             if (!disabled) {