diff --git a/components/date-picker/__docs__/demo/custom-range-picker/index.tsx b/components/date-picker/__docs__/demo/custom-range-picker/index.tsx
index b67ca02382..ec13b5d20a 100644
--- a/components/date-picker/__docs__/demo/custom-range-picker/index.tsx
+++ b/components/date-picker/__docs__/demo/custom-range-picker/index.tsx
@@ -1,18 +1,21 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from '@alifd/next';
+import { type Moment } from 'moment';
+import type { DatePickerProps } from '@alifd/next/types/date-picker';
class CustomRangePicker extends React.Component {
- constructor(props, context) {
- super(props, context);
- this.state = {
- startValue: null,
- endValue: null,
- endOpen: false,
- };
- }
+ state: {
+ startValue: Moment | null;
+ endValue: Moment | null;
+ endOpen: boolean;
+ } = {
+ startValue: null,
+ endValue: null,
+ endOpen: false,
+ };
- disabledStartDate = startValue => {
+ disabledStartDate: DatePickerProps['disabledDate'] = startValue => {
const { endValue } = this.state;
if (!startValue || !endValue) {
return false;
@@ -20,7 +23,7 @@ class CustomRangePicker extends React.Component {
return startValue.valueOf() > endValue.valueOf();
};
- disabledEndDate = endValue => {
+ disabledEndDate: DatePickerProps['disabledDate'] = endValue => {
const { startValue } = this.state;
if (!endValue || !startValue) {
return false;
@@ -28,27 +31,27 @@ class CustomRangePicker extends React.Component {
return endValue.valueOf() <= startValue.valueOf();
};
- onChange = (stateName, value) => {
+ onChange = (stateName: 'startValue' | 'endValue', value: string | Moment | null) => {
this.setState({
[stateName]: value,
});
};
- onStartChange = value => {
+ onStartChange: DatePickerProps['onChange'] = value => {
this.onChange('startValue', value);
};
- onEndChange = value => {
+ onEndChange: DatePickerProps['onChange'] = value => {
this.onChange('endValue', value);
};
- handleStartOpenChange = open => {
+ handleStartOpenChange: DatePickerProps['onVisibleChange'] = open => {
if (!open) {
this.setState({ endOpen: true });
}
};
- handleEndOpenChange = open => {
+ handleEndOpenChange: DatePickerProps['onVisibleChange'] = open => {
this.setState({ endOpen: open });
};
diff --git a/components/date-picker/__docs__/demo/default-visible-month/index.tsx b/components/date-picker/__docs__/demo/default-visible-month/index.tsx
index 06548df006..978438d90b 100644
--- a/components/date-picker/__docs__/demo/default-visible-month/index.tsx
+++ b/components/date-picker/__docs__/demo/default-visible-month/index.tsx
@@ -1,11 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from '@alifd/next';
-import moment from 'moment';
+import moment, { type Moment } from 'moment';
const { RangePicker, MonthPicker } = DatePicker;
-function onVisibleMonthChange(val, reason) {
+function onVisibleMonthChange(val: Moment, reason: string) {
console.log(val.format('L'), reason);
}
diff --git a/components/date-picker/__docs__/demo/default/index.tsx b/components/date-picker/__docs__/demo/default/index.tsx
index 7cd72b5d02..a47c2d2b8f 100644
--- a/components/date-picker/__docs__/demo/default/index.tsx
+++ b/components/date-picker/__docs__/demo/default/index.tsx
@@ -7,7 +7,7 @@ const { RangePicker, MonthPicker, YearPicker } = DatePicker;
const startValue = moment('2017-11-20', 'YYYY-MM-DD', true);
const endValue = moment('2017-12-15', 'YYYY-MM-DD', true);
const timeStamp = moment(1581938105000);
-const onChange = val => console.log(val);
+const onChange = (val: unknown) => console.log(val);
ReactDOM.render(
diff --git a/components/date-picker/__docs__/demo/disabled-date/index.tsx b/components/date-picker/__docs__/demo/disabled-date/index.tsx
index 4bda2b0031..6513ec5b4b 100644
--- a/components/date-picker/__docs__/demo/disabled-date/index.tsx
+++ b/components/date-picker/__docs__/demo/disabled-date/index.tsx
@@ -2,12 +2,13 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from '@alifd/next';
import moment from 'moment';
+import type { DatePickerProps } from '@alifd/next/types/date-picker';
const { RangePicker, MonthPicker, YearPicker } = DatePicker;
const currentDate = moment();
// Disable all dates before today
-const disabledDate = function (date, view) {
+const disabledDate: DatePickerProps['disabledDate'] = function (date, view) {
switch (view) {
case 'date':
return date.valueOf() <= currentDate.valueOf();
diff --git a/components/date-picker/__docs__/demo/field/index.tsx b/components/date-picker/__docs__/demo/field/index.tsx
index b222235f6b..3c0b326d99 100644
--- a/components/date-picker/__docs__/demo/field/index.tsx
+++ b/components/date-picker/__docs__/demo/field/index.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Field, Button } from '@alifd/next';
+import { type Moment } from 'moment';
const { RangePicker, YearPicker, MonthPicker } = DatePicker;
@@ -8,27 +9,32 @@ class App extends React.Component {
field = new Field(this);
printData = () => {
- this.field.validate((err, values) => {
- if (err) {
- console.error('Error: ', err);
- return;
- }
+ this.field.validate(
+ (
+ err,
+ values: { date: Moment; month: Moment; year: Moment; range: [Moment, Moment] }
+ ) => {
+ if (err) {
+ console.error('Error: ', err);
+ return;
+ }
- console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));
- console.log('monthpicker: %s', values.month.format('YYYY-MM'));
- console.log('yearpicker: %s', values.year.format('YYYY'));
- const range = values.range;
- console.log(
- 'rangepicker: [%s, %s]',
- range[0] && range[0].format('YYYY-MM-DD'),
- range[1] && range[1].format('YYYY-MM-DD')
- );
- });
+ console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));
+ console.log('monthpicker: %s', values.month.format('YYYY-MM'));
+ console.log('yearpicker: %s', values.year.format('YYYY'));
+ const range = values.range;
+ console.log(
+ 'rangepicker: [%s, %s]',
+ range[0] && range[0].format('YYYY-MM-DD'),
+ range[1] && range[1].format('YYYY-MM-DD')
+ );
+ }
+ );
};
- printError = name => {
+ printError = (name: string) => {
if (this.field.getError(name)) {
- return
{this.field.getError(name).join(',')} ;
+ return
{this.field.getError(name)!.join(',')} ;
}
};
diff --git a/components/date-picker/__docs__/demo/format/index.tsx b/components/date-picker/__docs__/demo/format/index.tsx
index 3893045ead..2b2e749ac3 100644
--- a/components/date-picker/__docs__/demo/format/index.tsx
+++ b/components/date-picker/__docs__/demo/format/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
import { DatePicker } from '@alifd/next';
const { RangePicker } = DatePicker;
-const onChange = val => console.log(val);
+const onChange = (val: unknown) => console.log(val);
ReactDOM.render(
diff --git a/components/date-picker/__docs__/demo/show-time/index.tsx b/components/date-picker/__docs__/demo/show-time/index.tsx
index 573980ca01..ecbeca194b 100644
--- a/components/date-picker/__docs__/demo/show-time/index.tsx
+++ b/components/date-picker/__docs__/demo/show-time/index.tsx
@@ -1,12 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from '@alifd/next';
-import moment from 'moment';
+import moment, { type Moment } from 'moment';
const { RangePicker } = DatePicker;
-const onChange = value => console.log(value);
-const onOk = value => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss'));
-const onRangeOk = value =>
+const onChange = (value: unknown) => console.log(value);
+const onOk = (value: Moment) => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss'));
+const onRangeOk = (value: Moment[]) =>
console.log(
'onOk: [%s, %s]',
value[0].format('YYYY-MM-DD HH:mm:ss'),
@@ -26,8 +26,7 @@ ReactDOM.render(
React.ReactNode;
+}> {
state = {
demoFunction: {
label: {
@@ -52,7 +59,7 @@ class FunctionDemo extends React.Component {
},
};
- onFunctionChange = val => {
+ onFunctionChange = (val: unknown) => {
this.setState({
demoFunction: val,
});
@@ -63,8 +70,8 @@ class FunctionDemo extends React.Component {
const { demoFunction } = this.state;
const hasLabel = demoFunction.label.value === 'true';
- const otherProps = {
- popupContainer: target => target.parentNode,
+ const otherProps: Record = {
+ popupContainer: (target: HTMLElement) => target.parentNode,
};
if (hasLabel) {
@@ -75,7 +82,12 @@ class FunctionDemo extends React.Component {
}
}
-function renderDatePicker(locale, demoFunction, onFunctionChange, otherProps) {
+function renderDatePicker(
+ locale: (typeof i18nMap)['en-us'],
+ demoFunction: any,
+ onFunctionChange: any,
+ otherProps: DatePickerProps
+) {
return (
diff --git a/components/date-picker/date-picker.tsx b/components/date-picker/date-picker.tsx
index 660d4b959a..06bbad5978 100644
--- a/components/date-picker/date-picker.tsx
+++ b/components/date-picker/date-picker.tsx
@@ -1,16 +1,16 @@
-import React, { Component } from 'react';
+import React, { Component, type HTMLAttributes, type KeyboardEvent, type UIEvent } from 'react';
import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
import classnames from 'classnames';
-import moment from 'moment';
+import moment, { type Moment } from 'moment';
import ConfigProvider from '../config-provider';
import Overlay from '../overlay';
-import Input from '../input';
+import Input, { type InputProps } from '../input';
import Icon from '../icon';
import Calendar from '../calendar';
import TimePickerPanel from '../time-picker/panel';
import nextLocale from '../locale/zh-cn';
-import { func, obj } from '../util';
+import { type ClassPropsWithDefault, func, obj } from '../util';
import {
PANEL,
resetValueTime,
@@ -21,13 +21,17 @@ import {
onTimeKeydown,
} from './util';
import PanelFooter from './module/panel-footer';
+import type { DatePickerProps, DatePickerState } from './types';
+import { type TimePickerProps } from '../time-picker';
const { Popup } = Overlay;
+type InnerDatePickerProps = ClassPropsWithDefault
;
+
/**
* DatePicker
*/
-class DatePicker extends Component {
+class DatePicker extends Component {
static propTypes = {
...ConfigProvider.propTypes,
prefix: PropTypes.string,
@@ -46,7 +50,7 @@ class DatePicker extends Component {
placeholder: PropTypes.string,
/**
* 默认展现的月
- * @return {MomentObject} 返回包含指定月份的 moment 对象实例
+ * @returns \{MomentObject\} 返回包含指定月份的 moment 对象实例
*/
defaultVisibleMonth: PropTypes.func,
onVisibleMonthChange: PropTypes.func,
@@ -63,7 +67,7 @@ class DatePicker extends Component {
*/
format: PropTypes.string,
/**
- * 是否使用时间控件，传入 TimePicker 的属性 { defaultValue, format, ... }
+ * 是否使用时间控件，传入 TimePicker 的属性 \{ defaultValue, format, ... \}
*/
showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
/**
@@ -72,24 +76,18 @@ class DatePicker extends Component {
resetTime: PropTypes.bool,
/**
* 禁用日期函数
- * @param {MomentObject} 日期值
- * @param {String} view 当前视图类型，year: 年， month: 月, date: 日
- * @return {Boolean} 是否禁用
*/
disabledDate: PropTypes.func,
/**
* 自定义面板页脚
- * @return {Node} 自定义的面板页脚组件
*/
footerRender: PropTypes.func,
/**
* 日期值改变时的回调
- * @param {MomentObject|String} value 日期值
*/
onChange: PropTypes.func,
/**
* 点击确认按钮时的回调
- * @param {MomentObject|String} value 日期值
*/
onOk: PropTypes.func,
/**
@@ -114,8 +112,6 @@ class DatePicker extends Component {
defaultVisible: PropTypes.bool,
/**
* 弹层展示状态变化时的回调
- * @param {Boolean} visible 弹层是否显示
- * @param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
*/
onVisibleChange: PropTypes.func,
/**
@@ -123,13 +119,11 @@ class DatePicker extends Component {
*/
popupTriggerType: PropTypes.oneOf(['click', 'hover']),
/**
- * 弹层对齐方式,具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign: PropTypes.string,
/**
* 弹层容器
- * @param {Element} target 目标元素
- * @return {Element} 弹层的容器元素
*/
popupContainer: PropTypes.any,
/**
@@ -154,20 +148,14 @@ class DatePicker extends Component {
inputProps: PropTypes.object,
/**
* 自定义日期渲染函数
- * @param {Moment} calendarDate 日期值（moment对象）
- * @returns {ReactNode}
*/
dateCellRender: PropTypes.func,
/**
* 自定义月份渲染函数
- * @param {Moment} calendarDate 对应 Calendar 返回的自定义日期对象
- * @returns {ReactNode}
*/
monthCellRender: PropTypes.func,
/**
* 自定义年份渲染函数
- * @param {Moment} calendarDate 对应 Calendar 返回的自定义日期对象
- * @returns {ReactNode}
*/
yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
/**
@@ -184,7 +172,6 @@ class DatePicker extends Component {
isPreview: PropTypes.bool,
/**
* 预览态模式下渲染的内容
- * @param {MomentObject} value 日期
*/
renderPreview: PropTypes.func,
locale: PropTypes.object,
@@ -224,11 +211,13 @@ class DatePicker extends Component {
onOk: func.noop,
};
- constructor(props, context) {
- super(props, context);
+ readonly props: InnerDatePickerProps;
+
+ constructor(props: DatePickerProps) {
+ super(props);
const { format, timeFormat, dateTimeFormat } = getDateTimeFormat(
props.format,
- props.showTime
+ props.showTime!
);
this.state = {
@@ -236,18 +225,18 @@ class DatePicker extends Component {
dateInputStr: '',
timeInputStr: '',
inputing: false, // 当前是否处于输入状态
- visible: props.defaultVisible,
+ visible: props.defaultVisible!,
inputAsString: typeof props.defaultValue === 'string',
panel: PANEL.DATE,
- format,
+ format: format!,
timeFormat,
- dateTimeFormat,
+ dateTimeFormat: dateTimeFormat!,
};
}
- static getDerivedStateFromProps(props) {
+ static getDerivedStateFromProps(props: InnerDatePickerProps) {
const formatStates = getDateTimeFormat(props.format, props.showTime);
- const states = {};
+ const states: Partial = {};
if ('value' in props) {
states.value = formatDateValue(props.value, formatStates.dateTimeFormat);
@@ -269,7 +258,7 @@ class DatePicker extends Component {
};
}
- onValueChange = (newValue, handler = 'onChange') => {
+ onValueChange = (newValue: Moment | null, handler: 'onOk' | 'onChange' = 'onChange') => {
const ret =
this.state.inputAsString && newValue
? newValue.format(this.state.dateTimeFormat)
@@ -277,7 +266,7 @@ class DatePicker extends Component {
this.props[handler](ret);
};
- onSelectCalendarPanel = value => {
+ onSelectCalendarPanel = (value: Moment) => {
const { showTime, resetTime } = this.props;
const prevValue = this.state.value;
@@ -285,9 +274,9 @@ class DatePicker extends Component {
if (showTime) {
if (!prevValue) {
// 第一次选择日期值时，如果设置了默认时间，则使用该默认时间
- if (showTime.defaultValue) {
+ if ((showTime as TimePickerProps).defaultValue) {
const defaultTimeValue = formatDateValue(
- showTime.defaultValue,
+ (showTime as TimePickerProps).defaultValue,
this.state.timeFormat
);
newValue = resetValueTime(value, defaultTimeValue);
@@ -305,7 +294,7 @@ class DatePicker extends Component {
}
};
- onSelectTimePanel = value => {
+ onSelectTimePanel = (value: Moment) => {
this.handleChange(value, this.state.value, { inputing: false });
};
@@ -318,7 +307,7 @@ class DatePicker extends Component {
this.handleChange(null, this.state.value, { inputing: false });
};
- onDateInputChange = (inputStr, e, eventType) => {
+ onDateInputChange = (inputStr: string | null | undefined, e: UIEvent, eventType?: string) => {
if (eventType === 'clear' || !inputStr) {
e.stopPropagation();
this.clearValue();
@@ -330,7 +319,7 @@ class DatePicker extends Component {
}
};
- onTimeInputChange = inputStr => {
+ onTimeInputChange = (inputStr: string) => {
this.setState({
timeInputStr: inputStr,
inputing: 'time',
@@ -370,6 +359,7 @@ class DatePicker extends Component {
const hour = parsed.hour();
const minute = parsed.minute();
const second = parsed.second();
+ // @ts-expect-error 没有考虑 value 为 null 的情况
const newValue = value.clone().hour(hour).minute(minute).second(second);
this.handleChange(newValue, this.state.value);
@@ -377,15 +367,15 @@ class DatePicker extends Component {
}
};
- onKeyDown = e => {
+ onKeyDown = (e: KeyboardEvent) => {
const { format } = this.props;
const { dateInputStr, value } = this.state;
const dateStr = onDateKeydown(e, { format, dateInputStr, value }, 'day');
if (!dateStr) return;
- this.onDateInputChange(dateStr);
+ this.onDateInputChange(dateStr, e);
};
- onTimeKeyDown = e => {
+ onTimeKeyDown = (e: KeyboardEvent) => {
const { showTime } = this.props;
const { timeInputStr, timeFormat, value } = this.state;
const {
@@ -394,8 +384,8 @@ class DatePicker extends Component {
hourStep = 1,
minuteStep = 1,
secondStep = 1,
- } = typeof showTime === 'object' ? showTime : {};
- let unit = 'second';
+ } = typeof showTime === 'object' ? showTime : ({} as TimePickerProps);
+ let unit: 'second' | 'minute' | 'hour' = 'second';
if (disabledSeconds) {
unit = disabledMinutes ? 'hour' : 'minute';
@@ -421,7 +411,7 @@ class DatePicker extends Component {
this.onTimeInputChange(timeStr);
};
- handleChange = (newValue, prevValue, others = {}) => {
+ handleChange = (newValue: Moment | null, prevValue: Moment | null, others = {}) => {
if (!('value' in this.props)) {
this.setState({
value: newValue,
@@ -457,7 +447,7 @@ class DatePicker extends Component {
}
};
- onVisibleChange = (visible, type) => {
+ onVisibleChange = (visible: boolean, type: string) => {
if (!('visible' in this.props)) {
this.setState({
visible,
@@ -466,18 +456,18 @@ class DatePicker extends Component {
this.props.onVisibleChange(visible, type);
};
- changePanel = panel => {
+ changePanel = (panel: DatePickerState['panel']) => {
this.setState({
panel,
});
};
- onOk = value => {
+ onOk = (value: undefined) => {
this.onVisibleChange(false, 'okBtnClick');
this.onValueChange(value || this.state.value, 'onOk');
};
- renderPreview(others) {
+ renderPreview(others: HTMLAttributes) {
const { prefix, className, renderPreview } = this.props;
const { value, dateTimeFormat } = this.state;
const previewCls = classnames(className, `${prefix}form-preview`);
@@ -576,6 +566,7 @@ class DatePicker extends Component {
}
if (isPreview) {
+ // @ts-expect-error 应该使用 propTypes
return this.renderPreview(obj.pickOthers(others, DatePicker.PropTypes));
}
@@ -583,7 +574,7 @@ class DatePicker extends Component {
...inputProps,
size,
disabled,
- onChange: this.onDateInputChange,
+ onChange: this.onDateInputChange as InputProps['onChange'],
onBlur: this.onDateInputBlur,
onPressEnter: this.onDateInputBlur,
onKeyDown: this.onKeyDown,
@@ -708,6 +699,7 @@ class DatePicker extends Component {
className={`${prefix}date-picker-symbol-calendar-icon`}
/>
}
+ // @ts-expect-error allowClear 应该先做 boolean 化处理
hasClear={allowClear}
className={triggerInputCls}
/>
diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
index 7040f4c72b..2f49fe91ff 100644
--- a/components/date-picker/index.tsx
+++ b/components/date-picker/index.tsx
@@ -4,9 +4,12 @@ import RangePicker from './range-picker';
import MonthPicker from './month-picker';
import YearPicker from './year-picker';
import WeekPicker from './week-picker';
+import { assignSubComponent } from '../util/component';
+import type { log } from '../util';
-/* istanbul ignore next */
-const transform = (props, deprecated) => {
+export type { DatePickerProps, RangePickerProps, MonthPickerProps, YearPickerProps } from './types';
+
+const transform = (props: Record, deprecated: typeof log.deprecated) => {
const { open, defaultOpen, onOpenChange, ...others } = props;
const newProps = others;
@@ -57,23 +60,24 @@ const transform = (props, deprecated) => {
return newProps;
};
-DatePicker.RangePicker = ConfigProvider.config(RangePicker, {
- componentName: 'DatePicker',
- transform,
-});
-DatePicker.MonthPicker = ConfigProvider.config(MonthPicker, {
- componentName: 'DatePicker',
- transform,
-});
-DatePicker.YearPicker = ConfigProvider.config(YearPicker, {
- componentName: 'DatePicker',
- transform,
-});
-
-DatePicker.WeekPicker = ConfigProvider.config(WeekPicker, {
- componentName: 'DatePicker',
+const DatePickerWithSub = assignSubComponent(DatePicker, {
+ RangePicker: ConfigProvider.config(RangePicker, {
+ componentName: 'DatePicker',
+ transform,
+ }),
+ MonthPicker: ConfigProvider.config(MonthPicker, {
+ componentName: 'DatePicker',
+ transform,
+ }),
+ YearPicker: ConfigProvider.config(YearPicker, {
+ componentName: 'DatePicker',
+ transform,
+ }),
+ WeekPicker: ConfigProvider.config(WeekPicker, {
+ componentName: 'DatePicker',
+ }),
});
-export default ConfigProvider.config(DatePicker, {
+export default ConfigProvider.config(DatePickerWithSub, {
transform,
});
diff --git a/components/date-picker/module/panel-footer.tsx b/components/date-picker/module/panel-footer.tsx
index 66917ae922..21048c80b5 100644
--- a/components/date-picker/module/panel-footer.tsx
+++ b/components/date-picker/module/panel-footer.tsx
@@ -3,10 +3,10 @@ import moment from 'moment';
import Button from '../../button';
import { func } from '../../util';
import { PANEL } from '../util';
+import type { PanelFooterProps } from '../types';
-class PanelFooter extends React.PureComponent {
+class PanelFooter extends React.PureComponent {
static defaultProps = {
- // onPanelChange: func.noop,
onOk: func.noop,
};
@@ -15,10 +15,10 @@ class PanelFooter extends React.PureComponent {
[PANEL.DATE]: PANEL.TIME,
[PANEL.TIME]: PANEL.DATE,
}[this.props.panel];
- this.props.onPanelChange(targetPanel);
+ this.props.onPanelChange!(targetPanel);
};
- createRanges = ranges => {
+ createRanges = (ranges: PanelFooterProps['ranges']) => {
if (!ranges || ranges.length === 0) return null;
const { onOk, prefix } = this.props;
@@ -47,7 +47,7 @@ class PanelFooter extends React.PureComponent {
locale,
panel,
value,
- ranges, // 兼容0.x range 属性
+ ranges, // 兼容 0.x range 属性
disabledOk,
onPanelChange,
onOk,
@@ -61,7 +61,7 @@ class PanelFooter extends React.PureComponent {
size: 'small',
type: 'primary',
disabled: !value,
- };
+ } as const;
const onClick = () => onOk();
return (
@@ -73,7 +73,7 @@ class PanelFooter extends React.PureComponent {
) : null}
- {locale.ok}
+ {locale!.ok}
);
diff --git a/components/date-picker/month-picker.tsx b/components/date-picker/month-picker.tsx
index 2d3cbfd676..1abae07385 100644
--- a/components/date-picker/month-picker.tsx
+++ b/components/date-picker/month-picker.tsx
@@ -1,23 +1,34 @@
-import React, { Component } from 'react';
+import React, {
+ Component,
+ type HTMLAttributes,
+ type SyntheticEvent,
+ type KeyboardEvent,
+} from 'react';
import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
import classnames from 'classnames';
-import moment from 'moment';
+import moment, { type Moment } from 'moment';
import ConfigProvider from '../config-provider';
import Overlay from '../overlay';
import Input from '../input';
import Icon from '../icon';
import Calendar from '../calendar';
import nextLocale from '../locale/zh-cn';
-import { func, obj } from '../util';
+import { type ClassPropsWithDefault, func, obj } from '../util';
import { checkDateValue, formatDateValue, onDateKeydown } from './util';
+import type { MonthPickerProps, MonthPickerState } from './types';
const { Popup } = Overlay;
+type InnerMonthPickerProps = ClassPropsWithDefault<
+ MonthPickerProps,
+ typeof MonthPicker.defaultProps
+>;
+
/**
* DatePicker.MonthPicker
*/
-class MonthPicker extends Component {
+class MonthPicker extends Component {
static propTypes = {
...ConfigProvider.propTypes,
prefix: PropTypes.string,
@@ -36,7 +47,6 @@ class MonthPicker extends Component {
placeholder: PropTypes.string,
/**
* 默认展现的年
- * @return {MomentObject} 返回包含指定年份的 moment 对象实例
*/
defaultVisibleYear: PropTypes.func,
/**
@@ -53,19 +63,14 @@ class MonthPicker extends Component {
format: PropTypes.string,
/**
* 禁用日期函数
- * @param {MomentObject} 日期值
- * @param {String} view 当前视图类型，year: 年， month: 月, date: 日
- * @return {Boolean} 是否禁用
*/
disabledDate: PropTypes.func,
/**
* 自定义面板页脚
- * @return {Node} 自定义的面板页脚组件
*/
footerRender: PropTypes.func,
/**
* 日期值改变时的回调
- * @param {MomentObject|String} value 日期值
*/
onChange: PropTypes.func,
/**
@@ -90,8 +95,6 @@ class MonthPicker extends Component {
defaultVisible: PropTypes.bool,
/**
* 弹层展示状态变化时的回调
- * @param {Boolean} visible 弹层是否显示
- * @param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
*/
onVisibleChange: PropTypes.func,
/**
@@ -99,13 +102,11 @@ class MonthPicker extends Component {
*/
popupTriggerType: PropTypes.oneOf(['click', 'hover']),
/**
- * 弹层对齐方式, 具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign: PropTypes.string,
/**
* 弹层容器
- * @param {Element} target 目标元素
- * @return {Element} 弹层的容器元素
*/
popupContainer: PropTypes.any,
/**
@@ -130,8 +131,6 @@ class MonthPicker extends Component {
inputProps: PropTypes.object,
/**
* 自定义月份渲染函数
- * @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
- * @returns {ReactNode}
*/
monthCellRender: PropTypes.func,
yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
@@ -145,7 +144,6 @@ class MonthPicker extends Component {
isPreview: PropTypes.bool,
/**
* 预览态模式下渲染的内容
- * @param {MomentObject} value 月份
*/
renderPreview: PropTypes.func,
locale: PropTypes.object,
@@ -170,8 +168,10 @@ class MonthPicker extends Component {
onVisibleChange: func.noop,
};
- constructor(props, context) {
- super(props, context);
+ readonly props: InnerMonthPickerProps;
+
+ constructor(props: MonthPickerProps) {
+ super(props);
this.state = {
value: formatDateValue(props.defaultValue, props.format),
@@ -182,8 +182,8 @@ class MonthPicker extends Component {
};
}
- static getDerivedStateFromProps(props) {
- const states = {};
+ static getDerivedStateFromProps(props: InnerMonthPickerProps) {
+ const states: Partial = {};
if ('value' in props) {
states.value = formatDateValue(props.value, props.format);
if (typeof props.value === 'string') {
@@ -201,14 +201,13 @@ class MonthPicker extends Component {
return states;
}
- onValueChange = newValue => {
+ onValueChange = (newValue: Moment | null) => {
const ret =
this.state.inputAsString && newValue ? newValue.format(this.props.format) : newValue;
this.props.onChange(ret);
};
- onSelectCalendarPanel = value => {
- // const { format } = this.props;
+ onSelectCalendarPanel = (value: Moment) => {
const prevSelectedMonth = this.state.value;
const selectedMonth = value.clone().date(1).hour(0).minute(0).second(0);
@@ -225,7 +224,11 @@ class MonthPicker extends Component {
this.handleChange(null, this.state.value);
};
- onDateInputChange = (inputStr, e, eventType) => {
+ onDateInputChange = (
+ inputStr: string,
+ e: SyntheticEvent,
+ eventType?: string
+ ) => {
if (eventType === 'clear' || !inputStr) {
e.stopPropagation();
this.clearValue();
@@ -254,15 +257,21 @@ class MonthPicker extends Component {
}
};
- onKeyDown = e => {
+ onKeyDown = (e: KeyboardEvent) => {
const { format } = this.props;
const { dateInputStr, value } = this.state;
const dateStr = onDateKeydown(e, { format, dateInputStr, value }, 'month');
if (!dateStr) return;
+ // @ts-expect-error 应传入 e
this.onDateInputChange(dateStr);
};
- handleChange = (newValue, prevValue, others = {}, callback) => {
+ handleChange = (
+ newValue: Moment | null,
+ prevValue: Moment | null,
+ others = {},
+ callback?: () => void
+ ) => {
if (!('value' in this.props)) {
this.setState({
value: newValue,
@@ -287,7 +296,7 @@ class MonthPicker extends Component {
}
};
- onVisibleChange = (visible, type) => {
+ onVisibleChange = (visible: boolean, type: string) => {
if (!('visible' in this.props)) {
this.setState({
visible,
@@ -296,7 +305,7 @@ class MonthPicker extends Component {
this.props.onVisibleChange(visible, type);
};
- renderPreview(others) {
+ renderPreview(others: HTMLAttributes) {
const { prefix, format, className, renderPreview } = this.props;
const { value } = this.state;
const previewCls = classnames(className, `${prefix}form-preview`);
@@ -374,6 +383,7 @@ class MonthPicker extends Component {
}
if (isPreview) {
+ // @ts-expect-error 应是 propTypes
return this.renderPreview(obj.pickOthers(others, MonthPicker.PropTypes));
}
@@ -397,6 +407,7 @@ class MonthPicker extends Component {
{...sharedInputProps}
value={dateInputValue}
aria-label={dateInputAriaLabel}
+ // @ts-expect-error 没有 this.onFoucsDateInput
onFocus={this.onFoucsDateInput}
placeholder={format}
className={panelInputCls}
@@ -435,6 +446,7 @@ class MonthPicker extends Component {
className={`${prefix}date-picker-symbol-calendar-icon`}
/>
}
+ // @ts-expect-error allowClear 应该先做 boolean 化处理
hasClear={allowClear}
className={triggerInputCls}
/>
diff --git a/components/date-picker/range-picker.tsx b/components/date-picker/range-picker.tsx
index 96332e472f..50291bc43c 100644
--- a/components/date-picker/range-picker.tsx
+++ b/components/date-picker/range-picker.tsx
@@ -1,8 +1,14 @@
-import React, { Component, createRef } from 'react';
+import React, {
+ Component,
+ createRef,
+ type HTMLAttributes,
+ type KeyboardEvent,
+ type SyntheticEvent,
+} from 'react';
import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
import classnames from 'classnames';
-import moment from 'moment';
+import moment, { type Moment } from 'moment';
import ConfigProvider from '../config-provider';
import Overlay from '../overlay';
import Input from '../input';
@@ -11,7 +17,7 @@ import Calendar from '../calendar';
import RangeCalendar from '../calendar/range-calendar';
import TimePickerPanel from '../time-picker/panel';
import nextLocale from '../locale/zh-cn';
-import { func, obj } from '../util';
+import { type ClassPropsWithDefault, func, obj } from '../util';
import {
PANEL,
resetValueTime,
@@ -22,36 +28,47 @@ import {
onTimeKeydown,
} from './util';
import PanelFooter from './module/panel-footer';
+import type { PanelFooterProps, PanelType, RangePickerProps, RangePickerState } from './types';
+import { type TimePickerProps } from '../time-picker';
const { Popup } = Overlay;
-function mapInputStateName(name) {
- return {
- startValue: 'startDateInputStr',
- endValue: 'endDateInputStr',
- startTime: 'startTimeInputStr',
- endTime: 'endTimeInputStr',
- }[name];
+function mapInputStateName(name: string) {
+ return (
+ {
+ startValue: 'startDateInputStr',
+ endValue: 'endDateInputStr',
+ startTime: 'startTimeInputStr',
+ endTime: 'endTimeInputStr',
+ } as const
+ )[name];
}
-function mapTimeToValue(name) {
- return {
- startTime: 'startValue',
- endTime: 'endValue',
- }[name];
+function mapTimeToValue(name: string) {
+ return (
+ {
+ startTime: 'startValue',
+ endTime: 'endValue',
+ } as const
+ )[name];
}
-function getFormatValues(values, format) {
+function getFormatValues(values: RangePickerProps['value'] | null | undefined, format?: string) {
if (!Array.isArray(values)) {
return [null, null];
}
return [formatDateValue(values[0], format), formatDateValue(values[1], format)];
}
+type InnerRangePickerProps = ClassPropsWithDefault<
+ RangePickerProps,
+ typeof RangePicker.defaultProps
+>;
+
/**
* DatePicker.RangePicker
*/
-class RangePicker extends Component {
+class RangePicker extends Component {
static propTypes = {
...ConfigProvider.propTypes,
prefix: PropTypes.string,
@@ -62,7 +79,6 @@ class RangePicker extends Component {
type: PropTypes.oneOf(['date', 'month', 'year']),
/**
* 默认展示的起始月份
- * @return {MomentObject} 返回包含指定月份的 moment 对象实例
*/
defaultVisibleMonth: PropTypes.func,
onVisibleMonthChange: PropTypes.func,
@@ -88,24 +104,18 @@ class RangePicker extends Component {
resetTime: PropTypes.bool,
/**
* 禁用日期函数
- * @param {MomentObject} 日期值
- * @param {String} view 当前视图类型，year: 年， month: 月, date: 日
- * @return {Boolean} 是否禁用
*/
disabledDate: PropTypes.func,
/**
* 自定义面板页脚
- * @return {Node} 自定义的面板页脚组件
*/
footerRender: PropTypes.func,
/**
* 日期范围值改变时的回调 [ MomentObject|String, MomentObject|String ]
- * @param {Array} value 日期值
*/
onChange: PropTypes.func,
/**
* 点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`
- * @return {Array} 日期范围
*/
onOk: PropTypes.func,
/**
@@ -138,8 +148,6 @@ class RangePicker extends Component {
defaultVisible: PropTypes.bool,
/**
* 弹层展示状态变化时的回调
- * @param {Boolean} visible 弹层是否显示
- * @param {String} type 触发弹层显示和隐藏的来源 okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
*/
onVisibleChange: PropTypes.func,
/**
@@ -147,13 +155,11 @@ class RangePicker extends Component {
*/
popupTriggerType: PropTypes.oneOf(['click', 'hover']),
/**
- * 弹层对齐方式, 具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign: PropTypes.string,
/**
* 弹层容器
- * @param {Element} target 目标元素
- * @return {Element} 弹层的容器元素
*/
popupContainer: PropTypes.any,
/**
@@ -182,8 +188,6 @@ class RangePicker extends Component {
dateCellRender: PropTypes.func,
/**
* 自定义月份渲染函数
- * @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
- * @returns {ReactNode}
*/
monthCellRender: PropTypes.func,
yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
@@ -209,12 +213,11 @@ class RangePicker extends Component {
isPreview: PropTypes.bool,
/**
* 预览态模式下渲染的内容
- * @param {Array} value 日期区间
*/
renderPreview: PropTypes.func,
disableChangeMode: PropTypes.bool,
yearRange: PropTypes.arrayOf(PropTypes.number),
- ranges: PropTypes.object, // 兼容0.x版本
+ ranges: PropTypes.object, // 兼容 0.x 版本
locale: PropTypes.object,
className: PropTypes.string,
name: PropTypes.string,
@@ -243,15 +246,17 @@ class RangePicker extends Component {
onVisibleChange: func.noop,
};
- startDateInputRef = createRef();
- endDateInputRef = createRef();
+ readonly props: InnerRangePickerProps;
+
+ startDateInputRef = createRef>();
+ endDateInputRef = createRef>();
autoSwitchDateInput = false;
- constructor(props, context) {
- super(props, context);
+ constructor(props: RangePickerProps) {
+ super(props);
const { format, timeFormat, dateTimeFormat } = getDateTimeFormat(
props.format,
- props.showTime,
+ props.showTime!,
props.type
);
@@ -275,9 +280,9 @@ class RangePicker extends Component {
inputAsString: val && (typeof val[0] === 'string' || typeof val[1] === 'string'),
};
}
- static getDerivedStateFromProps(props) {
+ static getDerivedStateFromProps(props: InnerRangePickerProps) {
const formatStates = getDateTimeFormat(props.format, props.showTime, props.type);
- const states = {};
+ const states: Partial = {};
if ('value' in props) {
const values = getFormatValues(props.value, formatStates.dateTimeFormat);
@@ -307,8 +312,11 @@ class RangePicker extends Component {
};
}
- onValueChange = (values, handler = 'onChange') => {
- let ret;
+ onValueChange = (
+ values: [start?: Moment | null, end?: Moment | null],
+ handler: 'onOk' | 'onChange' = 'onChange'
+ ) => {
+ let ret: [start?: Moment | string | null, end?: Moment | string | null];
if (!values.length || !this.state.inputAsString) {
ret = values;
} else {
@@ -320,7 +328,7 @@ class RangePicker extends Component {
this.props[handler](ret);
};
- onSelectCalendarPanel = (value, active) => {
+ onSelectCalendarPanel = (value: Moment, active?: RangePickerState['activeDateInput']) => {
const { showTime, resetTime } = this.props;
const {
activeDateInput: prevActiveDateInput,
@@ -329,7 +337,7 @@ class RangePicker extends Component {
timeFormat,
} = this.state;
- const newState = {
+ const newState: Partial = {
activeDateInput: active || prevActiveDateInput,
inputing: false,
};
@@ -345,7 +353,7 @@ class RangePicker extends Component {
if (showTime) {
if (!prevStartValue) {
// 第一次选择，如果设置了时间默认值，则使用该默认时间
- if (showTime.defaultValue) {
+ if (typeof showTime === 'object' && showTime.defaultValue) {
const defaultTimeValue = formatDateValue(
Array.isArray(showTime.defaultValue)
? showTime.defaultValue[0]
@@ -355,7 +363,7 @@ class RangePicker extends Component {
newValue = resetValueTime(value, defaultTimeValue);
}
} else if (!resetTime) {
- // 非第一次选择，如果开启了 resetTime ，则记住之前选择的时间值
+ // 非第一次选择，如果开启了 resetTime，则记住之前选择的时间值
newValue = resetValueTime(value, prevStartValue);
}
}
@@ -384,7 +392,7 @@ class RangePicker extends Component {
if (showTime) {
if (!prevEndValue) {
// 第一次选择，如果设置了时间默认值，则使用该默认时间
- if (showTime.defaultValue) {
+ if (typeof showTime === 'object' && showTime.defaultValue) {
const defaultTimeValue = formatDateValue(
Array.isArray(showTime.defaultValue)
? showTime.defaultValue[1] || showTime.defaultValue[0]
@@ -428,7 +436,7 @@ class RangePicker extends Component {
delete newState.endValue;
}
- this.setState(newState);
+ this.setState(newState as RangePickerState);
this.onValueChange([newStartValue, newEndValue]);
};
@@ -451,14 +459,14 @@ class RangePicker extends Component {
this.onValueChange([]);
};
- onDateInputChange = (inputStr, e, eventType) => {
+ onDateInputChange = (inputStr: string, e: SyntheticEvent, eventType?: string) => {
if (eventType === 'clear' || !inputStr) {
e.stopPropagation();
this.clearRange();
} else {
- const stateName = mapInputStateName(this.state.activeDateInput);
+ const stateName = mapInputStateName(this.state.activeDateInput!);
this.setState({
- [stateName]: inputStr,
+ [stateName!]: inputStr,
inputing: this.state.activeDateInput,
});
}
@@ -467,49 +475,50 @@ class RangePicker extends Component {
onDateInputBlur = () => {
const { resetTime } = this.props;
const { activeDateInput } = this.state;
- const stateName = mapInputStateName(activeDateInput);
- const dateInputStr = this.state[stateName];
+ const stateName = mapInputStateName(activeDateInput!);
+ const dateInputStr = this.state[stateName!];
if (dateInputStr) {
const { format, disabledDate } = this.props;
const parsed = moment(dateInputStr, format, true);
this.setState({
- [stateName]: '',
+ [stateName!]: '',
inputing: false,
});
if (parsed.isValid() && !disabledDate(parsed, 'date')) {
- const valueName = activeDateInput;
+ const valueName = activeDateInput as 'startValue' | 'endValue';
const newValue = resetTime
? parsed
- : resetValueTime(parsed, this.state[activeDateInput]);
+ : resetValueTime(parsed, this.state[activeDateInput!]);
this.handleChange(valueName, newValue);
}
}
};
- onDateInputKeyDown = e => {
+ onDateInputKeyDown = (e: KeyboardEvent) => {
const { type } = this.props;
const { activeDateInput, format } = this.state;
- const stateName = mapInputStateName(activeDateInput);
- const dateInputStr = this.state[stateName];
+ const stateName = mapInputStateName(activeDateInput!);
+ const dateInputStr = this.state[stateName!];
const dateStr = onDateKeydown(
e,
{
format,
- value: this.state[activeDateInput],
- dateInputStr,
+ value: this.state[activeDateInput!],
+ dateInputStr: dateInputStr!,
},
type === 'date' ? 'day' : type
);
if (!dateStr) return;
+ // @ts-expect-error 应该传入 e
return this.onDateInputChange(dateStr);
};
- onFocusDateInput = type => {
+ onFocusDateInput = (type: RangePickerState['activeDateInput']) => {
if (type !== this.state.activeDateInput) {
this.setState({
activeDateInput: type,
@@ -522,7 +531,7 @@ class RangePicker extends Component {
}
};
- onFocusTimeInput = type => {
+ onFocusTimeInput = (type: RangePickerState['activeDateInput']) => {
if (type !== this.state.activeDateInput) {
this.setState({
activeDateInput: type,
@@ -536,7 +545,7 @@ class RangePicker extends Component {
}
};
- onSelectStartTime = value => {
+ onSelectStartTime = (value: Moment) => {
if (!('value' in this.props)) {
this.setState({
startValue: value,
@@ -544,13 +553,13 @@ class RangePicker extends Component {
activeDateInput: 'startTime',
});
}
-
+ // @ts-expect-error 未考虑 startValue 为 null 的情况
if (value.valueOf() !== this.state.startValue.valueOf()) {
this.onValueChange([value, this.state.endValue]);
}
};
- onSelectEndTime = value => {
+ onSelectEndTime = (value: Moment) => {
if (!('value' in this.props)) {
this.setState({
endValue: value,
@@ -558,27 +567,28 @@ class RangePicker extends Component {
activeDateInput: 'endTime',
});
}
+ // @ts-expect-error 未考虑 endValue 为 null 的情况
if (value.valueOf() !== this.state.endValue.valueOf()) {
this.onValueChange([this.state.startValue, value]);
}
};
- onTimeInputChange = inputStr => {
- const stateName = mapInputStateName(this.state.activeDateInput);
+ onTimeInputChange = (inputStr: string) => {
+ const stateName = mapInputStateName(this.state.activeDateInput!);
this.setState({
- [stateName]: inputStr,
+ [stateName!]: inputStr,
inputing: this.state.activeDateInput,
});
};
onTimeInputBlur = () => {
- const stateName = mapInputStateName(this.state.activeDateInput);
- const timeInputStr = this.state[stateName];
+ const stateName = mapInputStateName(this.state.activeDateInput!);
+ const timeInputStr = this.state[stateName!];
const parsed = moment(timeInputStr, this.state.timeFormat, true);
this.setState({
- [stateName]: '',
+ [stateName!]: '',
inputing: false,
});
@@ -586,26 +596,31 @@ class RangePicker extends Component {
const hour = parsed.hour();
const minute = parsed.minute();
const second = parsed.second();
- const valueName = mapTimeToValue(this.state.activeDateInput);
- const newValue = this.state[valueName].clone().hour(hour).minute(minute).second(second);
-
- this.handleChange(valueName, newValue);
+ const valueName = mapTimeToValue(this.state.activeDateInput!);
+ // @ts-expect-error 未考虑 startValue 为 null 的情况
+ const newValue = this.state[valueName!]
+ .clone()
+ .hour(hour)
+ .minute(minute)
+ .second(second);
+
+ this.handleChange(valueName!, newValue);
}
};
- onTimeInputKeyDown = e => {
+ onTimeInputKeyDown = (e: KeyboardEvent) => {
const { showTime } = this.props;
const { activeDateInput, timeFormat } = this.state;
- const stateName = mapInputStateName(activeDateInput);
- const timeInputStr = this.state[stateName];
+ const stateName = mapInputStateName(activeDateInput!);
+ const timeInputStr = this.state[stateName!];
const {
disabledMinutes,
disabledSeconds,
hourStep = 1,
minuteStep = 1,
secondStep = 1,
- } = typeof showTime === 'object' ? showTime : {};
- let unit = 'second';
+ } = typeof showTime === 'object' ? showTime : ({} as TimePickerProps);
+ let unit: 'hour' | 'minute' | 'second' = 'second';
if (disabledSeconds) {
unit = disabledMinutes ? 'hour' : 'minute';
@@ -614,9 +629,9 @@ class RangePicker extends Component {
const timeStr = onTimeKeydown(
e,
{
- format: timeFormat,
- timeInputStr,
- value: this.state[activeDateInput.indexOf('start') ? 'startValue' : 'endValue'],
+ format: timeFormat!,
+ timeInputStr: timeInputStr!,
+ value: this.state[activeDateInput!.indexOf('start') ? 'startValue' : 'endValue'],
steps: {
hour: hourStep,
minute: minuteStep,
@@ -631,10 +646,10 @@ class RangePicker extends Component {
this.onTimeInputChange(timeStr);
};
- handleChange = (valueName, newValue) => {
- const values = ['startValue', 'endValue'].map(name =>
+ handleChange = (valueName: 'startValue' | 'endValue', newValue?: Moment | null) => {
+ const values = (['startValue', 'endValue'] as const).map(name =>
valueName === name ? newValue : this.state[name]
- );
+ ) as [start?: Moment | null, end?: Moment | null];
// 判断起始时间是否大于结束时间
if (values[0] && values[1] && values[0].valueOf() > values[1].valueOf()) {
@@ -650,7 +665,7 @@ class RangePicker extends Component {
this.onValueChange(values);
};
- onVisibleChange = (visible, type) => {
+ onVisibleChange = (visible: boolean, type: string) => {
if (!('visible' in this.props)) {
this.setState({
visible,
@@ -659,7 +674,7 @@ class RangePicker extends Component {
this.props.onVisibleChange(visible, type);
};
- changePanel = panel => {
+ changePanel = (panel: PanelType) => {
const { startValue, endValue } = this.state;
this.setState({
panel,
@@ -672,14 +687,18 @@ class RangePicker extends Component {
});
};
- onOk = value => {
+ onOk = (value?: [start?: Moment | null, end?: Moment | null]) => {
this.onVisibleChange(false, 'okBtnClick');
this.onValueChange(value || [this.state.startValue, this.state.endValue], 'onOk');
};
// 如果用户没有给定时间禁用逻辑，则给默认到禁用逻辑
- getDisabledTime = ({ startValue, endValue }) => {
- const { disabledHours, disabledMinutes, disabledSeconds } = this.props.showTime || {};
+ getDisabledTime = ({
+ startValue,
+ endValue,
+ }: { startValue?: Moment | null; endValue?: Moment | null } & Record) => {
+ const { disabledHours, disabledMinutes, disabledSeconds } = (this.props.showTime ||
+ {}) as TimePickerProps;
let disabledTime = {};
@@ -687,7 +706,7 @@ class RangePicker extends Component {
const isSameDay = startValue.format('L') === endValue.format('L');
const newDisabledHours = isFunction(disabledHours)
? disabledHours
- : index => {
+ : (index: number) => {
if (isSameDay && index < startValue.hour()) {
return true;
}
@@ -695,7 +714,7 @@ class RangePicker extends Component {
const newDisabledMinutes = isFunction(disabledMinutes)
? disabledMinutes
- : index => {
+ : (index: number) => {
if (
isSameDay &&
startValue.hour() === endValue.hour() &&
@@ -707,7 +726,7 @@ class RangePicker extends Component {
const newDisabledSeconds = isFunction(disabledSeconds)
? disabledSeconds
- : index => {
+ : (index: number) => {
if (
isSameDay &&
startValue.hour() === endValue.hour() &&
@@ -749,7 +768,10 @@ class RangePicker extends Component {
}
};
- renderPreview([startValue, endValue], others) {
+ renderPreview(
+ [startValue, endValue]: [Moment | null, Moment | null],
+ others: HTMLAttributes
+ ) {
const { prefix, className, renderPreview } = this.props;
const { dateTimeFormat } = this.state;
@@ -783,7 +805,7 @@ class RangePicker extends Component {
disabledDate,
footerRender,
label,
- ranges = {}, // 兼容0.x ranges 属性
+ ranges = {}, // 兼容 0.x ranges 属性
state: inputState,
size,
disabled,
@@ -851,7 +873,8 @@ class RangePicker extends Component {
if (isPreview) {
return this.renderPreview(
- [state.startValue, state.endValue],
+ [state.startValue!, state.endValue!],
+ // @ts-expect-error 应为 propTypes
obj.pickOthers(others, RangePicker.PropTypes)
);
}
@@ -1031,11 +1054,11 @@ class RangePicker extends Component {
/>
);
- const showSecond = state.timeFormat.indexOf('s') > -1;
- const showMinute = state.timeFormat.indexOf('m') > -1;
+ const showSecond = state.timeFormat!.indexOf('s') > -1;
+ const showMinute = state.timeFormat!.indexOf('m') > -1;
const sharedTimePickerProps = {
- ...showTime,
+ ...(showTime as TimePickerProps),
prefix,
locale,
disabled,
@@ -1051,7 +1074,7 @@ class RangePicker extends Component {
{...sharedTimePickerProps}
disabled={disabled || !state.startValue}
className={`${prefix}range-picker-panel-time-start`}
- value={state.startValue}
+ value={state.startValue!}
onSelect={this.onSelectStartTime}
/>
@@ -1073,7 +1096,7 @@ class RangePicker extends Component {
ranges={Object.keys(ranges).map(key => ({
label: key,
value: ranges[key],
- onChange: values => {
+ onChange: (values: [Moment, Moment]) => {
this.setState({
startValue: values[0],
endValue: values[1],
@@ -1087,16 +1110,16 @@ class RangePicker extends Component {
state.startValue.valueOf() > state.endValue.valueOf()
}
locale={locale}
- panel={state.panel}
+ panel={state.panel!}
onPanelChange={showTime ? this.changePanel : null}
- onOk={this.onOk}
+ onOk={this.onOk as PanelFooterProps['onOk']}
/>
);
const panelBody = {
[PANEL.DATE]: datePanel,
[PANEL.TIME]: timePanel,
- }[state.panel];
+ }[state.panel!];
const allowClear = (state.startValue || state.endValue) && hasClear;
let [startPlaceholder, endPlaceholder] = placeholder || [];
@@ -1131,6 +1154,7 @@ class RangePicker extends Component {
hasBorder={false}
className={`${prefix}range-picker-trigger-input`}
onFocus={() => this.onFocusDateInput('endValue')}
+ // @ts-expect-error allowClear 应先进行 boolean 转换
hasClear={allowClear}
hint={
-import { Moment } from 'moment';
-import React from 'react';
-import { CommonProps } from '../util';
-import { PopupProps } from '../overlay';
-import { InputProps } from '../input';
-
-interface HTMLAttributesWeak extends React.HTMLAttributes
{
- defaultValue?: any;
- onChange?: any;
-}
-
-export interface MonthPickerProps extends HTMLAttributesWeak, CommonProps {
+import type { Moment, MomentInput } from 'moment';
+import type React from 'react';
+import type { CommonProps } from '../util';
+import type { PopupProps } from '../overlay';
+import type { InputProps } from '../input';
+import type { TimePickerProps } from '../time-picker';
+import type { Locale } from '../locale/types';
+import type { RangeCalendarProps } from '../calendar';
+
+export interface MonthPickerProps
+ extends Omit, 'onChange' | 'defaultValue'>,
+ CommonProps {
name?: string;
/**
* 输入框内置标签
@@ -30,17 +29,17 @@ export interface MonthPickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 默认展现的年
*/
- defaultVisibleYear?: () => void;
+ defaultVisibleYear?: () => Moment | null;
/**
* 日期值（受控）moment 对象
*/
- value?: any;
+ value?: string | Moment | null;
/**
* 初始日期值，moment 对象
*/
- defaultValue?: any;
+ defaultValue?: string | Moment | null;
/**
* 日期值的格式（用于限定用户输入和展示）
@@ -60,7 +59,7 @@ export interface MonthPickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 日期值改变时的回调
*/
- onChange?: (value: any | string) => void;
+ onChange?: (value: Moment | string | null) => void;
/**
* 输入框尺寸
@@ -98,14 +97,14 @@ export interface MonthPickerProps extends HTMLAttributesWeak, CommonProps {
popupTriggerType?: 'click' | 'hover';
/**
- * 弹层对齐方式, 具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign?: string;
/**
* 弹层容器
*/
- popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+ popupContainer?: PopupProps['container'];
/**
* 弹层自定义样式
@@ -120,7 +119,22 @@ export interface MonthPickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 弹层其他属性
*/
- popupProps?: PopupProps;
+ popupProps?: React.PropsWithRef;
+
+ /**
+ * 自定义弹层
+ */
+ popupComponent?: React.ComponentType;
+
+ /**
+ * 自定义弹层内容
+ */
+ popupContent?: React.ReactElement;
+
+ /**
+ * 是否跟随滚动
+ */
+ followTrigger?: boolean;
/**
* 输入框其他属性
@@ -130,30 +144,45 @@ export interface MonthPickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 自定义月份渲染函数
*/
- monthCellRender?: (calendarDate: any) => React.ReactNode;
+ monthCellRender?: (calendarDate: Moment) => React.ReactNode;
/**
* 日期输入框的 aria-label 属性
*/
dateInputAriaLabel?: string;
+ renderPreview?: (value: Moment | null, props: MonthPickerProps) => void;
+ /**
+ * 自定义年份渲染函数
+ */
+ yearCellRender?: (calendarDate: Moment) => React.ReactNode;
+ /**
+ * 是否为预览态
+ */
+ isPreview?: boolean;
+ /**
+ * @skip
+ */
+ locale?: Locale['DatePicker'];
}
-export class MonthPicker extends React.Component {}
-
-interface HTMLAttributesWeak extends React.HTMLAttributes {
- defaultValue?: any;
- onChange?: any;
- placeholder?: any;
+export interface MonthPickerState {
+ value: Moment | null;
+ inputAsString: boolean;
+ visible: boolean | undefined;
+ dateInputStr: string;
+ inputing: boolean;
}
-export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
+export interface RangePickerProps
+ extends Omit, 'onChange' | 'defaultValue' | 'placeholder'>,
+ CommonProps {
name?: string;
type?: 'date' | 'month' | 'year';
/**
* 默认展示的起始月份
*/
- defaultVisibleMonth?: () => void;
+ defaultVisibleMonth?: () => Moment | null;
/**
* 输入提示
@@ -163,12 +192,15 @@ export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 日期范围值数组 [moment, moment]
*/
- value?: Array;
+ value?: [start: Moment | string | null | undefined, end?: Moment | string | undefined | null];
/**
* 初始的日期范围值数组 [moment, moment]
*/
- defaultValue?: Array;
+ defaultValue?: [
+ start: Moment | string | null | undefined,
+ end?: Moment | string | undefined | null,
+ ];
/**
* 日期格式
@@ -178,7 +210,11 @@ export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 是否使用时间控件，支持传入 TimePicker 的属性
*/
- showTime?: any | boolean;
+ showTime?:
+ | (Omit & {
+ defaultValue?: Moment | string | null | (Moment | string | null)[];
+ })
+ | boolean;
/**
* 每次选择是否重置时间（仅在 showTime 开启时有效）
@@ -198,12 +234,12 @@ export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 日期范围值改变时的回调 [ MomentObject|String, MomentObject|String ]
*/
- onChange?: (value: Array) => void;
+ onChange?: (value: (string | Moment | null | undefined)[]) => void;
/**
* 点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`
*/
- onOk?: (value: Array) => void;
+ onOk?: (value: (string | Moment | null | undefined)[]) => void;
/**
* 输入框内置标签
@@ -251,14 +287,14 @@ export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
popupTriggerType?: 'click' | 'hover';
/**
- * 弹层对齐方式, 具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign?: string;
/**
* 弹层容器
*/
- popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+ popupContainer?: PopupProps['container'];
/**
* 弹层自定义样式
@@ -273,7 +309,7 @@ export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 弹层其他属性
*/
- popupProps?: PopupProps;
+ popupProps?: React.PropsWithRef;
/**
* 输入框其他属性
@@ -304,16 +340,73 @@ export interface RangePickerProps extends HTMLAttributesWeak, CommonProps {
* 结束时间输入框的 aria-label 属性
*/
endTimeInputAriaLabel?: string;
-}
+ renderPreview?: (
+ value: [Moment | null, Moment | null],
+ props: RangePickerProps
+ ) => React.ReactNode;
+ onVisibleMonthChange?: RangeCalendarProps['onVisibleMonthChange'];
+ /**
+ * @skip
+ */
+ locale?: Locale['DatePicker'];
+ /**
+ * 自定义弹层
+ */
+ popupComponent?: React.ComponentType;
-export class RangePicker extends React.Component {}
+ /**
+ * 自定义弹层内容
+ */
+ popupContent?: React.ReactElement;
+ /**
+ * 自定义月份渲染函数
+ */
+ monthCellRender?: (calendarDate: Moment) => React.ReactNode;
-interface HTMLAttributesWeak extends React.HTMLAttributes {
- defaultValue?: any;
- onChange?: any;
+ /**
+ * 自定义年份渲染函数
+ */
+ yearCellRender?: (calendarDate: Moment) => React.ReactNode;
+ /**
+ * 是否跟随滚动
+ */
+ followTrigger?: boolean;
+ /**
+ * 是否为预览态
+ */
+ isPreview?: boolean;
+ /**
+ * 年份范围，[START_YEAR, END_YEAR]
+ * @en Year range, [START_YEAR, END_YEAR]
+ */
+ yearRange?: [start: number, end: number];
+ ranges?: {
+ [key: string]: MomentInput[];
+ };
+}
+
+export interface RangePickerState {
+ startValue?: Moment | null;
+ endValue?: Moment | null;
+ startTime?: Moment | null;
+ endTime?: Moment | null;
+ inputAsString?: boolean | undefined;
+ visible?: boolean;
+ startDateInputStr?: string;
+ endDateInputStr?: string;
+ activeDateInput?: 'startValue' | 'endValue' | 'startTime' | 'endTime';
+ startTimeInputStr?: string;
+ endTimeInputStr?: string;
+ inputing?: boolean | string;
+ panel?: PanelType;
+ format?: string | undefined;
+ timeFormat?: string;
+ dateTimeFormat?: string | undefined;
}
-export interface YearPickerProps extends HTMLAttributesWeak, CommonProps {
+export interface YearPickerProps
+ extends Omit, 'onChange' | 'defaultValue'>,
+ CommonProps {
name?: string;
/**
* 输入框内置标签
@@ -333,12 +426,12 @@ export interface YearPickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 日期值（受控）moment 对象
*/
- value?: any;
+ value?: string | Moment | null;
/**
* 初始日期值，moment 对象
*/
- defaultValue?: any;
+ defaultValue?: string | Moment | null;
/**
* 日期值的格式（用于限定用户输入和展示）
@@ -358,7 +451,7 @@ export interface YearPickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 日期值改变时的回调
*/
- onChange?: (value: {} | string) => void;
+ onChange?: (value: Moment | string | null) => void;
/**
* 输入框尺寸
@@ -396,14 +489,14 @@ export interface YearPickerProps extends HTMLAttributesWeak, CommonProps {
popupTriggerType?: 'click' | 'hover';
/**
- * 弹层对齐方式, 具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign?: string;
/**
* 弹层容器
*/
- popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+ popupContainer?: PopupProps['container'];
/**
* 弹层自定义样式
@@ -418,7 +511,7 @@ export interface YearPickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 弹层其他属性
*/
- popupProps?: PopupProps;
+ popupProps?: React.PropsWithRef;
/**
* 输入框其他属性
@@ -429,15 +522,45 @@ export interface YearPickerProps extends HTMLAttributesWeak, CommonProps {
* 日期输入框的 aria-label 属性
*/
dateInputAriaLabel?: string;
+ renderPreview?: (value: Moment | null, props: DatePickerProps) => React.ReactNode;
+ /**
+ * 自定义弹层
+ */
+ popupComponent?: React.ComponentType;
+
+ /**
+ * 自定义弹层内容
+ */
+ popupContent?: React.ReactElement;
+ /**
+ * @skip
+ */
+ locale?: Locale['DatePicker'];
+ /**
+ * 是否跟随滚动
+ */
+ followTrigger?: boolean;
+ /**
+ * 自定义年份渲染函数
+ */
+ yearCellRender?: (calendarDate: Moment) => React.ReactNode;
+ /**
+ * 是否为预览态
+ */
+ isPreview?: boolean;
}
-export class YearPicker extends React.Component {}
-interface HTMLAttributesWeak extends React.HTMLAttributes {
- defaultValue?: any;
- onChange?: any;
+export interface YearPickerState {
+ value: Moment | null;
+ inputAsString: boolean;
+ visible: boolean | undefined;
+ dateInputStr: string;
+ inputing: boolean;
}
-export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
+export interface DatePickerProps
+ extends Omit, 'onChange' | 'defaultValue'>,
+ CommonProps {
name?: string;
/**
* 输入框内置标签
@@ -467,12 +590,12 @@ export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 日期值（受控）moment 对象
*/
- value?: any;
+ value?: string | Moment | null;
/**
* 初始日期值，moment 对象
*/
- defaultValue?: any;
+ defaultValue?: string | Moment | null;
/**
* 日期值的格式（用于限定用户输入和展示）
@@ -480,9 +603,9 @@ export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
format?: string;
/**
- * 是否使用时间控件，传入 TimePicker 的属性 { defaultValue, format, ... }
+ * 是否使用时间控件，传入 TimePicker 的属性 \{ defaultValue, format, ... \}
*/
- showTime?: any | boolean;
+ showTime?: TimePickerProps | boolean;
/**
* 每次选择日期时是否重置时间（仅在 showTime 开启时有效）
@@ -502,12 +625,12 @@ export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 日期值改变时的回调
*/
- onChange?: (value: {} | string) => void;
+ onChange?: (value: string | Moment | null) => void;
/**
* 点击确认按钮时的回调
*/
- onOk?: (value: {} | string) => void;
+ onOk?: (value: string | Moment | null) => void;
/**
* 输入框尺寸
@@ -550,14 +673,14 @@ export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
popupTriggerType?: 'click' | 'hover';
/**
- * 弹层对齐方式,具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign?: string;
/**
* 弹层容器
*/
- popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+ popupContainer?: PopupProps['container'];
/**
* 弹层自定义样式
@@ -572,7 +695,7 @@ export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 弹层其他属性
*/
- popupProps?: PopupProps;
+ popupProps?: React.PropsWithRef;
/**
* 输入框其他属性
@@ -609,7 +732,7 @@ export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
*/
isPreview?: boolean;
- renderPreview?: (value: any) => React.ReactNode;
+ renderPreview?: (value: Moment | null, props: DatePickerProps) => React.ReactNode;
/**
* 是否跟随滚动
@@ -619,22 +742,177 @@ export interface DatePickerProps extends HTMLAttributesWeak, CommonProps {
/**
* 自定义弹层
*/
- popupComponent?: React.ComponentType;
+ popupComponent?: React.ComponentType;
/**
* 自定义弹层内容
*/
- popupContent?: React.ReactNode;
+ popupContent?: React.ReactElement;
/**
* 禁用日期选择器的日期模式切换
*/
disableChangeMode?: boolean;
+ /**
+ * 年份范围，[START_YEAR, END_YEAR]
+ * @en Year range, [START_YEAR, END_YEAR]
+ */
+ yearRange?: [start: number, end: number];
+ /**
+ * @skip
+ */
+ locale?: Locale['DatePicker'];
+}
+
+export type PanelType = 'time-panel' | 'date-panel';
+
+export interface DatePickerState {
+ value: Moment | null;
+ inputAsString: boolean;
+ dateInputStr: string;
+ timeInputStr: string;
+ inputing: false | 'date' | 'time';
+ visible: boolean;
+ panel: PanelType;
+ format: string;
+ timeFormat: string;
+ dateTimeFormat: string;
+ [key: string]: unknown;
+}
+
+export interface PanelFooterProps extends Pick {
+ panel: PanelType;
+ onPanelChange?: ((panel: PanelType) => void) | null;
+ onOk: (value?: Moment[]) => void;
+ locale: Locale['DatePicker'];
+ disabledOk?: boolean;
+ ranges?: { label: React.Key; value?: MomentInput[]; onChange: (value: Moment[]) => void }[];
+ value?: unknown;
+}
+
+export interface WeekPickerProps
+ extends Omit, 'onChange' | 'defaultValue'>,
+ CommonProps {
+ value?: string | Moment | null;
+ defaultValue?: string | Moment | null;
+ visible?: boolean;
+ defaultVisible?: boolean;
+ /**
+ * 日期值的格式（用于限定用户输入和展示）
+ */
+ format?: string;
+ /**
+ * 日期值改变时的回调
+ */
+ onChange?: (value: Moment | string | null) => void;
+ /**
+ * 弹层展示状态变化时的回调
+ */
+ onVisibleChange?: (visible: boolean, reason: string) => void;
+ renderPreview?: (value: Moment | null, props: DatePickerProps) => React.ReactNode;
+ /**
+ * 自定义日期渲染函数
+ */
+ dateCellRender?: (calendarDate: Moment) => React.ReactNode;
+ /**
+ * @skip
+ */
+ locale?: Locale['DatePicker'];
+ /**
+ * 输入框内置标签
+ */
+ label?: React.ReactNode;
+ /**
+ * 输入框状态
+ */
+ state?: 'success' | 'loading' | 'error';
+ /**
+ * 默认展现的月
+ */
+ defaultVisibleMonth?: () => Moment;
+ /**
+ * 弹层展示月份变化时的回调
+ */
+ onVisibleMonthChange?: (value: Moment, reason: string) => void;
+ /**
+ * 禁用日期函数
+ */
+ disabledDate?: (date: Moment, view: string) => boolean;
+ /**
+ * 自定义面板页脚
+ */
+ footerRender?: () => React.ReactNode;
+ /**
+ * 输入框尺寸
+ */
+ size?: 'small' | 'medium' | 'large';
+ /**
+ * 是否禁用
+ */
+ disabled?: boolean;
+ /**
+ * 是否显示清空按钮
+ */
+ hasClear?: boolean;
+ /**
+ * 弹层触发方式
+ */
+ popupTriggerType?: 'click' | 'hover';
+ /**
+ * 弹层对齐方式，具体含义见 OverLay 文档
+ */
+ popupAlign?: string;
+ /**
+ * 弹层容器
+ */
+ popupContainer?: PopupProps['container'];
+
+ /**
+ * 弹层自定义样式
+ */
+ popupStyle?: React.CSSProperties;
+
+ /**
+ * 弹层自定义样式类
+ */
+ popupClassName?: string;
+
+ /**
+ * 弹层其他属性
+ */
+ popupProps?: React.PropsWithRef;
+
+ /**
+ * 自定义弹层
+ */
+ popupComponent?: React.ComponentType;
+ /**
+ * 自定义弹层内容
+ */
+ popupContent?: React.ReactElement;
+ /**
+ * 是否跟随滚动
+ */
+ followTrigger?: boolean;
+ /**
+ * 输入框其他属性
+ */
+ inputProps?: InputProps;
+ /**
+ * 自定义月份渲染函数
+ */
+ monthCellRender?: (calendarDate: Moment) => React.ReactNode;
+ /**
+ * 自定义年份渲染函数
+ */
+ yearCellRender?: (calendarDate: Moment) => React.ReactNode;
+ /**
+ * 是否为预览态
+ */
+ isPreview?: boolean;
}
-export default class DatePicker extends React.Component {
- static MonthPicker: typeof MonthPicker;
- static RangePicker: typeof RangePicker;
- static YearPicker: typeof YearPicker;
- static WeekPicker: React.ComponentType;
+export interface WeekPickerState {
+ value: Moment | null;
+ visible: boolean | undefined;
}
diff --git a/components/date-picker/util/index.ts b/components/date-picker/util/index.ts
index c28f185ce7..dc6469f175 100644
--- a/components/date-picker/util/index.ts
+++ b/components/date-picker/util/index.ts
@@ -1,30 +1,43 @@
-import moment from 'moment';
+import moment, { type MomentFormatSpecification, type Moment } from 'moment';
+import { type KeyboardEvent } from 'react';
import { KEYCODE } from '../../util';
+import { type TimePickerProps } from '../../time-picker';
+import { type RangePickerProps } from '../types';
export const PANEL = {
TIME: 'time-panel',
DATE: 'date-panel',
-};
+} as const;
export const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
-export function isFunction(obj) {
+export function isFunction(obj: unknown) {
+ // @ts-expect-error 目前的写法 ts 不友好，其实可以写成更简洁的 typeof 判断
return !!(obj && obj.constructor && obj.call && obj.apply);
}
+type ResetValueTimeReturn = T extends Moment ? (S extends Moment ? Moment : T) : T;
+
/**
* 将 source 的 time 替换为 target 的 time
- * @param {Object} source 输入值
- * @param {Object} target 目标值
+ * @param source - 输入值
+ * @param target - 目标值
*/
-export function resetValueTime(source, target) {
+export function resetValueTime(source: T, target: S): ResetValueTimeReturn {
if (!moment.isMoment(source) || !moment.isMoment(target)) {
- return source;
+ return source as ResetValueTimeReturn;
}
- return source.clone().hour(target.hour()).minute(target.minute()).second(target.second());
+ return source
+ .clone()
+ .hour(target.hour())
+ .minute(target.minute())
+ .second(target.second()) as ResetValueTimeReturn;
}
-export function formatDateValue(value, format) {
+export function formatDateValue(
+ value: string | Moment | undefined | null,
+ format?: MomentFormatSpecification
+) {
const val = typeof value === 'string' ? moment(value, format, false) : value;
if (val && moment.isMoment(val) && val.isValid()) {
return val;
@@ -33,7 +46,11 @@ export function formatDateValue(value, format) {
return null;
}
-export function checkDateValue(props, propName, componentName) {
+export function checkDateValue(
+ props: Record,
+ propName: string,
+ componentName: string
+) {
// 支持传入 moment 对象或字符串，字符串不检测是否为日期字符串
if (
props[propName] &&
@@ -46,7 +63,11 @@ export function checkDateValue(props, propName, componentName) {
}
}
-export function getDateTimeFormat(format, showTime, type) {
+export function getDateTimeFormat(
+ format: string | undefined,
+ showTime: RangePickerProps['showTime'],
+ type?: 'date' | 'month' | 'year' | 'time'
+) {
if (!format && type) {
format = {
date: 'YYYY-MM-DD',
@@ -55,7 +76,7 @@ export function getDateTimeFormat(format, showTime, type) {
time: '',
}[type];
}
- const timeFormat = showTime ? showTime.format || DEFAULT_TIME_FORMAT : '';
+ const timeFormat = showTime ? (showTime as TimePickerProps).format || DEFAULT_TIME_FORMAT : '';
const dateTimeFormat = timeFormat ? `${format} ${timeFormat}` : format;
return {
format,
@@ -64,28 +85,40 @@ export function getDateTimeFormat(format, showTime, type) {
};
}
-export function extend(source, target) {
+export function extend, T extends Record>(
+ source: S,
+ target: T
+): S & T {
for (const key in source) {
if (source.hasOwnProperty(key)) {
- target[key] = source[key];
+ (target as Record)[key] = source[key];
}
}
- return target;
+ return target as S & T;
}
/**
* 监听键盘事件，操作日期字符串
- * @param {KeyboardEvent} e 事件对象
- * @param {Object} param1
- * @param {String} type 类型 year month day
+ * @param e - 事件对象
+ * @param param1 - 参数
+ * @param type - 类型 year month day
*/
-export function onDateKeydown(e, { format, dateInputStr, value }, type) {
+export function onDateKeydown(
+ e: KeyboardEvent,
+ {
+ format,
+ dateInputStr,
+ value,
+ }: { format?: string; dateInputStr: string; value?: Moment | null },
+ type: 'year' | 'month' | 'day'
+) {
if ([KEYCODE.UP, KEYCODE.DOWN, KEYCODE.PAGE_UP, KEYCODE.PAGE_DOWN].indexOf(e.keyCode) === -1) {
return;
}
if (
(e.altKey && [KEYCODE.PAGE_UP, KEYCODE.PAGE_DOWN].indexOf(e.keyCode) === -1) ||
+ // @ts-expect-error 没有 controlKey，应该是 ctrlKey
e.controlKey ||
e.shiftKey
) {
@@ -122,11 +155,25 @@ export function onDateKeydown(e, { format, dateInputStr, value }, type) {
/**
* 监听键盘事件，操作时间
- * @param {KeyboardEvent} e
- * @param {Object} param1
- * @param {String} type second hour minute
+ * @param e - 事件对象
+ * @param param1 - 参数
+ * @param type - second hour minute
*/
-export function onTimeKeydown(e, { format, timeInputStr, steps, value }, type) {
+export function onTimeKeydown(
+ e: KeyboardEvent,
+ {
+ format,
+ timeInputStr,
+ steps,
+ value,
+ }: {
+ format: string;
+ timeInputStr: string;
+ steps: Record;
+ value?: Moment | null;
+ },
+ type: 'second' | 'minute' | 'hour'
+) {
if ([KEYCODE.UP, KEYCODE.DOWN, KEYCODE.PAGE_UP, KEYCODE.PAGE_DOWN].indexOf(e.keyCode) === -1)
return;
if (
diff --git a/components/date-picker/week-picker.tsx b/components/date-picker/week-picker.tsx
index 46ed6d2c63..9c93eb817c 100644
--- a/components/date-picker/week-picker.tsx
+++ b/components/date-picker/week-picker.tsx
@@ -1,7 +1,12 @@
-import React, { Component } from 'react';
+import React, {
+ Component,
+ type HTMLAttributes,
+ type KeyboardEvent,
+ type SyntheticEvent,
+} from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
-import moment from 'moment';
+import moment, { type Moment } from 'moment';
import { polyfill } from 'react-lifecycles-compat';
import Overlay from '../overlay';
import Input from '../input';
@@ -9,15 +14,18 @@ import Icon from '../icon';
import Calendar from '../calendar';
import ConfigProvider from '../config-provider';
import nextLocale from '../locale/zh-cn';
-import { func, obj, KEYCODE } from '../util';
+import { func, obj, KEYCODE, type ClassPropsWithDefault } from '../util';
import { checkDateValue, formatDateValue } from './util';
+import type { WeekPickerProps, WeekPickerState } from './types';
const { Popup } = Overlay;
+type InnerWeekPickerProps = ClassPropsWithDefault;
+
/**
* DatePicker.WeekPicker
*/
-class WeekPicker extends Component {
+class WeekPicker extends Component {
static propTypes = {
...ConfigProvider.propTypes,
prefix: PropTypes.string,
@@ -36,7 +44,6 @@ class WeekPicker extends Component {
placeholder: PropTypes.string,
/**
* 默认展现的月
- * @return {MomentObject} 返回包含指定月份的 moment 对象实例
*/
defaultVisibleMonth: PropTypes.func,
onVisibleMonthChange: PropTypes.func,
@@ -54,19 +61,14 @@ class WeekPicker extends Component {
format: PropTypes.string,
/**
* 禁用日期函数
- * @param {MomentObject} 日期值
- * @param {String} view 当前视图类型，year: 年， month: 月, date: 日
- * @return {Boolean} 是否禁用
*/
disabledDate: PropTypes.func,
/**
* 自定义面板页脚
- * @return {Node} 自定义的面板页脚组件
*/
footerRender: PropTypes.func,
/**
* 日期值改变时的回调
- * @param {MomentObject|String} value 日期值
*/
onChange: PropTypes.func,
/**
@@ -91,8 +93,6 @@ class WeekPicker extends Component {
defaultVisible: PropTypes.bool,
/**
* 弹层展示状态变化时的回调
- * @param {Boolean} visible 弹层是否显示
- * @param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
*/
onVisibleChange: PropTypes.func,
/**
@@ -100,13 +100,11 @@ class WeekPicker extends Component {
*/
popupTriggerType: PropTypes.oneOf(['click', 'hover']),
/**
- * 弹层对齐方式,具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign: PropTypes.string,
/**
* 弹层容器
- * @param {Element} target 目标元素
- * @return {Element} 弹层的容器元素
*/
popupContainer: PropTypes.any,
/**
@@ -131,14 +129,10 @@ class WeekPicker extends Component {
inputProps: PropTypes.object,
/**
* 自定义日期渲染函数
- * @param {Object} value 日期值（moment对象）
- * @returns {ReactNode}
*/
dateCellRender: PropTypes.func,
/**
* 自定义月份渲染函数
- * @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
- * @returns {ReactNode}
*/
monthCellRender: PropTypes.func,
/**
@@ -147,7 +141,6 @@ class WeekPicker extends Component {
isPreview: PropTypes.bool,
/**
* 预览态模式下渲染的内容
- * @param {MomentObject} value 年份
*/
renderPreview: PropTypes.func,
yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
@@ -174,8 +167,10 @@ class WeekPicker extends Component {
onVisibleChange: func.noop,
};
- constructor(props, context) {
- super(props, context);
+ readonly props: InnerWeekPickerProps;
+
+ constructor(props: WeekPickerProps) {
+ super(props);
const value = formatDateValue(props.value || props.defaultValue, props.format);
@@ -185,8 +180,8 @@ class WeekPicker extends Component {
};
}
- static getDerivedStateFromProps(props) {
- const st = {};
+ static getDerivedStateFromProps(props: InnerWeekPickerProps) {
+ const st: Partial = {};
if ('value' in props) {
st.value = formatDateValue(props.value, props.format);
}
@@ -198,7 +193,7 @@ class WeekPicker extends Component {
return st;
}
- handleChange = (newValue, prevValue) => {
+ handleChange = (newValue: Moment | null, prevValue: Moment | null) => {
if (!('value' in this.props)) {
this.setState({
value: newValue,
@@ -213,14 +208,14 @@ class WeekPicker extends Component {
}
};
- onDateInputChange = (value, e, eventType) => {
+ onDateInputChange = (value: Moment | null, e: SyntheticEvent, eventType: string) => {
if (eventType === 'clear' || !value) {
e.stopPropagation();
this.handleChange(null, this.state.value);
}
};
- onKeyDown = e => {
+ onKeyDown = (e: KeyboardEvent) => {
if (
[KEYCODE.UP, KEYCODE.DOWN, KEYCODE.PAGE_UP, KEYCODE.PAGE_DOWN].indexOf(e.keyCode) === -1
) {
@@ -229,6 +224,7 @@ class WeekPicker extends Component {
if (
(e.altKey && [KEYCODE.PAGE_UP, KEYCODE.PAGE_DOWN].indexOf(e.keyCode) === -1) ||
+ // @ts-expect-error 没有 controlKey，应该是 ctrlKey
e.controlKey ||
e.shiftKey
) {
@@ -262,7 +258,7 @@ class WeekPicker extends Component {
this.handleChange(date, this.state.value);
};
- onVisibleChange = (visible, type) => {
+ onVisibleChange = (visible: boolean, type: string) => {
if (!('visible' in this.props)) {
this.setState({
visible,
@@ -271,12 +267,12 @@ class WeekPicker extends Component {
this.props.onVisibleChange(visible, type);
};
- onSelectCalendarPanel = value => {
+ onSelectCalendarPanel = (value: Moment | null) => {
this.handleChange(value, this.state.value);
this.onVisibleChange(false, 'calendarSelect');
};
- renderPreview(others) {
+ renderPreview(others: HTMLAttributes) {
const { prefix, format, className, renderPreview } = this.props;
const { value } = this.state;
const previewCls = classnames(className, `${prefix}form-preview`);
@@ -298,7 +294,7 @@ class WeekPicker extends Component {
);
}
- dateRender = value => {
+ dateRender = (value: Moment) => {
const { prefix, dateCellRender } = this.props;
const selectedValue = this.state.value;
const content =
@@ -375,6 +371,7 @@ class WeekPicker extends Component {
}
if (isPreview) {
+ // @ts-expect-error 应是 propTypes
return this.renderPreview(obj.pickOthers(others, WeekPicker.PropTypes));
}
@@ -395,6 +392,7 @@ class WeekPicker extends Component {
className={`${prefix}date-picker-symbol-calendar-icon`}
/>
}
+ // @ts-expect-error allowClear 应该先做 boolean 化处理
hasClear={value && hasClear}
className={`${prefix}week-picker-input`}
/>
diff --git a/components/date-picker/year-picker.tsx b/components/date-picker/year-picker.tsx
index 3dd97815df..5ee65622a7 100644
--- a/components/date-picker/year-picker.tsx
+++ b/components/date-picker/year-picker.tsx
@@ -1,22 +1,30 @@
-import React, { Component } from 'react';
+import React, {
+ Component,
+ type HTMLAttributes,
+ type KeyboardEvent,
+ type SyntheticEvent,
+} from 'react';
import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
import classnames from 'classnames';
-import moment from 'moment';
+import moment, { type Moment } from 'moment';
import Overlay from '../overlay';
import Input from '../input';
import Icon from '../icon';
import Calendar from '../calendar';
import nextLocale from '../locale/zh-cn';
-import { func, obj } from '../util';
+import { type ClassPropsWithDefault, func, obj } from '../util';
import { checkDateValue, formatDateValue, onDateKeydown } from './util';
+import type { YearPickerProps, YearPickerState } from './types';
const { Popup } = Overlay;
+type InnerYearPickerProps = ClassPropsWithDefault;
+
/**
* DatePicker.YearPicker
*/
-class YearPicker extends Component {
+class YearPicker extends Component {
static propTypes = {
prefix: PropTypes.string,
rtl: PropTypes.bool,
@@ -46,19 +54,14 @@ class YearPicker extends Component {
format: PropTypes.string,
/**
* 禁用日期函数
- * @param {MomentObject} 日期值
- * @param {String} view 当前视图类型，year: 年， month: 月, date: 日
- * @return {Boolean} 是否禁用
*/
disabledDate: PropTypes.func,
/**
* 自定义面板页脚
- * @return {Node} 自定义的面板页脚组件
*/
footerRender: PropTypes.func,
/**
* 日期值改变时的回调
- * @param {MomentObject|String} value 日期值
*/
onChange: PropTypes.func,
/**
@@ -83,8 +86,6 @@ class YearPicker extends Component {
defaultVisible: PropTypes.bool,
/**
* 弹层展示状态变化时的回调
- * @param {Boolean} visible 弹层是否显示
- * @param {String} reason 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
*/
onVisibleChange: PropTypes.func,
/**
@@ -92,13 +93,11 @@ class YearPicker extends Component {
*/
popupTriggerType: PropTypes.oneOf(['click', 'hover']),
/**
- * 弹层对齐方式, 具体含义见 OverLay文档
+ * 弹层对齐方式，具体含义见 OverLay 文档
*/
popupAlign: PropTypes.string,
/**
* 弹层容器
- * @param {Element} target 目标元素
- * @return {Element} 弹层的容器元素
*/
popupContainer: PropTypes.any,
/**
@@ -132,7 +131,6 @@ class YearPicker extends Component {
isPreview: PropTypes.bool,
/**
* 预览态模式下渲染的内容
- * @param {MomentObject} value 年份
*/
renderPreview: PropTypes.func,
locale: PropTypes.object,
@@ -157,8 +155,10 @@ class YearPicker extends Component {
onVisibleChange: func.noop,
};
- constructor(props, context) {
- super(props, context);
+ readonly props: InnerYearPickerProps;
+
+ constructor(props: YearPickerProps) {
+ super(props);
this.state = {
value: formatDateValue(props.defaultValue, props.format),
@@ -169,8 +169,8 @@ class YearPicker extends Component {
};
}
- static getDerivedStateFromProps(props) {
- const states = {};
+ static getDerivedStateFromProps(props: InnerYearPickerProps) {
+ const states: Partial = {};
if ('value' in props) {
states.value = formatDateValue(props.value, props.format);
if (typeof props.value === 'string') {
@@ -188,14 +188,13 @@ class YearPicker extends Component {
return states;
}
- onValueChange = newValue => {
+ onValueChange = (newValue: Moment | null) => {
const ret =
this.state.inputAsString && newValue ? newValue.format(this.props.format) : newValue;
this.props.onChange(ret);
};
- onSelectCalendarPanel = value => {
- // const { format } = this.props;
+ onSelectCalendarPanel = (value: Moment) => {
const prevSelectedMonth = this.state.value;
const selectedMonth = value.clone().month(0).date(1).hour(0).minute(0).second(0);
@@ -212,7 +211,7 @@ class YearPicker extends Component {
this.handleChange(null, this.state.value);
};
- onDateInputChange = (inputStr, e, eventType) => {
+ onDateInputChange = (inputStr: string, e: SyntheticEvent, eventType?: string) => {
if (eventType === 'clear' || !inputStr) {
e.stopPropagation();
this.clearValue();
@@ -241,15 +240,21 @@ class YearPicker extends Component {
}
};
- onKeyDown = e => {
+ onKeyDown = (e: KeyboardEvent) => {
const { format } = this.props;
const { dateInputStr, value } = this.state;
const dateStr = onDateKeydown(e, { format, dateInputStr, value }, 'year');
if (!dateStr) return;
+ // @ts-expect-error 应该传入 e
this.onDateInputChange(dateStr);
};
- handleChange = (newValue, prevValue, others = {}, callback) => {
+ handleChange = (
+ newValue: Moment | null,
+ prevValue: Moment | null,
+ others = {},
+ callback?: () => void
+ ) => {
if (!('value' in this.props)) {
this.setState({
value: newValue,
@@ -274,7 +279,7 @@ class YearPicker extends Component {
}
};
- onVisibleChange = (visible, reason) => {
+ onVisibleChange = (visible: boolean, reason: string) => {
if (!('visible' in this.props)) {
this.setState({
visible,
@@ -283,7 +288,7 @@ class YearPicker extends Component {
this.props.onVisibleChange(visible, reason);
};
- renderPreview(others) {
+ renderPreview(others: HTMLAttributes) {
const { prefix, format, className, renderPreview } = this.props;
const { value } = this.state;
const previewCls = classnames(className, `${prefix}form-preview`);
@@ -359,6 +364,7 @@ class YearPicker extends Component {
}
if (isPreview) {
+ // @ts-expect-error 应是 propTypes
return this.renderPreview(obj.pickOthers(others, YearPicker.PropTypes));
}
@@ -419,6 +425,7 @@ class YearPicker extends Component {
className={`${prefix}date-picker-symbol-calendar-icon`}
/>
}
+ // @ts-expect-error allowClear 应该先做 boolean 化处理
hasClear={allowClear}
className={triggerInputCls}
/>
diff --git a/components/overlay/__docs__/index.en-us.md b/components/overlay/__docs__/index.en-us.md
index a5b32c0615..231359e373 100644
--- a/components/overlay/__docs__/index.en-us.md
+++ b/components/overlay/__docs__/index.en-us.md
@@ -48,10 +48,10 @@ Popup is the wrapper of Overlay. It receives a node as a trigger node and pops u
| children | Content of overlay | React.ReactElement & { ref?: React.RefCallback\ } | - | | - |
| visible | Whether to show the overlay | boolean | false | | - |
| onRequestClose | Callback function that triggers an event when the overlay request closed | (type: string, e: Event \| React.MouseEvent\) => void | - | | - |
-| target | Reference element for overlay positioning | Target | Position.VIEWPORT | | - |
+| target | Reference element for overlay positioning | PropTarget | Position.VIEWPORT | | - |
| align | Alignment of the overlay relative to the reference element, see [Alignment](#Alignment) | string \| boolean | 'tl bl' | | - |
| offset | Fine | Array\ | [0, 0] | | - |
-| container | Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly. | Target | - | | - |
+| container | Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly. | PropTarget | - | | - |
| hasMask | Whether to show the mask | boolean | false | | - |
| canCloseByEsc | Whether to support pressing esc to close the overlay | boolean | true | | - |
| canCloseByOutSideClick | Whether to support clicking the outside to close the overlay when the mask is hidden | boolean | true | | - |
@@ -84,10 +84,10 @@ Popup is the wrapper of Overlay. It receives a node as a trigger node and pops u
| children | Content of overlay | React.ReactElement & { ref?: React.RefCallback\ } | - | | - |
| visible | Whether to show the overlay | boolean | false | | - |
| onRequestClose | Callback function that triggers an event when the overlay request closed | (type: string, e: Event \| React.MouseEvent\) => void | - | | - |
-| target | Reference element for overlay positioning | Target | Position.VIEWPORT | | - |
+| target | Reference element for overlay positioning | PropTarget | Position.VIEWPORT | | - |
| align | Alignment of the overlay relative to the reference element, see [Alignment](#Alignment) | string | 'tl bl' | | - |
| offset | Fine | Array\ | [0, 0] | | - |
-| container | Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly. | Target | - | | - |
+| container | Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly. | PropTarget | - | | - |
| hasMask | Whether to show the mask | boolean | false | | - |
| canCloseByEsc | Whether to support pressing esc to close the overlay | boolean | true | | - |
| canCloseByOutSideClick | Whether to support clicking the outside to close the overlay when the mask is hidden | boolean | true | | - |
@@ -120,7 +120,7 @@ Popup is the wrapper of Overlay. It receives a node as a trigger node and pops u
| children | Content of overlay | React.ReactElement | - | |
| autoFit | Whether the overlay is automatically adapted to the content | boolean | false | |
| visible | Whether the overlay is visible currently | boolean | false | |
-| target | Reference element for overlay positioning | Target | - | |
+| target | Reference element for overlay positioning | PropTarget | - | |
| trigger | Trigger the overlay to show or hide elements | React.ReactElement | - | |
| triggerType | Trigger the overlay to show or hide operations, either 'click', 'hover', 'focus', or an array of them, such as ['hover', 'focus'] | 'click' \| 'hover' \| 'focus' \| Array\<'click' \| 'hover' \| 'focus'> | 'hover' | |
| triggerClickKeycode | Customize the keyboard trigger keys that will trigger click event handlers when trigger is focused. It will only take effect when the triggerType is 'click'. | number \| Array\ | [KEYCODE.SPACE, KEYCODE.ENTER] | |
@@ -143,7 +143,7 @@ Popup is the wrapper of Overlay. It receives a node as a trigger node and pops u
| children | Content of overlay | React.ReactElement | - | |
| autoFit | Whether the overlay is automatically adapted to the content | boolean | false | |
| visible | Whether the overlay is visible currently | boolean | false | |
-| target | Reference element for overlay positioning | Target | - | |
+| target | Reference element for overlay positioning | PropTarget | - | |
| trigger | Trigger the overlay to show or hide elements | React.ReactElement | - | |
| triggerType | Trigger the overlay to show or hide operations, either 'click', 'hover', 'focus', or an array of them, such as ['hover', 'focus'] | 'click' \| 'hover' \| 'focus' \| Array\<'click' \| 'hover' \| 'focus'> | 'hover' | |
| triggerClickKeycode | Customize the keyboard trigger keys that will trigger click event handlers when trigger is focused. It will only take effect when the triggerType is 'click'. | number \| Array\ | [KEYCODE.SPACE, KEYCODE.ENTER] | |
@@ -160,17 +160,17 @@ Popup is the wrapper of Overlay. It receives a node as a trigger node and pops u
### Overlay.Position
-| Param | Description | Type | Default Value | Required |
-| -------- | ----------------------------------------- | -------------------- | ------------- | -------- |
-| children | Content of overlay | React.ReactElement | - | |
-| target | Reference element for overlay positioning | Target \| 'viewport' | - | |
+| Param | Description | Type | Default Value | Required |
+| -------- | ----------------------------------------- | ------------------------ | ------------- | -------- |
+| children | Content of overlay | React.ReactElement | - | |
+| target | Reference element for overlay positioning | PropTarget \| 'viewport' | - | |
### Overlay.Gateway
| Param | Description | Type | Default Value | Required |
| -------- | ----------------------------------------- | ---------------------------------------------------------------------------------- | ------------- | -------- |
| children | Content of overlay | null \| (React.ReactElement & { ref?: React.RefCallback\ \| string }) | - | |
-| target | Reference element for overlay positioning | Target | - | |
+| target | Reference element for overlay positioning | PropTarget | - | |
### AnimationObjectType
@@ -178,7 +178,7 @@ Popup is the wrapper of Overlay. It receives a node as a trigger node and pops u
export type AnimationObjectType = Record<'in' | 'out', string>;
```
-### Target
+### PropTarget
```typescript
export type Target =
diff --git a/components/overlay/__docs__/index.md b/components/overlay/__docs__/index.md
index 2b5358bae5..807e1ea32d 100644
--- a/components/overlay/__docs__/index.md
+++ b/components/overlay/__docs__/index.md
@@ -56,10 +56,10 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
| children | 弹层内容 | React.ReactElement & { ref?: React.RefCallback\ } | - | | - |
| visible | 是否显示弹层 | boolean | false | | - |
| onRequestClose | 弹层请求关闭时触发事件的回调函数，v2 版本第一个参数是 event | (type: string, e: Event \| React.MouseEvent\) => void | - | | - |
-| target | 弹层定位的参照元素 | Target | Position.VIEWPORT | | - |
+| target | 弹层定位的参照元素 | PropTarget | Position.VIEWPORT | | - |
| align | 弹层相对于参照元素的定位，详见开发指南的 [定位部分](#定位) | string \| boolean | 'tl bl' | | - |
| offset | 弹层相对于 trigger 的定位的微调，接收数组 [hoz, ver], 表示弹层在 left / top 上的增量 e.g. [100, 100] 表示往右 (RTL 模式下是往左) 、下分布偏移 100px | Array\ | [0, 0] | | - |
-| container | 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点 | Target | - | | - |
+| container | 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点 | PropTarget | - | | - |
| hasMask | 是否显示遮罩 | boolean | false | | - |
| canCloseByEsc | 是否支持 esc 按键关闭弹层 | boolean | true | | - |
| canCloseByOutSideClick | 点击弹层外的区域是否关闭弹层，不显示遮罩时生效 | boolean | true | | - |
@@ -92,10 +92,10 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
| children | 弹层内容 | React.ReactElement & { ref?: React.RefCallback\ } | - | | - |
| visible | 是否显示弹层 | boolean | false | | - |
| onRequestClose | 弹层请求关闭时触发事件的回调函数，v2 版本第一个参数是 event | (type: string, e: Event \| React.MouseEvent\) => void | - | | - |
-| target | 弹层定位的参照元素 | Target | Position.VIEWPORT | | - |
+| target | 弹层定位的参照元素 | PropTarget | Position.VIEWPORT | | - |
| align | 弹层相对于参照元素的定位，详见开发指南的 [定位部分](#定位) | string | 'tl bl' | | - |
| offset | 弹层相对于 trigger 的定位的微调，接收数组 [hoz, ver], 表示弹层在 left / top 上的增量 e.g. [100, 100] 表示往右 (RTL 模式下是往左) 、下分布偏移 100px | Array\ | [0, 0] | | - |
-| container | 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点 | Target | - | | - |
+| container | 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点 | PropTarget | - | | - |
| hasMask | 是否显示遮罩 | boolean | false | | - |
| canCloseByEsc | 是否支持 esc 按键关闭弹层 | boolean | true | | - |
| canCloseByOutSideClick | 点击弹层外的区域是否关闭弹层，不显示遮罩时生效 | boolean | true | | - |
@@ -128,7 +128,7 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
| children | 弹层内容 | React.ReactElement | - | |
| autoFit | 弹层是否自适应内容 | boolean | false | |
| visible | 弹层当前是否显示 | boolean | false | |
-| target | 弹层定位的参照元素 | Target | - | |
+| target | 弹层定位的参照元素 | PropTarget | - | |
| trigger | 触发弹层显示或隐藏的元素 | React.ReactElement | - | |
| triggerType | 触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，'focus'，或者它们组成的数组，如 ['hover', 'focus'] | 'click' \| 'hover' \| 'focus' \| Array\<'click' \| 'hover' \| 'focus'> | 'hover' | |
| triggerClickKeycode | 当 triggerType 为 click 时才生效，可自定义触发弹层显示的键盘码 | number \| Array\ | [KEYCODE.SPACE, KEYCODE.ENTER] | |
@@ -151,7 +151,7 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
| children | 弹层内容 | React.ReactElement | - | |
| autoFit | 弹层是否自适应内容 | boolean | false | |
| visible | 弹层当前是否显示 | boolean | false | |
-| target | 弹层定位的参照元素 | Target | - | |
+| target | 弹层定位的参照元素 | PropTarget | - | |
| trigger | 触发弹层显示或隐藏的元素 | React.ReactElement | - | |
| triggerType | 触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，'focus'，或者它们组成的数组，如 ['hover', 'focus'] | 'click' \| 'hover' \| 'focus' \| Array\<'click' \| 'hover' \| 'focus'> | 'hover' | |
| triggerClickKeycode | 当 triggerType 为 click 时才生效，可自定义触发弹层显示的键盘码 | number \| Array\ | [KEYCODE.SPACE, KEYCODE.ENTER] | |
@@ -168,17 +168,17 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
### Overlay.Position
-| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
-| -------- | ------------------ | -------------------- | ------ | -------- |
-| children | 弹层内容 | React.ReactElement | - | |
-| target | 弹层定位的参照元素 | Target \| 'viewport' | - | |
+| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
+| -------- | ------------------ | ------------------------ | ------ | -------- |
+| children | 弹层内容 | React.ReactElement | - | |
+| target | 弹层定位的参照元素 | PropTarget \| 'viewport' | - | |
### Overlay.Gateway
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------- | ------------------ | ---------------------------------------------------------------------------------- | ------ | -------- |
| children | 弹层内容 | null \| (React.ReactElement & { ref?: React.RefCallback\ \| string }) | - | |
-| target | 弹层定位的参照元素 | Target | - | |
+| target | 弹层定位的参照元素 | PropTarget | - | |
### AnimationObjectType
@@ -186,7 +186,7 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
export type AnimationObjectType = Record<'in' | 'out', string>;
```
-### Target
+### PropTarget
```typescript
export type Target =
diff --git a/components/overlay/types.ts b/components/overlay/types.ts
index 94eeccedcd..351fac8260 100644
--- a/components/overlay/types.ts
+++ b/components/overlay/types.ts
@@ -7,7 +7,7 @@ import type { CommonProps } from '../util';
export type AnimationObjectType = Record<'in' | 'out', string>;
/**
- * @api Target
+ * @api PropTarget
*/
export type Target =
| React.ReactInstance
@@ -20,6 +20,9 @@ export type Target =
| false
| undefined;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type PropTarget = Target;
+
/**
* @api Overlay.Popup
* @order 3
@@ -77,7 +80,7 @@ export interface PopupV1Props extends React.HTMLAttributes, CommonP
* 弹层定位的参照元素
* @en reference element for overlay positioning
*/
- target?: Target;
+ target?: PropTarget;
/**
* 弹层相对于参照元素的定位，详见开发指南的 [定位部分](#定位)
@@ -100,7 +103,7 @@ export interface PopupV1Props extends React.HTMLAttributes, CommonP
* @en Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.
* @skip
*/
- container?: Target;
+ container?: PropTarget;
/**
* 是否显示遮罩
* @en Whether to show the mask
@@ -412,7 +415,7 @@ export interface PopupV2Props extends React.HTMLAttributes, CommonP
* 弹层定位的参照元素
* @en reference element for overlay positioning
*/
- target?: Target;
+ target?: PropTarget;
/**
* 弹层相对于参照元素的定位，详见开发指南的 [定位部分](#定位)
@@ -435,7 +438,7 @@ export interface PopupV2Props extends React.HTMLAttributes, CommonP
* @en Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.
* @skip
*/
- container?: Target;
+ container?: PropTarget;
/**
* 是否显示遮罩
* @en Whether to show the mask
@@ -763,7 +766,7 @@ export interface OverlayV1Props extends React.HTMLAttributes, Commo
* @en reference element for overlay positioning
* @defaultValue Position.VIEWPORT
*/
- target?: Target;
+ target?: PropTarget;
/**
* 弹层相对于参照元素的定位，详见开发指南的 [定位部分](#定位)
* @en alignment of the overlay relative to the reference element, see [Alignment](#Alignment)
@@ -782,7 +785,7 @@ export interface OverlayV1Props extends React.HTMLAttributes, Commo
* 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点
* @en container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.
*/
- container?: Target;
+ container?: PropTarget;
/**
* 是否显示遮罩
@@ -1020,7 +1023,7 @@ export interface OverlayV2Props extends React.HTMLAttributes, Commo
* @en reference element for overlay positioning
* @defaultValue Position.VIEWPORT
*/
- target?: Target;
+ target?: PropTarget;
/**
* 弹层相对于参照元素的定位，详见开发指南的 [定位部分](#定位)
* @en alignment of the overlay relative to the reference element, see [Alignment](#Alignment)
@@ -1039,7 +1042,7 @@ export interface OverlayV2Props extends React.HTMLAttributes, Commo
* 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点
* @en container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.
*/
- container?: Target;
+ container?: PropTarget;
/**
* 是否显示遮罩
@@ -1236,13 +1239,13 @@ export interface PositionProps {
* 弹层定位的参照元素
* @en reference element for overlay positioning
*/
- target?: Target | 'viewport';
+ target?: PropTarget | 'viewport';
/**
* 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点
* @en Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.
* @skip
*/
- container?: Target;
+ container?: PropTarget;
/**
* 弹层相对于参照元素的定位，详见开发指南的 [定位部分](#定位)
* @en Alignment of the overlay relative to the reference element, see [Alignment](#Alignment)
@@ -1359,12 +1362,12 @@ export interface GatewayProps {
* @en Container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.
* @skip
*/
- container?: Target;
+ container?: PropTarget;
/**
* 弹层定位的参照元素
* @en reference element for overlay positioning
*/
- target?: Target;
+ target?: PropTarget;
}
export interface GatewayState {
diff --git a/components/time-picker/time-picker.tsx b/components/time-picker/time-picker.tsx
index 7741843881..0a81bdf6e1 100644
--- a/components/time-picker/time-picker.tsx
+++ b/components/time-picker/time-picker.tsx
@@ -176,7 +176,7 @@ class TimePicker extends Component {
disabledSeconds,
} = this.props;
- let unit = 'second';
+ let unit: 'hour' | 'minute' | 'second' = 'second';
if (disabledSeconds) {
unit = disabledMinutes ? 'hour' : 'minute';
From b87f7844da1d365b02ad06902918d65389f9f691 Mon Sep 17 00:00:00 2001
From: eternalsky
Date: Wed, 11 Sep 2024 16:17:15 +0800
Subject: [PATCH 07/34] refactor(DatePicker): improve types and docs
---
.../date-picker/__docs__/index.en-us.md | 304 +++++---
components/date-picker/__docs__/index.md | 381 ++++-----
components/date-picker/date-picker.tsx | 116 +--
components/date-picker/month-picker.tsx | 86 +-
components/date-picker/range-picker.tsx | 109 +--
components/date-picker/types.ts | 738 ++++++++++++------
components/date-picker/week-picker.tsx | 86 +-
components/date-picker/year-picker.tsx | 78 --
8 files changed, 924 insertions(+), 974 deletions(-)
diff --git a/components/date-picker/__docs__/index.en-us.md b/components/date-picker/__docs__/index.en-us.md
index 60a4360987..6bde3e3061 100644
--- a/components/date-picker/__docs__/index.en-us.md
+++ b/components/date-picker/__docs__/index.en-us.md
@@ -15,112 +15,214 @@ DatePicker are used to select a single date for an input.
### DatePicker
-| Param | Descripiton | Type | Default Value |
-| ----- |---------------- | -------------- | ------------ |
-| label | Inset label of input | ReactNode | - |
-| size | Size of input | - | |
+| inputProps | Input box other attributes | InputProps | - | |
+| dateCellRender | Custom date rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| monthCellRender | Custom month rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| yearCellRender | Custom year rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| dateInputAriaLabel | Date input box aria | string | - | |
+| timeInputAriaLabel | Time input box aria | string | - | |
+| isPreview | Whether it is a preview state | boolean | - | |
+| renderPreview | Preview state custom rendering function | (value: Moment \| null, props: DatePickerProps) => React.ReactNode | - | |
+| followTrigger | Whether Pop | boolean | - | |
+| popupComponent | Custom pop | React.ComponentType\ | - | |
+| popupContent | Custom pop | React.ReactElement | - | |
+| disableChangeMode | Disable date selection | boolean | - | |
+| yearRange | Year range, [START_YEAR, END_YEAR] | [start: number, end: number] | - | |
+
+### DatePicker.MonthPicker
+
+| Param | Description | Type | Default Value | Required |
+| ------------------ | --------------------------------------------------------- | -------------------------------------------------------- | ------------- | -------- |
+| label | Inset label of input | React.ReactNode | - | |
+| state | Input status | 'success' \| 'loading' \| 'error' | - | |
+| placeholder | Placeholder | string | - | |
+| defaultVisibleYear | Default displayed year | () => Moment \| null | - | |
+| value | Date value, moment object, controlled | string \| Moment \| null | - | |
+| defaultValue | Initial date value, moment object, uncontrolled | string \| Moment \| null | - | |
+| format | Date value format(for restricting user input and display) | string | 'YYYY | |
+| disabledDate | Disable date function | (date: Moment, view: string) => boolean | - | |
+| footerRender | Custom panel footer | () => React.ReactNode | - | |
+| onChange | Callback when the date value changes | (value: Moment \| string \| null) => void | - | |
+| size | Input box size | 'small' \| 'medium' \| 'large' | 'medium' | |
+| disabled | Whether to disable | boolean | - | |
+| hasClear | Whether to display the clear button | boolean | true | |
+| visible | Pop | boolean | - | |
+| defaultVisible | Pop | boolean | - | |
+| onVisibleChange | Callback when the pop | (visible: boolean, reason: string) => void | - | |
+| popupTriggerType | Pop | 'click' \| 'hover' | 'click' | |
+| popupAlign | Pop | string | 'tl tl' | |
+| popupContainer | Pop | PopupProps['container'] | - | |
+| popupStyle | Pop | React.CSSProperties | - | |
+| popupClassName | Pop | string | - | |
+| popupProps | Pop | React.PropsWithRef\ | - | |
+| popupComponent | Custom pop | React.ComponentType\ | - | |
+| popupContent | Custom pop | React.ReactElement | - | |
+| followTrigger | Whether Pop | boolean | - | |
+| inputProps | Input box other attributes | InputProps | - | |
+| monthCellRender | Custom month rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| dateInputAriaLabel | Date input box aria | string | - | |
+| renderPreview | Preview state custom rendering function | (value: Moment \| null, props: MonthPickerProps) => void | - | |
+| yearCellRender | Custom year rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| isPreview | Whether it is a preview state | boolean | - | |
### DatePicker.RangePicker
-| Param | Description | Type | Default Value |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------ |
-| size | Size of input \| string | - | |
+| value | Date range value array [moment, moment] | [start: Moment \| string \| null \| undefined, end?: Moment \| string \| undefined \| null] | - | |
+| defaultValue | Initial date range value array [moment, moment] | [ & { | - | |
+| inputProps | Input box other attributes | InputProps | - | |
+| dateCellRender | Custom date rendering function | () => void | - | |
+| startDateInputAriaLabel | Start date input box aria | string | - | |
+| startTimeInputAriaLabel | Start time input box aria | string | - | |
+| endDateInputAriaLabel | End date input box aria | string | - | |
+| endTimeInputAriaLabel | End time input box aria | string | - | |
+| renderPreview | Preview state custom rendering function | ( | - | |
+| popupContent | Custom pop | React.ReactElement | - | |
+| monthCellRender | Custom month rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| yearCellRender | Custom year rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| followTrigger | Whether Pop | boolean | - | |
+| isPreview | Whether it is a preview state | boolean | - | |
+| yearRange | Year range, [START_YEAR, END_YEAR] | [start: number, end: number] | - | |
+| disableChangeMode | Disable date selection | boolean | false | |
+
+### DatePicker.YearPicker
+
+| Param | Description | Type | Default Value | Required |
+| ------------------ | ------------------------------------------------------- | ------------------------------------------------------------------ | ------------- | -------- |
+| label | Inset label of input | React.ReactNode | - | |
+| state | Input status | 'success' \| 'loading' \| 'error' | - | |
+| placeholder | Input prompt | string | - | |
+| value | Date value (controlled) moment object | string \| Moment \| null | - | |
+| defaultValue | Initial date value, moment object | string \| Moment \| null | - | |
+| format | Date value format (for limiting user input and display) | string | 'YYYY' | |
+| disabledDate | Disable date function | (date: Moment, view: string) => boolean | - | |
+| footerRender | Custom panel footer | () => React.ReactNode | - | |
+| onChange | Callback when the date value changes | (value: Moment \| string \| null) => void | - | |
+| size | Input box size | 'small' \| 'medium' \| 'large' | 'medium' | |
+| disabled | Whether it is disabled | boolean | - | |
+| hasClear | Whether to display the clear button | boolean | true | |
+| visible | Pop | boolean | - | |
+| defaultVisible | Pop | boolean | - | |
+| onVisibleChange | Callback when the pop | (visible: boolean, reason: string) => void | - | |
+| popupTriggerType | Pop | 'click' \| 'hover' | 'click' | |
+| popupAlign | Pop | string | 'tl tl' | |
+| popupContainer | Pop | PopupProps['container'] | - | |
+| popupStyle | Pop | React.CSSProperties | - | |
+| popupClassName | Pop | string | - | |
+| popupProps | Pop | React.PropsWithRef\ | - | |
+| inputProps | Input box other attributes | InputProps | - | |
+| dateInputAriaLabel | Date input box aria | string | - | |
+| renderPreview | Preview state custom rendering function | (value: Moment \| null, props: DatePickerProps) => React.ReactNode | - | |
+| popupComponent | Custom pop | React.ComponentType\ | - | |
+| popupContent | Custom pop | React.ReactElement | - | |
+| followTrigger | Whether Pop | boolean | - | |
+| yearCellRender | Custom year rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| isPreview | Whether it is a preview state | boolean | - | |
+
+### DatePicker.WeekPicker
+
+| Param | Description | Type | Default Value | Required |
+| -------------------- | ------------------------------------------------------- | ------------------------------------------------------------------ | ------------- | -------- |
+| value | Date value (controlled) moment object | string \| Moment \| null | - | |
+| defaultValue | Initial date value, moment object | string \| Moment \| null | - | |
+| visible | Pop | boolean | - | |
+| defaultVisible | Pop | boolean | - | |
+| format | Date value format (for limiting user input and display) | string | 'GGGG | |
+| onChange | Callback when the date value changes | (value: Moment \| string \| null) => void | - | |
+| onVisibleChange | Callback when the pop | (visible: boolean, reason: string) => void | - | |
+| renderPreview | Preview state custom rendering function | (value: Moment \| null, props: DatePickerProps) => React.ReactNode | - | |
+| dateCellRender | Custom date rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| label | Input box built | React.ReactNode | - | |
+| state | Input box status | 'success' \| 'loading' \| 'error' | - | |
+| defaultVisibleMonth | Default displayed month | () => Moment | false | |
+| onVisibleMonthChange | Callback when the pop | (value: Moment, reason: string) => void | - | |
+| disabledDate | Disable date function | (date: Moment, view: string) => boolean | - | |
+| footerRender | Custom panel footer | () => React.ReactNode | - | |
+| size | Input box size | 'small' \| 'medium' \| 'large' | 'medium' | |
+| disabled | Whether to disable | boolean | - | |
+| hasClear | Whether to display the clear button | boolean | true | |
+| popupTriggerType | Pop | 'click' \| 'hover' | 'click' | |
+| popupAlign | Pop | string | 'tl tl' | |
+| popupContainer | Pop | PopupProps['container'] | - | |
+| popupStyle | Pop | React.CSSProperties | - | |
+| popupClassName | Pop | string | - | |
+| popupProps | Pop | React.PropsWithRef\ | - | |
+| popupComponent | Custom pop | React.ComponentType\ | - | |
+| popupContent | Custom pop | React.ReactElement | - | |
+| followTrigger | Whether Pop | boolean | - | |
+| inputProps | Input box other attributes | InputProps | - | |
+| monthCellRender | Custom month rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| yearCellRender | Custom year rendering function | (calendarDate: Moment) => React.ReactNode | - | |
+| isPreview | Whether it is a preview state | boolean | - | |
## ARIA and KeyBoard
When the `Date Picker` is focused, press `enter` will open popup to input date or time.
-| 按键 | 说明 |
-| :---------- | :------------------------------ |
-| number key | Need to manual input the date, the specified date format |
-| Enter | open the calendar or select date after input date |
-| Esc | close the calendar |
-| Up | Input previous day（Month Picker is previous month， Year Picker is previous year） |
-| Down | Input next day（Month Picker is next month， Year Picker is next year）
-| Page Up | Input previous month |
-| Page Down | Input next month |
-| Alt + Page Up | Input previous year |
-| Alt + Page Down | Input next year |
+| 按键 | 说明 |
+| :-------------- | :---------------------------------------------------------------------------------- |
+| number key | Need to manual input the date, the specified date format |
+| Enter | open the calendar or select date after input date |
+| Esc | close the calendar |
+| Up | Input previous day（Month Picker is previous month， Year Picker is previous year） |
+| Down | Input next day（Month Picker is next month， Year Picker is next year） |
+| Page Up | Input previous month |
+| Page Down | Input next month |
+| Alt + Page Up | Input previous year |
+| Alt + Page Down | Input next year |
diff --git a/components/date-picker/__docs__/index.md b/components/date-picker/__docs__/index.md
index ff5be7e2df..df6ab396dd 100644
--- a/components/date-picker/__docs__/index.md
+++ b/components/date-picker/__docs__/index.md
@@ -29,8 +29,8 @@ DatePicker/RangePicker 在交互上增加了**操作焦点**的设置，意味
由于 Calendar 组件内部使用 moment 对象来设置日期（请使用最新版 moment），部分 Locale 读取自 moment，因此用户需要在外部使用时[正确的设置 moment 的 locale](http://momentjs.cn/docs/#/i18n/changing-locale/) 。
Q: 文档站点上看是中式日历，为什么我本地却是美式日历呢？如何进行多语言适配？ | - | |
+| inputProps | 输入框其他属性 | InputProps | - | |
+| dateCellRender | 自定义日期渲染函数 | (calendarDate: Moment) => React.ReactNode | - | |
+| monthCellRender | 自定义月份渲染函数 | (calendarDate: Moment) => React.ReactNode | - | |
+| yearCellRender | 自定义年份渲染函数 | (calendarDate: Moment) => React.ReactNode | - | |
+| dateInputAriaLabel | 日期输入框的 aria-label 属性 | string | - | |
+| timeInputAriaLabel | 时间输入框的 aria-label 属性 | string | - | |
+| isPreview | 是否为预览态 | boolean | - | |
+| renderPreview | 预览态定制渲染函数 | (value: Moment \| null, props: DatePickerProps) => React.ReactNode | - | |
+| followTrigger | 是否跟随滚动 | boolean | - | |
+| popupComponent | 自定义弹层 | React.ComponentType\ | - | |
+| popupContent | 自定义弹层内容 | React.ReactElement | - | |
+| disableChangeMode | 禁用日期选择器的日期模式切换 | boolean | - | |
+| yearRange | 年份范围，[START_YEAR, END_YEAR] | [start: number, end: number] | - | |
### DatePicker.MonthPicker
-| 参数 | 说明 | 类型 | 默认值 |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| label | 输入框内置标签 | ReactNode | - |
-| size | 输入框尺寸