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

Author: Saraph1nes

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

@@ -32,8 +32,8 @@ export default class Index extends React.Component<IndexProps, 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()
       },
@@ -212,13 +212,12 @@ export default class Index extends React.Component<IndexProps, IndexState> {
             <View className='panel__title'>禁用日期</View>
             <View className='panel__content'>
               <AtCalendar
+                minDate={minDate}
+                maxDate={maxDate}
                 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')
-                  )
+                  // 禁用周末
+                  const currentDayOfWeek = dayjs(currentDate).day()
+                  return [0, 6].includes(currentDayOfWeek)
                 }}
               />
             </View>

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

packages/taro-ui/config/rollup.config.js

@@ -9,7 +9,8 @@ import iconsMaker from './iconsMaker.js'
 
 iconsMaker('../rn/assets/iconfont.svg')
 
-const resolveFile = path => NodePath.resolve(__dirname, '..', path)
+const resolveFile = path =>
+  NodePath.resolve(__dirname, '..', path).split(NodePath.sep).join('/')
 
 const externalPackages = [
   'react',

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

@@ -87,32 +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))
-
-  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)
-  }
+    !!(maxDate && _value?.isAfter(dayjsMaxDate)) ||
+    (disabledDate && disabledDate(dayjsItemDate))
 
   return item
 }
@@ -138,10 +124,4 @@ export function handleValid(
   return item
 }
 
-export default [
-  handleActive,
-  handleMarks,
-  handleDisabled,
-  handleValid,
-  handleDisabledDate
-]
+export default [handleActive, handleMarks, handleDisabled, handleValid]