fix: [date-picker]disabledData增加info参数 fix kingdee#825

components/date-picker/__tests__/index.test.tsx

@@ -600,4 +600,30 @@ describe('date-picker', () => {
     expect(wrapper.find('input').at(0).props().value).toBe('')
     expect(wrapper.find('.kd-date-picker-calendar-text').at(0).text()).not.toBe('NaN')
   })
+
+  // 20. disabledData select
+  it('disabledData select', () => {
+    const disabledDate = (date: any, info: any) => {
+      const disDate = new Date('2020-12-28')
+      if (info && info?.panelType === 'year') {
+        return date && date.getFullYear() < disDate.getFullYear()
+      }
+      if (info && info?.panelType === 'month') {
+        return date && date.getMonth() < disDate.getMonth()
+      }
+      return date && date < disDate
+    }
+    const wrapper = mount(<DatePicker open disabledDate={disabledDate} defaultValue={new Date('2021-01-29')} />)
+
+    // year
+    wrapper.find('.kd-date-picker-header-text-inner').at(0).simulate('click')
+    const item = wrapper.find('.kd-date-picker-year-item').at(9)
+    expect(item.props().className).toEqual('kd-date-picker-year-item')
+    wrapper.find('.kd-date-picker-year-text').at(9).simulate('click')
+    // month
+    wrapper.find('.kd-date-picker-header-text-inner').at(1).simulate('click')
+    wrapper.find('.kd-date-picker-month-text').at(11).simulate('click')
+    wrapper.find('.kd-date-picker-calendar-text').at(30).simulate('click')
+    expect(wrapper.find('input').props().value).toBe('2020-12-29')
+  })
 })

components/date-picker/calendar.tsx

@@ -4,16 +4,17 @@ import classnames from 'classnames'
 import Week from './panel/week/week'
 import Context from './context'
 import { getStartOfWeek, getStartOfMonth, addWeeks } from './utils/date-fns'
-import { DateType, PickerMode, SharedTimeProps } from './interface'
+import { PickerMode, SharedTimeProps } from './interface'
 import { RangeShowTimeObject } from './range-picker'
+import { DisabledDataProps } from './date-picker'
 
 export interface CalendarProps {
   picker: PickerMode
   useWeekdaysShort?: boolean
   showWeekNumber?: boolean
   showWeeksTitle?: boolean
   showTime?: boolean | SharedTimeProps | RangeShowTimeObject
-  disabledDate?: (date: DateType) => boolean
+  disabledDate?: DisabledDataProps
 }
 
 const DATE_ROW_COUNT = 6

components/date-picker/date-panel.tsx

@@ -23,6 +23,7 @@ import { addMonths, addYears, getMonth, getYear, getYearsPeriod, DEFAULT_YEAR_IT
 import { getClosingViewDate, getTimeProps } from './utils'
 import isBoolean from 'lodash/isBoolean'
 import DateTime from './panel/date-time/date-time'
+import { DisabledDataProps } from './date-picker'
 
 export interface PickerPanelSharedProps {
   prefixCls?: string
@@ -51,7 +52,7 @@ export interface PickerPanelSharedProps {
   showWeeksTitle?: boolean
 
   // Date
-  disabledDate?: (date: DateType) => boolean
+  disabledDate?: DisabledDataProps
 
   // Render
   dateRender?: DateRender

components/date-picker/date-picker.tsx

@@ -110,6 +110,14 @@ export type IInnerPicker = undefined | 'year' | 'month'
 
 const MONTH_DEFAULT_SUFFIX = '月'
 
+export type DisabledDataProps = (
+  date: DateType,
+  info?: {
+    panelType?: 'month' | 'quarter' | 'year'
+    range?: 'start' | 'end'
+  },
+) => boolean
+
 export const mergeDateLocale = (globalLocale: InnerLocale, locale = {}) => {
   const mergeLocale: InnerLocale = Object.assign({}, globalLocale, locale)
   mergeLocale.weekTitle = Array.from(

components/date-picker/demo/disable.md

@@ -12,19 +12,26 @@ import { DatePicker } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   const demoStyle = { margin: '10px 0' }
-  const disabledDate = (date) => {
-    return date && date < new Date('2020-12-28')
+  const disabledDate = (date, info) => {
+    const disDate = new Date('2020-12-28')
+    if (info && 'year' === info.panelType) {
+      return date && date.getFullYear() < disDate.getFullYear()
+    }
+    if (info && 'month' === info.panelType) {
+      return date && date.getMonth() < disDate.getMonth()
+    }
+    return date && date < disDate
   }
   const disabledDate1 = (date) => {
     return date && date < new Date('2020-10-25')
   }
   return (
     <div  style={{ width: '150px' }}>
       <div style={demoStyle}>
-        <DatePicker disabledDate={disabledDate} defaultValue={new Date('2020-12-25')} />
+        <DatePicker disabledDate={disabledDate} defaultValue={new Date('2021-01-29')} />
       </div>
       <div style={demoStyle}>
-        <DatePicker disabledDate={disabledDate} picker="week" defaultValue={new Date('2020-12-25')} />
+        <DatePicker disabledDate={disabledDate1} picker="week" defaultValue={new Date('2020-12-25')} />
       </div>
       <div style={demoStyle}>
         <DatePicker disabledDate={disabledDate1} picker="month" defaultValue={new Date('2020-8-26')} />

components/date-picker/hooks/use-range-disabled.ts

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { RangeValue, PickerMode, DateType } from '../interface'
 import { getValue } from '../utils'
 import { getWeek, getQuarter, getMonth, getYear, isSameDay, isAfter } from '../utils/date-fns'
+import { DisabledDataProps } from '../date-picker'
 
 export default function useRangeDisabled(
   {
@@ -12,7 +13,7 @@ export default function useRangeDisabled(
   }: {
     picker: PickerMode
     selectedValue: RangeValue
-    disabledDate?: (date: DateType) => boolean
+    disabledDate?: DisabledDataProps
     disabled: [boolean, boolean]
   },
   disabledStart: boolean,
@@ -40,8 +41,8 @@ export default function useRangeDisabled(
   }
 
   const disabledStartDate = React.useCallback(
-    (date: DateType) => {
-      if (disabledDate && disabledDate(date)) {
+    (date: DateType, info = undefined) => {
+      if (disabledDate && disabledDate(date, info)) {
         return true
       }
 
@@ -69,8 +70,8 @@ export default function useRangeDisabled(
   )
 
   const disabledEndDate = React.useCallback(
-    (date: DateType) => {
-      if (disabledDate && disabledDate(date)) {
+    (date: DateType, info = undefined) => {
+      if (disabledDate && disabledDate(date, info)) {
         return true
       }
 

components/date-picker/index.md

@@ -23,7 +23,7 @@ subtitle: 日期选择器
 | clearIcon         | 自定义的清除图标                 | `ReactNode`                      |                     |  | 1.0.0  |
 | defaultOpen       | 默认弹层展开                   | `boolean`                        | false               |  | 1.0.0  |
 | disabled          | 禁用                       | `boolean`                        | false               |  | 1.0.0  |
-| disabledDate      | 不可选择的日期                  | `(currentDate: Date) => boolean` |                     |  | 1.0.0  |
+| disabledDate      | 不可选择的日期                  | `(date: DateType, info?: { panelType?: 'month' | 'quarter' | 'year' ;range?: 'start' | 'end' }) => boolean` |                     |  | 1.7.68  |
 | dropdownClassName | 日历面板 className           | `string`                         |                     |  | 1.0.0  |
 | format            | 展示的日期格式                  | `string`                         |                     |  | 1.0.0  |
 | inputReadOnly     | 输入框只读                    | `boolean`                        | false               |  | 1.0.0  |

components/date-picker/interface.ts

@@ -1,4 +1,5 @@
 import { BorderType, InputSiteType } from '../input/input'
+import { DisabledDataProps } from './date-picker'
 
 export type WeekTitleType = [string, string, string, string, string, string, string]
 export type MonthTitleType = [
@@ -108,7 +109,7 @@ export interface PanelSharedProps {
   value?: NullableDateType
   defaultPickerValue?: DateType
   locale: InnerLocale
-  disabledDate?: (date: DateType) => boolean
+  disabledDate?: DisabledDataProps
 
   prevIcon?: React.ReactNode
   nextIcon?: React.ReactNode

components/date-picker/panel/month/month.tsx

@@ -15,6 +15,7 @@ import {
 import Context from '../../context'
 import { DateType, RangeValue } from '../../interface'
 import useRangeCls from '../../hooks/use-range-cls'
+import { DisabledDataProps } from '../../date-picker'
 
 const monthsThreeColumns = [
   [0, 1, 2],
@@ -25,7 +26,7 @@ const monthsThreeColumns = [
 
 export interface MonthProps {
   showFullMonth?: boolean
-  disabledDate?(date: DateType): boolean
+  disabledDate?: DisabledDataProps
 }
 
 function Month(props: MonthProps) {
@@ -46,7 +47,7 @@ function Month(props: MonthProps) {
     cellRender,
     range,
   } = context
-
+  const disabledInfo: any = { panelType: 'month', range }
   const { disabledDate } = props
 
   let _dateValue: RangeValue | DateType
@@ -113,7 +114,7 @@ function Month(props: MonthProps) {
 
   const handleClick = (date: DateType) => {
     if (innerPicker === undefined) {
-      if (!(disabledDate && disabledDate(date))) {
+      if (!(disabledDate && disabledDate(date, disabledInfo))) {
         onSelect(date, 'mouse')
       }
     } else {
@@ -134,7 +135,7 @@ function Month(props: MonthProps) {
           const _props = {
             onClick: () => handleClick(month),
             onMouseEnter: () => {
-              if (onDateMouseEnter && !(disabledDate && disabledDate(month))) {
+              if (onDateMouseEnter && !(disabledDate && disabledDate(month, disabledInfo))) {
                 onDateMouseEnter(month)
               }
             },
@@ -148,7 +149,7 @@ function Month(props: MonthProps) {
           const monthItemCls = classnames(
             `${prefixCls}-month-item`,
             {
-              [`${prefixCls}-month-item-disabled`]: disabledDate && disabledDate(month),
+              [`${prefixCls}-month-item-disabled`]: disabledDate && disabledDate(month, disabledInfo),
             },
             getRangeCls(month),
           )

components/date-picker/panel/quarter/quarter.tsx

@@ -14,11 +14,12 @@ import {
 } from '../../utils/date-fns'
 import { DateType, RangeValue } from '../../interface'
 import useRangeCls from '../../hooks/use-range-cls'
+import { DisabledDataProps } from '../../date-picker'
 
 const quarterList = ['Q1', 'Q2', 'Q3', 'Q4']
 
 interface QuarterProps {
-  disabledDate?: (date: DateType) => boolean
+  disabledDate?: DisabledDataProps
 }
 
 function Quarter(props: QuarterProps) {
@@ -36,7 +37,7 @@ function Quarter(props: QuarterProps) {
     cellRender,
     range,
   } = context
-
+  const disabledInfo: any = { panelType: 'quarter', range }
   const { disabledDate } = props
 
   let _dateValue: RangeValue | DateType
@@ -102,7 +103,7 @@ function Quarter(props: QuarterProps) {
   })
 
   const handleClick = (date: DateType) => {
-    if (!(disabledDate && disabledDate(date))) {
+    if (!(disabledDate && disabledDate(date, disabledInfo))) {
       onSelect(date, 'mouse')
     }
   }
@@ -113,7 +114,7 @@ function Quarter(props: QuarterProps) {
       const _props = {
         onClick: () => handleClick(quarter),
         onMouseEnter: () => {
-          if (onDateMouseEnter && !(disabledDate && disabledDate(quarter))) {
+          if (onDateMouseEnter && !(disabledDate && disabledDate(quarter, disabledInfo))) {
             onDateMouseEnter(quarter)
           }
         },
@@ -127,7 +128,7 @@ function Quarter(props: QuarterProps) {
       const quarterCls = classnames(
         `${prefixCls}-quarter-item`,
         {
-          [`${prefixCls}-quarter-item-disabled`]: disabledDate && disabledDate(quarter),
+          [`${prefixCls}-quarter-item-disabled`]: disabledDate && disabledDate(quarter, disabledInfo),
         },
         getRangeCls(quarter),
       )

components/date-picker/panel/week/week.tsx

@@ -17,13 +17,14 @@ import {
 import { DateType, PickerMode, RangeValue, TimeUnit } from '../../interface'
 import { getHours, getMinutes, getSeconds, isBefore, isSameDay, isSameWeek } from 'date-fns'
 import useRangeCls from '../../hooks/use-range-cls'
+import { DisabledDataProps } from '../../date-picker'
 
 export interface WeekProps {
   day: DateType
   picker: PickerMode
   showWeekNumber?: boolean
   showTime?: boolean
-  disabledDate?: (date: DateType) => boolean
+  disabledDate?: DisabledDataProps
 }
 
 const formatWeekNumber = (date: DateType) => {

components/date-picker/panel/year/year.tsx

@@ -17,12 +17,13 @@ import {
 import { DateType, PickerMode, RangeValue } from '../../interface'
 import useRangeCls from '../../hooks/use-range-cls'
 import { getClosingViewDate } from '../../utils'
+import { DisabledDataProps } from '../../date-picker'
 
 export interface YearProps {
   yearItemNumber: number
   minDate?: DateType
   maxDate?: DateType
-  disabledDate?: (date: DateType) => boolean
+  disabledDate?: DisabledDataProps
   picker?: PickerMode
 }
 
@@ -43,7 +44,7 @@ function Year(props: YearProps) {
     cellRender,
     range,
   } = context
-
+  const disabledInfo: any = { panelType: 'year', range }
   const { yearItemNumber, disabledDate, picker = 'date' } = props
 
   let _dateValue: RangeValue | DateType
@@ -107,7 +108,7 @@ function Year(props: YearProps) {
 
   const handleClick = (date: DateType) => {
     if (innerPicker === undefined) {
-      if (!(disabledDate && disabledDate(date))) {
+      if (!(disabledDate && disabledDate(date, disabledInfo))) {
         onSelect(date, 'mouse')
       }
     } else {
@@ -131,7 +132,7 @@ function Year(props: YearProps) {
       const _props = {
         onClick: () => handleClick(year),
         onMouseEnter: () => {
-          if (onDateMouseEnter && !(disabledDate && disabledDate(year))) {
+          if (onDateMouseEnter && !(disabledDate && disabledDate(year, disabledInfo))) {
             onDateMouseEnter(year)
           }
         },
@@ -149,7 +150,7 @@ function Year(props: YearProps) {
           className={classnames(
             `${prefixCls}-year-item`,
             {
-              [`${prefixCls}-year-item-disabled`]: disabledDate && disabledDate(year),
+              [`${prefixCls}-year-item-disabled`]: disabledDate && disabledDate(year, disabledInfo),
             },
             getRangeCls(year),
           )}

components/date-picker/range-picker.tsx

@@ -633,7 +633,9 @@ const InternalRangePicker = (
         selectedValue &&
         selectedValue[mergedActivePickerIndex] &&
         disabledDate &&
-        disabledDate(selectedValue![mergedActivePickerIndex]!)
+        disabledDate(selectedValue![mergedActivePickerIndex]!, {
+          range: mergedActivePickerIndex === 0 ? 'start' : 'end',
+        })
       ),
     locale: datePickerLang,
     // rangeList,

components/date-picker/single/input-date.tsx

@@ -5,6 +5,7 @@ import { Icon } from '../../index'
 import usePickerInput from '../hooks/use-picker-input'
 import { DateType, InputCommonProps, OutInputCommonProps } from '../interface'
 import { getInputSize, getPlaceholder, elementsContains } from '../utils'
+import { DisabledDataProps } from '../date-picker'
 
 export interface InputDateProps extends OutInputCommonProps, InputCommonProps {
   inputRef: React.RefObject<HTMLInputElement>
@@ -14,7 +15,7 @@ export interface InputDateProps extends OutInputCommonProps, InputCommonProps {
   disabled?: boolean
   hoverValue?: string
   placeholder?: string
-  disabledDate?: (currentDate: DateType) => boolean
+  disabledDate?: DisabledDataProps
   resetText: () => void
   setSelectedValue: (date: DateType | null) => void
   triggerTextChange: (value: string) => void