From f339131de9bef1dc49c07c967426f836f174ce26 Mon Sep 17 00:00:00 2001 From: xiayuxuan Date: Fri, 19 Jan 2024 01:29:48 +0800 Subject: [PATCH] =?UTF-8?q?feat(calendar):=20calendar=E5=A2=9E=E5=8A=A0dis?= =?UTF-8?q?abledDate=E5=B1=9E=E6=80=A7=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E7=A6=81=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-ui-demo/package.json | 1 + .../src/pages/advanced/calendar/index.tsx | 33 ++++++++----- packages/taro-ui-docs/markdown/calendar.md | 47 ++++++++++++++----- .../src/components/calendar/body/index.tsx | 4 ++ .../src/components/calendar/common/plugins.ts | 9 ++-- .../taro-ui/src/components/calendar/index.tsx | 7 ++- packages/taro-ui/types/calendar.d.ts | 6 +++ 7 files changed, 78 insertions(+), 29 deletions(-) diff --git a/packages/taro-ui-demo/package.json b/packages/taro-ui-demo/package.json index 1e56d47ac..72395b982 100644 --- 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 index a946dabad..2994e7ebf 100644 --- 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 { 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 ( @@ -211,6 +207,21 @@ export default class Index extends React.Component<{}, IndexState> { + + + 禁用日期 + + { + // 禁用周末 + const currentDayOfWeek = dayjs(currentDate).day() + return [0, 6].includes(currentDayOfWeek) + }} + /> + + ) diff --git a/packages/taro-ui-docs/markdown/calendar.md b/packages/taro-ui-docs/markdown/calendar.md index a2967d267..395afd9e8 100644 --- 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 + { + // 禁用周末 + 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 index b2c754554..a107d4516 100644 --- 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 index 85d6dcbe0..cf68d60f8 100644 --- 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 index ca522abc1..bc13e94fe 100644 --- 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} /> boolean } export type List = Array @@ -150,6 +152,8 @@ export interface AtCalendarDefaultProps { isMultiSelect: boolean selectedDates: Array + + disabledDate: (currentDate: dayjs.Dayjs) => boolean } export interface AtCalendarState { @@ -190,6 +194,8 @@ export type AtCalendarBodyListGroup = Array> export interface AtCalendarBodyProps { format: string + disabledDate: (currentDate: dayjs.Dayjs) => boolean + validDates: Array marks: Array