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>