feat(calendar): calendar增加disabledDate属性支持自定义禁用

NervJS · Jan 19, 2024 · f339131 · f339131
1 parent 7f6c0fb
commit f339131
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 29 deletions.
diff --git a/packages/taro-ui-demo/package.json b/packages/taro-ui-demo/package.json
@@ -59,6 +59,7 @@
     "@tarojs/runtime": "3.6.6",
     "@tarojs/shared": "3.6.6",
     "@tarojs/taro": "3.6.6",
+    "dayjs": "^1.7.7",
     "taro-ui": "workspace:^"
   },
   "devDependencies": {

diff --git a/packages/taro-ui-demo/src/pages/advanced/calendar/index.tsx b/packages/taro-ui-demo/src/pages/advanced/calendar/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { AtButton, AtCalendar } from 'taro-ui'
+import dayjs from 'dayjs'
 import { View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import DocsHeader from '../../components/doc-header'
@@ -21,7 +22,8 @@ interface IndexState {
   [key: string]: any
 }
 
-export default class Index extends React.Component<{}, IndexState> {
+interface IndexProps {}
+export default class Index extends React.Component<IndexProps, IndexState> {
   public config: Taro.PageConfig = {
     navigationBarTitleText: 'Taro日历组件展示'
   }
@@ -30,8 +32,8 @@ export default class Index extends React.Component<{}, IndexState> {
     super(props)
     this.state = {
       now: Date.now(),
-      minDate: '2018/06/11',
-      maxDate: '2020/12/12',
+      minDate: dayjs().startOf('month').format('YYYY-MM-DD'),
+      maxDate: dayjs().endOf('month').format('YYYY-MM-DD'),
       multiCurentDate: {
         start: Date.now()
       },
@@ -86,14 +88,8 @@ export default class Index extends React.Component<{}, IndexState> {
   }
 
   public render(): JSX.Element {
-    const {
-      now,
-      minDate,
-      maxDate,
-      mark,
-      multiCurentDate,
-      validDates
-    } = this.state
+    const { now, minDate, maxDate, mark, multiCurentDate, validDates } =
+      this.state
     return (
       <View className='page calendar-page'>
         <DocsHeader title='Calendar 日历' />
@@ -211,6 +207,21 @@ export default class Index extends React.Component<{}, IndexState> {
               <AtCalendar validDates={validDates} />
             </View>
           </View>
+
+          <View className='panel'>
+            <View className='panel__title'>禁用日期</View>
+            <View className='panel__content'>
+              <AtCalendar
+                minDate={minDate}
+                maxDate={maxDate}
+                disabledDate={(currentDate: dayjs.Dayjs) => {
+                  // 禁用周末
+                  const currentDayOfWeek = dayjs(currentDate).day()
+                  return [0, 6].includes(currentDayOfWeek)
+                }}
+              />
+            </View>
+          </View>
         </View>
       </View>
     )

diff --git a/packages/taro-ui-docs/markdown/calendar.md b/packages/taro-ui-docs/markdown/calendar.md
@@ -105,6 +105,26 @@ import { AtCalendar } from "taro-ui"
 
 :::
 
+## 不可选择的日期
+
+可以与`minDate`、`maxDate`一起使用
+
+:::demo
+
+```html
+<AtCalendar
+  minDate={minDate}
+  maxDate={maxDate}
+  disabledDate={(currentDate: dayjs.Dayjs) => {
+    // 禁用周末
+    const currentDayOfWeek = dayjs(currentDate).day();
+    return [0, 6].includes(currentDayOfWeek)
+  }}
+/>
+```
+
+:::
+
 ## AtCalendar 参数
 
 ```ts
@@ -116,19 +136,20 @@ interface SelectDate {
 }
 ```
 
-| 参数          | 说明           | 类型                            | 默认值       |
-| ------------- | -------------- | ------------------------------- | ------------ |
-| currentDate   | 当前的时间     | `DateArg | SelectDate`          | `Date.now()` |
-| minDate       | 最小的可选时间 | `DateArg`                       | -            |
-| maxDate       | 最大的可选时间 | `DateArg`                       | -            |
-| isSwiper      | 是否可以滑动   | `boolean`                       | `true`       |
-| marks         | 需要标记的时间 | `Array<{'{ value: DateArg }'}>` | `[]`         |
-| validDates    | 需要标记的有效时间 | `Array<{'{ value: DateArg }'}>` | `[]`      |
-| format        | 日期格式       | `string`                        | `YYYY-MM-DD` |
-| monthFormat   | 月份格式       | `string`                        | `YYYY年MM月` |
-| hideArrow     | 是否隐藏箭头   | `boolean`                       | `false`      |
-| isVertical    | 是否垂直滑动   | `boolean`                       | `false`      |
-| isMultiSelect | 是否范围选择   | `boolean`                       | `false`      |
+| 参数          | 说明            | 类型                            | 默认值          |
+| ------------- |---------------| ------------------------------- |--------------|
+| currentDate   | 当前的时间         | `DateArg | SelectDate`  | `Date.now()` |
+| minDate       | 最小的可选时间       | `DateArg`                       | -            |
+| maxDate       | 最大的可选时间       | `DateArg`                       | -            |
+| disabledDate    | 不可选择的日期 | `(currentDate: dayjs.Dayjs) => boolean` | -            |
+| isSwiper      | 是否可以滑动        | `boolean`                       | `true`       |
+| marks         | 需要标记的时间       | `Array<{'{ value: DateArg }'}>` | `[]`         |
+| validDates    | 需要标记的有效时间     | `Array<{'{ value: DateArg }'}>` | `[]`         |
+| format        | 日期格式          | `string`                        | `YYYY-MM-DD` |
+| monthFormat   | 月份格式          | `string`                        | `YYYY年MM月`   |
+| hideArrow     | 是否隐藏箭头        | `boolean`                       | `false`      |
+| isVertical    | 是否垂直滑动        | `boolean`                       | `false`      |
+| isMultiSelect | 是否范围选择        | `boolean`                       | `false`      |
 
 ## AtCalendar 事件
 

diff --git a/packages/taro-ui/src/components/calendar/body/index.tsx b/packages/taro-ui/src/components/calendar/body/index.tsx
@@ -39,6 +39,7 @@ export default class AtCalendarBody extends React.Component<
   public constructor(props: AtCalendarBodyProps) {
     super(props)
     const {
+      disabledDate,
       validDates,
       marks,
       format,
@@ -50,6 +51,7 @@ export default class AtCalendarBody extends React.Component<
     } = props
 
     this.generateFunc = generateCalendarGroup({
+      disabledDate,
       validDates,
       format,
       minDate,
@@ -76,6 +78,7 @@ export default class AtCalendarBody extends React.Component<
     nextProps: AtCalendarBodyProps
   ): void {
     const {
+      disabledDate,
       validDates,
       marks,
       format,
@@ -87,6 +90,7 @@ export default class AtCalendarBody extends React.Component<
     } = nextProps
 
     this.generateFunc = generateCalendarGroup({
+      disabledDate,
       validDates,
       format,
       minDate,

diff --git a/packages/taro-ui/src/components/calendar/common/plugins.ts b/packages/taro-ui/src/components/calendar/common/plugins.ts
@@ -87,15 +87,18 @@ export function handleDisabled(
   item: Calendar.Item
 ): Calendar.Item {
   const { options } = args
-  const { _value } = item
-  const { minDate, maxDate } = options
+  const { _value, value } = item
+  const { minDate, maxDate, disabledDate } = options
+
+  const dayjsItemDate = dayjs(value)
 
   const dayjsMinDate = dayjs(minDate)
   const dayjsMaxDate = dayjs(maxDate)
 
   item.isDisabled =
     !!(minDate && _value?.isBefore(dayjsMinDate)) ||
-    !!(maxDate && _value?.isAfter(dayjsMaxDate))
+    !!(maxDate && _value?.isAfter(dayjsMaxDate)) ||
+    (disabledDate && disabledDate(dayjsItemDate))
 
   return item
 }

diff --git a/packages/taro-ui/src/components/calendar/index.tsx b/packages/taro-ui/src/components/calendar/index.tsx
@@ -23,7 +23,8 @@ const defaultProps: AtCalendarDefaultProps = {
   isMultiSelect: false,
   format: 'YYYY-MM-DD',
   currentDate: Date.now(),
-  monthFormat: 'YYYY年MM月'
+  monthFormat: 'YYYY年MM月',
+  disabledDate: () => false
 }
 
 export default class AtCalendar extends React.Component<
@@ -283,7 +284,8 @@ export default class AtCalendar extends React.Component<
       hideArrow,
       isVertical,
       monthFormat,
-      selectedDates
+      selectedDates,
+      disabledDate
     } = this.props as AtCalendarPropsWithDefaults
 
     return (
@@ -299,6 +301,7 @@ export default class AtCalendar extends React.Component<
           onSelectDate={this.handleSelectDate}
         />
         <AtCalendarBody
+          disabledDate={disabledDate}
           validDates={validDates}
           marks={marks}
           format={format}

diff --git a/packages/taro-ui/types/calendar.d.ts b/packages/taro-ui/types/calendar.d.ts
@@ -64,6 +64,8 @@ declare namespace Calendar {
     minDate?: DateArg
 
     maxDate?: DateArg
+
+    disabledDate?: (currentDate: dayjs.Dayjs) => boolean
   }
 
   export type List<T> = Array<T>
@@ -150,6 +152,8 @@ export interface AtCalendarDefaultProps {
   isMultiSelect: boolean
 
   selectedDates: Array<Calendar.SelectedDate>
+
+  disabledDate: (currentDate: dayjs.Dayjs) => boolean
 }
 
 export interface AtCalendarState {
@@ -190,6 +194,8 @@ export type AtCalendarBodyListGroup = Array<Calendar.ListInfo<Calendar.Item>>
 export interface AtCalendarBodyProps {
   format: string
 
+  disabledDate: (currentDate: dayjs.Dayjs) => boolean
+
   validDates: Array<Calendar.ValidDate>
 
   marks: Array<Calendar.Mark>