fix: date-picker ts error
parent
147845b55f
commit
de81c7c1d9
|
@ -7,7 +7,7 @@ import { VueNode } from '../_util/type';
|
||||||
|
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
|
|
||||||
function getMonthsLocale(value) {
|
function getMonthsLocale(value: moment.Moment) {
|
||||||
const current = value.clone();
|
const current = value.clone();
|
||||||
const localeData = value.localeData();
|
const localeData = value.localeData();
|
||||||
const months = [];
|
const months = [];
|
||||||
|
|
|
@ -16,7 +16,7 @@ function noop() {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function zerofixed(v) {
|
function zerofixed(v: number) {
|
||||||
if (v < 10) {
|
if (v < 10) {
|
||||||
return `0${v}`;
|
return `0${v}`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,7 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||||
import Tag from '../tag';
|
import Tag from '../tag';
|
||||||
import { defaultConfigProvider } from '../config-provider';
|
import { defaultConfigProvider } from '../config-provider';
|
||||||
import interopDefault from '../_util/interopDefault';
|
import interopDefault from '../_util/interopDefault';
|
||||||
import { RangePickerProps } from './interface';
|
import { RangePickerProps } from './props';
|
||||||
import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
|
import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
import BaseMixin from '../_util/BaseMixin';
|
||||||
import { formatDate } from './utils';
|
import { formatDate } from './utils';
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { defaultConfigProvider } from '../config-provider';
|
||||||
import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
|
import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
|
||||||
import classNames from '../_util/classNames';
|
import classNames from '../_util/classNames';
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
import BaseMixin from '../_util/BaseMixin';
|
||||||
import { WeekPickerProps } from './interface';
|
import { WeekPickerProps } from './props';
|
||||||
import interopDefault from '../_util/interopDefault';
|
import interopDefault from '../_util/interopDefault';
|
||||||
import InputIcon from './InputIcon';
|
import InputIcon from './InputIcon';
|
||||||
import { getDataAndAriaProps } from '../_util/util';
|
import { getDataAndAriaProps } from '../_util/util';
|
||||||
|
|
|
@ -4,11 +4,17 @@ import createPicker from './createPicker';
|
||||||
import wrapPicker from './wrapPicker';
|
import wrapPicker from './wrapPicker';
|
||||||
import RangePicker from './RangePicker';
|
import RangePicker from './RangePicker';
|
||||||
import WeekPicker from './WeekPicker';
|
import WeekPicker from './WeekPicker';
|
||||||
import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './interface';
|
import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './props';
|
||||||
import { App, DefineComponent, defineComponent } from 'vue';
|
import { App, defineComponent } from 'vue';
|
||||||
type DatePickerPropstypes = typeof DatePickerProps;
|
import {
|
||||||
|
DatePickerDecorator,
|
||||||
|
DatePickerPropsTypes,
|
||||||
|
RangePickerPropsTypes,
|
||||||
|
MonthPickerPropsTypes,
|
||||||
|
WeekPickerPropsTypes,
|
||||||
|
} from './interface';
|
||||||
|
|
||||||
const DatePicker: DefineComponent<DatePickerPropstypes> = defineComponent<DatePickerPropstypes>(
|
const DatePicker = defineComponent<DatePickerPropsTypes>(
|
||||||
wrapPicker(
|
wrapPicker(
|
||||||
{
|
{
|
||||||
...createPicker(VcCalendar as any, DatePickerProps),
|
...createPicker(VcCalendar as any, DatePickerProps),
|
||||||
|
@ -16,19 +22,25 @@ const DatePicker: DefineComponent<DatePickerPropstypes> = defineComponent<DatePi
|
||||||
} as any,
|
} as any,
|
||||||
DatePickerProps,
|
DatePickerProps,
|
||||||
'date',
|
'date',
|
||||||
) as any,
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
const MonthPicker = wrapPicker(
|
const MonthPicker = defineComponent<MonthPickerPropsTypes>(
|
||||||
{ ...createPicker(MonthCalendar as any, MonthPickerProps), name: 'AMonthPicker' } as any,
|
wrapPicker(
|
||||||
MonthPickerProps,
|
{ ...createPicker(MonthCalendar as any, MonthPickerProps), name: 'AMonthPicker' } as any,
|
||||||
'month',
|
MonthPickerProps,
|
||||||
|
'month',
|
||||||
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
Object.assign(DatePicker, {
|
Object.assign(DatePicker, {
|
||||||
RangePicker: wrapPicker(RangePicker as any, RangePickerProps, 'date'),
|
RangePicker: defineComponent<RangePickerPropsTypes>(
|
||||||
|
wrapPicker(RangePicker as any, RangePickerProps, 'date'),
|
||||||
|
),
|
||||||
MonthPicker,
|
MonthPicker,
|
||||||
WeekPicker: wrapPicker(WeekPicker as any, WeekPickerProps, 'week'),
|
WeekPicker: defineComponent<WeekPickerPropsTypes>(
|
||||||
|
wrapPicker(WeekPicker as any, WeekPickerProps, 'week'),
|
||||||
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
|
@ -40,4 +52,4 @@ DatePicker.install = function(app: App) {
|
||||||
return app;
|
return app;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DatePicker;
|
export default DatePicker as DatePickerDecorator;
|
||||||
|
|
|
@ -0,0 +1,118 @@
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
import { CSSProperties, DefineComponent, HTMLAttributes } from 'vue';
|
||||||
|
import { tuple, VueNode } from '../_util/type';
|
||||||
|
|
||||||
|
export type RangePickerValue =
|
||||||
|
| undefined[]
|
||||||
|
| null[]
|
||||||
|
| [moment.Moment | string]
|
||||||
|
| [undefined, moment.Moment | string]
|
||||||
|
| [moment.Moment | string, undefined]
|
||||||
|
| [null, moment.Moment | string]
|
||||||
|
| [moment.Moment | string, null]
|
||||||
|
| [moment.Moment, moment.Moment]
|
||||||
|
| [string, string];
|
||||||
|
|
||||||
|
export interface PickerProps {
|
||||||
|
name?: string;
|
||||||
|
transitionName?: string;
|
||||||
|
prefixCls?: string;
|
||||||
|
inputPrefixCls?: string;
|
||||||
|
format?: string | string[] | Function;
|
||||||
|
disabled?: boolean;
|
||||||
|
allowClear?: boolean;
|
||||||
|
pickerClass?: string;
|
||||||
|
pickerInputClass?: string;
|
||||||
|
suffixIcon?: VueNode;
|
||||||
|
popupStyle?: CSSProperties;
|
||||||
|
dropdownClassName?: string;
|
||||||
|
locale?: any;
|
||||||
|
localeCode?: string,
|
||||||
|
size?: 'large' | 'small' | 'default';
|
||||||
|
getCalendarContainer?: (triggerNode: Element) => HTMLElement;
|
||||||
|
open?: boolean;
|
||||||
|
valueFormat?: string,
|
||||||
|
onOpenChange?: (status: boolean) => void;
|
||||||
|
disabledDate?: (current: moment.Moment | null) => boolean;
|
||||||
|
dateRender?: (current: moment.Moment, today: moment.Moment) => any;
|
||||||
|
autofocus?: boolean;
|
||||||
|
onFocus?: EventHandlerNonNull;
|
||||||
|
onBlur?: EventHandlerNonNull
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SinglePickerProps {
|
||||||
|
value?: moment.Moment | undefined | null | string;
|
||||||
|
defaultValue?: moment.Moment | undefined | null | string;
|
||||||
|
defaultPickerValue?: moment.Moment | undefined | null | string;
|
||||||
|
placeholder?: string;
|
||||||
|
renderExtraFooter?: (mode: DatePickerMode) => any;
|
||||||
|
onChange?: (date: moment.Moment | null, dateString: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DatePickerModes = tuple('time', 'date', 'month', 'year', 'decade');
|
||||||
|
export type DatePickerMode = typeof DatePickerModes[number];
|
||||||
|
|
||||||
|
export interface DatePickerPropsTypes extends PickerProps, SinglePickerProps {
|
||||||
|
showTime?: Record<string, any> | boolean;
|
||||||
|
showToday?: boolean;
|
||||||
|
open?: boolean;
|
||||||
|
disabledTime?: (
|
||||||
|
current?: moment.Moment | null,
|
||||||
|
) => {
|
||||||
|
disabledHours?: () => number[];
|
||||||
|
disabledMinutes?: () => number[];
|
||||||
|
disabledSeconds?: () => number[];
|
||||||
|
};
|
||||||
|
onOpenChange?: (status: boolean) => void;
|
||||||
|
onPanelChange?: (value: moment.Moment | null, mode: DatePickerMode) => void;
|
||||||
|
onOk?: (selectedTime: moment.Moment | null) => void;
|
||||||
|
mode?: DatePickerMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MonthPickerPropsTypes extends PickerProps, SinglePickerProps {
|
||||||
|
monthCellContentRender?: (date: moment.Moment, locale: any) => any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type RangePickerPresetRange = RangePickerValue | (() => RangePickerValue);
|
||||||
|
|
||||||
|
export interface RangePickerPropsTypes extends PickerProps {
|
||||||
|
tagPrefixCls?: string;
|
||||||
|
value?: RangePickerValue;
|
||||||
|
defaultValue?: RangePickerValue;
|
||||||
|
defaultPickerValue?: RangePickerValue;
|
||||||
|
timePicker?: VueNode;
|
||||||
|
onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
|
||||||
|
onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
|
||||||
|
onOk?: (selectedTime: RangePickerPresetRange) => void;
|
||||||
|
showTime?: Record<string, any> | boolean;
|
||||||
|
showToday?: boolean;
|
||||||
|
ranges?: {
|
||||||
|
[range: string]: RangePickerPresetRange;
|
||||||
|
};
|
||||||
|
placeholder?: [string, string];
|
||||||
|
mode?: string | string[];
|
||||||
|
separator?: VueNode;
|
||||||
|
disabledTime?: (
|
||||||
|
current: RangePickerValue,
|
||||||
|
type: string,
|
||||||
|
) => {
|
||||||
|
disabledHours?: () => number[];
|
||||||
|
disabledMinutes?: () => number[];
|
||||||
|
disabledSeconds?: () => number[];
|
||||||
|
};
|
||||||
|
onPanelChange?: (value?: RangePickerValue, mode?: string | string[]) => void;
|
||||||
|
renderExtraFooter?: () => any;
|
||||||
|
onMouseenter?: (e: MouseEvent) => void;
|
||||||
|
onMouseleave?: (e: MouseEvent) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WeekPickerPropsTypes extends PickerProps, SinglePickerProps {
|
||||||
|
// - currently no own props -
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DatePickerDecorator extends DefineComponent<DatePickerPropsTypes> {
|
||||||
|
RangePicker: DefineComponent<RangePickerPropsTypes>;
|
||||||
|
MonthPicker: DefineComponent<MonthPickerPropsTypes>;
|
||||||
|
WeekPicker: DefineComponent<WeekPickerPropsTypes>;
|
||||||
|
}
|
|
@ -44,7 +44,7 @@ export const PickerProps = {
|
||||||
onOpenChange: PropTypes.func,
|
onOpenChange: PropTypes.func,
|
||||||
onFocus: PropTypes.func,
|
onFocus: PropTypes.func,
|
||||||
onBlur: PropTypes.func,
|
onBlur: PropTypes.func,
|
||||||
'onUpdate:value': PropTypes.func,
|
//'onUpdate:value': PropTypes.func,
|
||||||
onMouseenter: PropTypes.func,
|
onMouseenter: PropTypes.func,
|
||||||
onMouseleave: PropTypes.func,
|
onMouseleave: PropTypes.func,
|
||||||
};
|
};
|
|
@ -44,6 +44,7 @@ function getColumns({ showHour, showMinute, showSecond, use12Hours }: any) {
|
||||||
}
|
}
|
||||||
return column;
|
return column;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function wrapPicker(
|
export default function wrapPicker(
|
||||||
Picker: DefineComponent<any>,
|
Picker: DefineComponent<any>,
|
||||||
props: any,
|
props: any,
|
||||||
|
|
Loading…
Reference in New Issue