Feat calendar range (#1256)

* feat: 日历只展示传入范围内的日期 * feat: 日历只展示传入范围内的日期 * feat: 日历只展示传入范围内的日期
ant-design · Aug 2, 2024 · d8e1dd1 · d8e1dd1
1 parent 18715c6
commit d8e1dd1
Show file tree

Hide file tree

Showing 28 changed files with 253 additions and 89 deletions.
diff --git a/compiled/alipay/demo/pages/Calendar/index.axml b/compiled/alipay/demo/pages/Calendar/index.axml
@@ -58,6 +58,7 @@
   <view slot="content">
     <ant-calendar
       monthRange="{{demo8.monthRange}}"
+      showSelectableDatesOnly
       onFormatter="{{demo8Formatter ? demo8Formatter : 'demo8Formatter'}}"
       onMonthFormatter="{{demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter'}}"
     ></ant-calendar>

diff --git a/compiled/alipay/demo/pages/Calendar/index.js b/compiled/alipay/demo/pages/Calendar/index.js
@@ -16,9 +16,6 @@ function demo8Formatter(cell) {
         topClassName = isOdd ? 'odd' : 'even';
     }
     return {
-        className: dayjs(cell.time).isAfter(dayjs().add(1, 'M'), 'd')
-            ? 'hidden'
-            : '',
         top: {
             className: topClassName,
             label: isOdd ? '奇数' : '偶数',
@@ -30,7 +27,7 @@ function demo8Formatter(cell) {
 }
 function demo8MonthFormatter(month) {
     return {
-        className: dayjs(month).isAfter(dayjs()) ? 'shrink' : '',
+        ...month,
     };
 }
 function demoFormatter(cell, value) {

diff --git a/compiled/alipay/src/Calendar/helper.sjs b/compiled/alipay/src/Calendar/helper.sjs
@@ -3,7 +3,7 @@ function keys(obj) {
     return Object.keys(obj);
   }
 }
-function getClassName(value, index) {
+function getClassName(value, index, showSelectableDatesOnly) {
   var isSelected = value.isSelected,
     isSelectedBegin = value.isSelectedBegin,
     isSelectedEnd = value.isSelectedEnd,
@@ -12,7 +12,8 @@ function getClassName(value, index) {
     inThisMonth = value.inThisMonth,
     isToday = value.isToday,
     disabled = value.disabled,
-    className = value.className;
+    className = value.className,
+    isRange = value.isRange;
   var classNames = {
     disabled: disabled,
     today: inThisMonth && isToday,
@@ -21,7 +22,7 @@ function getClassName(value, index) {
     'selected-end': inThisMonth && isSelectedEnd,
     'selected-row-begin': inThisMonth && isRowBegin && isSelected,
     'selected-row-end': inThisMonth && isRowEnd && isSelected,
-    hidden: !inThisMonth,
+    hidden: !inThisMonth || showSelectableDatesOnly && !isRange,
     'row-end': index % 7 === 6
   };
   var result = "ant-calendar-cell ".concat(className || '');
@@ -54,8 +55,32 @@ function getMarkCellClassName(index, items) {
   }
   return 'ant-calendar-mark-cell';
 }
+function isDisplay(index, items) {
+  // 找到需要当前月需要展示的日期最大最小索引
+  var _items$reduce = items.reduce(function (res, item) {
+      // !item.inThisMonth 被隐藏掉的日期
+      // !item.isRange 不在传入范围内的日期
+      if (!(!item.inThisMonth || !item.isRange)) {
+        if (res.minIndex === null || res.maxIndex === null) {
+          res.minIndex = item.index;
+          res.maxIndex = item.index;
+        }
+        res.minIndex = Math.min(res.minIndex, item.index);
+        res.maxIndex = Math.max(res.maxIndex, item.index);
+      }
+      return res;
+    }, {
+      minIndex: null,
+      maxIndex: null
+    }),
+    minIndex = _items$reduce.minIndex,
+    maxIndex = _items$reduce.maxIndex;
+  if (maxIndex === null || maxIndex === null) return true;
+  return index >= Math.floor(minIndex / 7) * 7 && index < Math.ceil(maxIndex / 7) * 7;
+}
 export default {
   getSpaceClassName: getSpaceClassName,
   getClassName: getClassName,
-  getMarkCellClassName: getMarkCellClassName
+  getMarkCellClassName: getMarkCellClassName,
+  isDisplay: isDisplay
 };
diff --git a/compiled/alipay/src/Calendar/index.axml b/compiled/alipay/src/Calendar/index.axml
@@ -52,7 +52,10 @@
       a:for-index="index"
       a:for-item="currentMonth"
     >
-      <view class="ant-calendar-body-container {{currentMonth.className || ''}}">
+      <view
+        class="ant-calendar-body-container {{currentMonth.className || ''}}"
+        style="{{currentMonth.style || ''}}"
+      >
         <view class="ant-calendar-title-container">
           <slot name="calendarTitle">
             <view class="ant-calendar-title">{{currentMonth.title}}</view>
@@ -64,9 +67,9 @@
             a:for-index="index"
             a:for-item="item"
           >
-            <block>
+            <block a:if="{{helper.isDisplay(index, currentMonth.cells)}}">
               <view
-                class="{{helper.getClassName(item, index)}}"
+                class="{{helper.getClassName(item, index, showSelectableDatesOnly)}}"
                 id="id_{{item.time}}"
                 data-time="{{item}}"
                 onTap="clickCell"

diff --git a/compiled/alipay/src/Calendar/index.less b/compiled/alipay/src/Calendar/index.less
@@ -170,5 +170,6 @@
 
   &-cell-hidden {
     opacity: 0;
+    pointer-events: none;
   }
 }
diff --git a/compiled/alipay/src/Calendar/index.md b/compiled/alipay/src/Calendar/index.md
@@ -21,18 +21,19 @@ toc: 'content'
 
 以下为日历组件的属性及描述：
 
-| 属性                  | 说明                                           | 类型                                                        | 默认值      |
-| --------------------- | ---------------------------------------------- | ----------------------------------------------------------- | ----------- |
-| defaultValue          | 初始值                                         | CalendarValue                                               | 无          |
-| value                 | 日历选择的日期，传入后即为受控模式             | CalendarValue                                               | 无          |
-| selectionMode         | 设置选择模式，单选或者连续区间，默认为 `range` | `single` \| `range`                                         | `range`     |
-| monthRange            | 月份范围，默认为最近 3 个月                    | `[number, number]`                                          | 最近 3 个月 |
-| weekStartsOn          | 星期栏，以周几作为第一天显示。默认为 `Sunday`  | `Sunday` \| `Monday`                                        | `Sunday`    |
-| onChange              | 日期变化回调                                   | (date: CalendarValue) => void                               | 无          |
-| onFormatter           | 用于设置单元格的自定义数据                     | (cell: CellState, currentValue: CalendarValue) => CellState | 无          |
-| onMonthFormatter           | 用于设置月份的自定义数据                     | (month: any) => CellState | 无          |
-| localeText            | 国际化文案                                     | Partial`<LocaleText>`                                       | 无          |
-| changedScrollIntoView | 选中值改变后是否滚动视图                       | boolean                                                     | 无          |
+| 属性                    | 说明                                           | 类型                                                        | 默认值      |
+| ----------------------- | ---------------------------------------------- | ----------------------------------------------------------- | ----------- |
+| defaultValue            | 初始值                                         | CalendarValue                                               | 无          |
+| value                   | 日历选择的日期，传入后即为受控模式             | CalendarValue                                               | 无          |
+| selectionMode           | 设置选择模式，单选或者连续区间，默认为 `range` | `single` \| `range`                                         | `range`     |
+| monthRange              | 月份范围，默认为最近 3 个月                    | `[number, number]`                                          | 最近 3 个月 |
+| weekStartsOn            | 星期栏，以周几作为第一天显示。默认为 `Sunday`  | `Sunday` \| `Monday`                                        | `Sunday`    |
+| onChange                | 日期变化回调                                   | (date: CalendarValue) => void                               | 无          |
+| onFormatter             | 用于设置单元格的自定义数据                     | (cell: CellState, currentValue: CalendarValue) => CellState | 无          |
+| onMonthFormatter        | 用于设置月份的自定义数据                       | (month: any) => CellState                                   | 无          |
+| localeText              | 国际化文案                                     | Partial`<LocaleText>`                                       | 无          |
+| changedScrollIntoView   | 选中值改变后是否滚动视图                       | boolean                                                     | 无          |
+| showSelectableDatesOnly | 只展示在可选范围内的日期                       | boolean                                                     | false       |
 
 ### 类型
 

diff --git a/compiled/alipay/src/Calendar/index.ts b/compiled/alipay/src/Calendar/index.ts
@@ -137,11 +137,20 @@ Component(
         if (item) markItems.unshift(item);
       }
       const value = this.getValue();
-      const monthList = getMonthListFromRange(
-        dayjs(monthRange?.[0]),
-        dayjs(monthRange?.[1])
-      ).map((p) => {
-        let cells = renderCells(p, weekStartsOn, value, localeText);
+      const start = dayjs(monthRange?.[0]).startOf('d');
+      const end = dayjs(monthRange?.[1]).startOf('d');
+      const monthRangeList = getMonthListFromRange(start, end);
+      const monthList = monthRangeList.map((p) => {
+        let cells = renderCells(
+          p,
+          weekStartsOn,
+          value,
+          localeText,
+          // 如果monthRange传入异常，用内置的时间范围
+          start.isAfter(end) || start.isSame(end)
+            ? [monthRangeList[0], dayjs(monthRangeList[1]).endOf('month')]
+            : [start, end]
+        );
         if (onFormatter && typeof onFormatter === 'function') {
           cells = cells.map((o): CellState => {
             const {
@@ -153,6 +162,7 @@ Component(
               isSelectedEnd,
               isSelected,
               className,
+              isRange,
             } = o;
             const newState =
               onFormatter(
@@ -165,6 +175,7 @@ Component(
                   isSelectedEnd,
                   isSelected,
                   className,
+                  isRange,
                 },
                 value
               ) ?? {};

diff --git a/compiled/alipay/src/Calendar/props.ts b/compiled/alipay/src/Calendar/props.ts
@@ -87,6 +87,11 @@ export interface CellState {
   isRowBegin: boolean;
   isRowEnd: boolean;
   inThisMonth: boolean;
+  /**
+   * 是否在传入范围内
+   */
+  isRange: boolean;
+  index: number;
 }
 
 export type CalendarValue = number | number[];
@@ -123,6 +128,10 @@ export interface ICalendarProps extends IBaseProps {
    * 选中值改变后滚动视图
    */
   changedScrollIntoView?: boolean;
+  /**
+   * 只展示在可选范围内的日期
+   */
+  showSelectableDatesOnly?: boolean;
   /**
    * 日期变化回调
    */
@@ -165,4 +174,5 @@ export const CalendarDefaultProps = {
   onFormatter: null,
   onMonthFormatter: null,
   changedScrollIntoView: null,
+  showSelectableDatesOnly: false,
 };
diff --git a/compiled/alipay/src/Calendar/utils.ts b/compiled/alipay/src/Calendar/utils.ts
@@ -54,8 +54,11 @@ export function renderCells(
   cellsMonth: Dayjs,
   weekStartsOn: string,
   value: CalendarValue,
-  localeText: LocaleText
+  localeText: LocaleText,
+  monthRangeList: Dayjs[]
 ): CellState[] {
+  const [rangeStartDate, rangeEndDate] = monthRangeList;
+
   let rowBeginDay = 0;
   let rowEndDay = 6;
   if (weekStartsOn === 'Monday') {
@@ -64,7 +67,7 @@ export function renderCells(
   }
   const dates = getDate(cellsMonth, weekStartsOn);
   if (!value) {
-    return dates.map((d): CellState => {
+    return dates.map((d, index): CellState => {
       const isToday = dayjs().isSame(d, 'day');
       const isRowBegin =
         d.isSame(cellsMonth.startOf('month'), 'date') ||
@@ -80,6 +83,7 @@ export function renderCells(
       }
 
       return {
+        index,
         disabled: false,
         time: d.toDate().getTime(),
         date: d.get('date'),
@@ -90,6 +94,9 @@ export function renderCells(
         inThisMonth: d.month() === cellsMonth.month(),
         isRowBegin,
         isRowEnd,
+        isRange:
+          (d.isSame(rangeStartDate) || d.isAfter(rangeStartDate)) &&
+          (d.isSame(rangeEndDate) || d.isBefore(rangeEndDate)),
       };
     });
   }
@@ -105,7 +112,7 @@ export function renderCells(
     selectEnd = dayjs(value);
   }
 
-  return dates.map((d): CellState => {
+  return dates.map((d, index): CellState => {
     const isToday = dayjs().isSame(d, 'day');
     const isRowBegin =
       d.isSame(cellsMonth.startOf('month'), 'date') || d.day() === rowBeginDay;
@@ -136,6 +143,7 @@ export function renderCells(
     }
 
     return {
+      index,
       disabled: false,
       time,
       date: d.get('date'),
@@ -146,6 +154,9 @@ export function renderCells(
       inThisMonth,
       isRowBegin,
       isRowEnd,
+      isRange:
+        (d.isSame(rangeStartDate) || d.isAfter(rangeStartDate)) &&
+        (d.isSame(rangeEndDate) || d.isBefore(rangeEndDate)),
     };
   });
 }

diff --git a/compiled/wechat/demo/pages/Calendar/index.js b/compiled/wechat/demo/pages/Calendar/index.js
@@ -16,9 +16,6 @@ function demo8Formatter(cell) {
         topClassName = isOdd ? 'odd' : 'even';
     }
     return {
-        className: dayjs(cell.time).isAfter(dayjs().add(1, 'M'), 'd')
-            ? 'hidden'
-            : '',
         top: {
             className: topClassName,
             label: isOdd ? '奇数' : '偶数',
@@ -30,7 +27,7 @@ function demo8Formatter(cell) {
 }
 function demo8MonthFormatter(month) {
     return {
-        className: dayjs(month).isAfter(dayjs()) ? 'shrink' : '',
+        ...month,
     };
 }
 function demoFormatter(cell, value) {

diff --git a/compiled/wechat/demo/pages/Calendar/index.wxml b/compiled/wechat/demo/pages/Calendar/index.wxml
@@ -54,6 +54,7 @@
   <view slot="content">
     <ant-calendar
       monthRange="{{demo8.monthRange}}"
+      showSelectableDatesOnly
       onFormatter="{{demo8Formatter ? demo8Formatter : 'demo8Formatter'}}"
       onMonthFormatter="{{demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter'}}"
     ></ant-calendar>

diff --git a/compiled/wechat/src/Calendar/helper.wxs b/compiled/wechat/src/Calendar/helper.wxs
@@ -3,7 +3,7 @@ function keys(obj) {
     return item.split(':')[0];
   });
 }
-function getClassName(value, index) {
+function getClassName(value, index, showSelectableDatesOnly) {
   var isSelected = value.isSelected,
     isSelectedBegin = value.isSelectedBegin,
     isSelectedEnd = value.isSelectedEnd,
@@ -12,7 +12,8 @@ function getClassName(value, index) {
     inThisMonth = value.inThisMonth,
     isToday = value.isToday,
     disabled = value.disabled,
-    className = value.className;
+    className = value.className,
+    isRange = value.isRange;
   var classNames = {
     disabled: disabled,
     today: inThisMonth && isToday,
@@ -21,7 +22,7 @@ function getClassName(value, index) {
     'selected-end': inThisMonth && isSelectedEnd,
     'selected-row-begin': inThisMonth && isRowBegin && isSelected,
     'selected-row-end': inThisMonth && isRowEnd && isSelected,
-    hidden: !inThisMonth,
+    hidden: !inThisMonth || showSelectableDatesOnly && !isRange,
     'row-end': index % 7 === 6
   };
   var result = "ant-calendar-cell ".concat(className || '');
@@ -54,8 +55,32 @@ function getMarkCellClassName(index, items) {
   }
   return 'ant-calendar-mark-cell';
 }
+function isDisplay(index, items) {
+  // 找到需要当前月需要展示的日期最大最小索引
+  var _items$reduce = items.reduce(function (res, item) {
+      // !item.inThisMonth 被隐藏掉的日期
+      // !item.isRange 不在传入范围内的日期
+      if (!(!item.inThisMonth || !item.isRange)) {
+        if (res.minIndex === null || res.maxIndex === null) {
+          res.minIndex = item.index;
+          res.maxIndex = item.index;
+        }
+        res.minIndex = Math.min(res.minIndex, item.index);
+        res.maxIndex = Math.max(res.maxIndex, item.index);
+      }
+      return res;
+    }, {
+      minIndex: null,
+      maxIndex: null
+    }),
+    minIndex = _items$reduce.minIndex,
+    maxIndex = _items$reduce.maxIndex;
+  if (maxIndex === null || maxIndex === null) return true;
+  return index >= Math.floor(minIndex / 7) * 7 && index < Math.ceil(maxIndex / 7) * 7;
+}
 module.exports = {
   getSpaceClassName: getSpaceClassName,
   getClassName: getClassName,
-  getMarkCellClassName: getMarkCellClassName
+  getMarkCellClassName: getMarkCellClassName,
+  isDisplay: isDisplay
 };