feat(calendar): add disabledDate attribute to the calendar component

Author: Saraph1nes

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": {

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日历组件展示'
   }
@@ -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,22 @@ 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
+                disabledDate={(currentDate: dayjs.Dayjs) => {
+                  const yesterday = dayjs().subtract(1, 'day')
+                  const tomorrow = dayjs().add(1, 'day')
+                  return (
+                    dayjs(currentDate).isSame(yesterday, 'day') ||
+                    dayjs(currentDate).isSame(tomorrow, 'day')
+                  )
+                }}
+              />
+            </View>
+          </View>
         </View>
       </View>
     )

packages/taro-ui-docs/markdown/calendar.md

@@ -116,19 +116,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 事件
 

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,

packages/taro-ui/src/components/calendar/common/plugins.ts

@@ -100,6 +100,23 @@ export function handleDisabled(
   return item
 }
 
+export function handleDisabledDate(
+  args: PluginArg,
+  item: Calendar.Item
+): Calendar.Item {
+  const { options } = args
+  const { value } = item
+  const { disabledDate } = options
+
+  const curDate = dayjs(value)
+
+  if (value && disabledDate) {
+    item.isDisabled = disabledDate(curDate)
+  }
+
+  return item
+}
+
 export function handleValid(
   args: PluginArg,
   item: Calendar.Item
@@ -121,4 +138,10 @@ export function handleValid(
   return item
 }
 
-export default [handleActive, handleMarks, handleDisabled, handleValid]
+export default [
+  handleActive,
+  handleMarks,
+  handleDisabled,
+  handleValid,
+  handleDisabledDate
+]

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}

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>