Skip to content

Commit f339131

Browse files
Saraph1nesSaraph1nes
committed
feat(calendar): calendar增加disabledDate属性支持自定义禁用
1 parent 7f6c0fb commit f339131

File tree

7 files changed

+78
-29
lines changed

7 files changed

+78
-29
lines changed

‎packages/taro-ui-demo/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"@tarojs/runtime": "3.6.6",
6060
"@tarojs/shared": "3.6.6",
6161
"@tarojs/taro": "3.6.6",
62+
"dayjs": "^1.7.7",
6263
"taro-ui": "workspace:^"
6364
},
6465
"devDependencies": {

‎packages/taro-ui-demo/src/pages/advanced/calendar/index.tsx

+22-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import { AtButton, AtCalendar } from 'taro-ui'
3+
import dayjs from 'dayjs'
34
import { View } from '@tarojs/components'
45
import Taro from '@tarojs/taro'
56
import DocsHeader from '../../components/doc-header'
@@ -21,7 +22,8 @@ interface IndexState {
2122
[key: string]: any
2223
}
2324

24-
export default class Index extends React.Component<{}, IndexState> {
25+
interface IndexProps {}
26+
export default class Index extends React.Component<IndexProps, IndexState> {
2527
public config: Taro.PageConfig = {
2628
navigationBarTitleText: 'Taro日历组件展示'
2729
}
@@ -30,8 +32,8 @@ export default class Index extends React.Component<{}, IndexState> {
3032
super(props)
3133
this.state = {
3234
now: Date.now(),
33-
minDate: '2018/06/11',
34-
maxDate: '2020/12/12',
35+
minDate: dayjs().startOf('month').format('YYYY-MM-DD'),
36+
maxDate: dayjs().endOf('month').format('YYYY-MM-DD'),
3537
multiCurentDate: {
3638
start: Date.now()
3739
},
@@ -86,14 +88,8 @@ export default class Index extends React.Component<{}, IndexState> {
8688
}
8789

8890
public render(): JSX.Element {
89-
const {
90-
now,
91-
minDate,
92-
maxDate,
93-
mark,
94-
multiCurentDate,
95-
validDates
96-
} = this.state
91+
const { now, minDate, maxDate, mark, multiCurentDate, validDates } =
92+
this.state
9793
return (
9894
<View className='page calendar-page'>
9995
<DocsHeader title='Calendar 日历' />
@@ -211,6 +207,21 @@ export default class Index extends React.Component<{}, IndexState> {
211207
<AtCalendar validDates={validDates} />
212208
</View>
213209
</View>
210+
211+
<View className='panel'>
212+
<View className='panel__title'>禁用日期</View>
213+
<View className='panel__content'>
214+
<AtCalendar
215+
minDate={minDate}
216+
maxDate={maxDate}
217+
disabledDate={(currentDate: dayjs.Dayjs) => {
218+
// 禁用周末
219+
const currentDayOfWeek = dayjs(currentDate).day()
220+
return [0, 6].includes(currentDayOfWeek)
221+
}}
222+
/>
223+
</View>
224+
</View>
214225
</View>
215226
</View>
216227
)

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

+34-13
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,26 @@ import { AtCalendar } from "taro-ui"
105105

106106
:::
107107

108+
## 不可选择的日期
109+
110+
可以与`minDate`、`maxDate`一起使用
111+
112+
:::demo
113+
114+
```html
115+
<AtCalendar
116+
minDate={minDate}
117+
maxDate={maxDate}
118+
disabledDate={(currentDate: dayjs.Dayjs) => {
119+
// 禁用周末
120+
const currentDayOfWeek = dayjs(currentDate).day();
121+
return [0, 6].includes(currentDayOfWeek)
122+
}}
123+
/>
124+
```
125+
126+
:::
127+
108128
## AtCalendar 参数
109129

110130
```ts
@@ -116,19 +136,20 @@ interface SelectDate {
116136
}
117137
```
118138

119-
| 参数 | 说明 | 类型 | 默认值 |
120-
| ------------- | -------------- | ------------------------------- | ------------ |
121-
| currentDate | 当前的时间 | `DateArg | SelectDate` | `Date.now()` |
122-
| minDate | 最小的可选时间 | `DateArg` | - |
123-
| maxDate | 最大的可选时间 | `DateArg` | - |
124-
| isSwiper | 是否可以滑动 | `boolean` | `true` |
125-
| marks | 需要标记的时间 | `Array<{'{ value: DateArg }'}>` | `[]` |
126-
| validDates | 需要标记的有效时间 | `Array<{'{ value: DateArg }'}>` | `[]` |
127-
| format | 日期格式 | `string` | `YYYY-MM-DD` |
128-
| monthFormat | 月份格式 | `string` | `YYYY年MM月` |
129-
| hideArrow | 是否隐藏箭头 | `boolean` | `false` |
130-
| isVertical | 是否垂直滑动 | `boolean` | `false` |
131-
| isMultiSelect | 是否范围选择 | `boolean` | `false` |
139+
| 参数 | 说明 | 类型 | 默认值 |
140+
| ------------- |---------------| ------------------------------- |--------------|
141+
| currentDate | 当前的时间 | `DateArg | SelectDate` | `Date.now()` |
142+
| minDate | 最小的可选时间 | `DateArg` | - |
143+
| maxDate | 最大的可选时间 | `DateArg` | - |
144+
| disabledDate | 不可选择的日期 | `(currentDate: dayjs.Dayjs) => boolean` | - |
145+
| isSwiper | 是否可以滑动 | `boolean` | `true` |
146+
| marks | 需要标记的时间 | `Array<{'{ value: DateArg }'}>` | `[]` |
147+
| validDates | 需要标记的有效时间 | `Array<{'{ value: DateArg }'}>` | `[]` |
148+
| format | 日期格式 | `string` | `YYYY-MM-DD` |
149+
| monthFormat | 月份格式 | `string` | `YYYY年MM月` |
150+
| hideArrow | 是否隐藏箭头 | `boolean` | `false` |
151+
| isVertical | 是否垂直滑动 | `boolean` | `false` |
152+
| isMultiSelect | 是否范围选择 | `boolean` | `false` |
132153

133154
## AtCalendar 事件
134155

‎packages/taro-ui/src/components/calendar/body/index.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export default class AtCalendarBody extends React.Component<
3939
public constructor(props: AtCalendarBodyProps) {
4040
super(props)
4141
const {
42+
disabledDate,
4243
validDates,
4344
marks,
4445
format,
@@ -50,6 +51,7 @@ export default class AtCalendarBody extends React.Component<
5051
} = props
5152

5253
this.generateFunc = generateCalendarGroup({
54+
disabledDate,
5355
validDates,
5456
format,
5557
minDate,
@@ -76,6 +78,7 @@ export default class AtCalendarBody extends React.Component<
7678
nextProps: AtCalendarBodyProps
7779
): void {
7880
const {
81+
disabledDate,
7982
validDates,
8083
marks,
8184
format,
@@ -87,6 +90,7 @@ export default class AtCalendarBody extends React.Component<
8790
} = nextProps
8891

8992
this.generateFunc = generateCalendarGroup({
93+
disabledDate,
9094
validDates,
9195
format,
9296
minDate,

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

+6-3
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,18 @@ export function handleDisabled(
8787
item: Calendar.Item
8888
): Calendar.Item {
8989
const { options } = args
90-
const { _value } = item
91-
const { minDate, maxDate } = options
90+
const { _value, value } = item
91+
const { minDate, maxDate, disabledDate } = options
92+
93+
const dayjsItemDate = dayjs(value)
9294

9395
const dayjsMinDate = dayjs(minDate)
9496
const dayjsMaxDate = dayjs(maxDate)
9597

9698
item.isDisabled =
9799
!!(minDate && _value?.isBefore(dayjsMinDate)) ||
98-
!!(maxDate && _value?.isAfter(dayjsMaxDate))
100+
!!(maxDate && _value?.isAfter(dayjsMaxDate)) ||
101+
(disabledDate && disabledDate(dayjsItemDate))
99102

100103
return item
101104
}

‎packages/taro-ui/src/components/calendar/index.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ const defaultProps: AtCalendarDefaultProps = {
2323
isMultiSelect: false,
2424
format: 'YYYY-MM-DD',
2525
currentDate: Date.now(),
26-
monthFormat: 'YYYY年MM月'
26+
monthFormat: 'YYYY年MM月',
27+
disabledDate: () => false
2728
}
2829

2930
export default class AtCalendar extends React.Component<
@@ -283,7 +284,8 @@ export default class AtCalendar extends React.Component<
283284
hideArrow,
284285
isVertical,
285286
monthFormat,
286-
selectedDates
287+
selectedDates,
288+
disabledDate
287289
} = this.props as AtCalendarPropsWithDefaults
288290

289291
return (
@@ -299,6 +301,7 @@ export default class AtCalendar extends React.Component<
299301
onSelectDate={this.handleSelectDate}
300302
/>
301303
<AtCalendarBody
304+
disabledDate={disabledDate}
302305
validDates={validDates}
303306
marks={marks}
304307
format={format}

‎packages/taro-ui/types/calendar.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@ declare namespace Calendar {
6464
minDate?: DateArg
6565

6666
maxDate?: DateArg
67+
68+
disabledDate?: (currentDate: dayjs.Dayjs) => boolean
6769
}
6870

6971
export type List<T> = Array<T>
@@ -150,6 +152,8 @@ export interface AtCalendarDefaultProps {
150152
isMultiSelect: boolean
151153

152154
selectedDates: Array<Calendar.SelectedDate>
155+
156+
disabledDate: (currentDate: dayjs.Dayjs) => boolean
153157
}
154158

155159
export interface AtCalendarState {
@@ -190,6 +194,8 @@ export type AtCalendarBodyListGroup = Array<Calendar.ListInfo<Calendar.Item>>
190194
export interface AtCalendarBodyProps {
191195
format: string
192196

197+
disabledDate: (currentDate: dayjs.Dayjs) => boolean
198+
193199
validDates: Array<Calendar.ValidDate>
194200

195201
marks: Array<Calendar.Mark>

0 commit comments

Comments
 (0)