@cainiaofe/cn-ui-m
Version:
110 lines (109 loc) • 2.67 kB
TypeScript
/// <reference types="react" />
import type { NativeProps } from "../../../utils/with-native-props";
import type { CnTimePickerProps } from "../../cn-time-picker-pro";
import { PanelMode } from './panel-mode';
import { Page } from '../convert';
export type CnCalendarProps = {
/**
* 导航窗格上的“上一月”按钮的内容
*/
prevMonthButton?: React.ReactNode;
/**
* 导航窗格上的“上一年”按钮的内容
*/
prevYearButton?: React.ReactNode;
/**
* 导航窗格上的“下一月”按钮的内容
*/
nextMonthButton?: React.ReactNode;
/**
* 导航窗格上的“下一年”按钮的内容
*/
nextYearButton?: React.ReactNode;
/**
* 切换月或年时触发
*/
onPageChange?: (year: number, month: number) => void;
/**
* 每周以周几作为第一天
*/
weekStartsOn?: 'Monday' | 'Sunday';
/**
* 标注信息的渲染函数
*/
renderLabel?: (date: Date) => React.ReactNode;
/**
* 是否允许再次点击后清除
*/
allowClear?: boolean;
/**
* 可选择范围的最大值
*/
max?: Date;
/**
* 可选择范围的最小值
*/
min?: Date;
/**
* 判断日期是否可选，使用后会忽略 min 和 max 设置
*/
disabledDate?: (date: Date, mode: 'date') => boolean;
/**
* 是否显示时间
*/
showTime?: boolean;
/**
* 时间选择器的属性
*/
timePanelProps?: CnTimePickerProps;
/**
* 可切换到的最早日期
*/
minPage?: Page;
/**
* 可切换到的最晚日期
*/
maxPage?: Page;
/**
* 面板展示类型
*/
panelMode?: PanelMode;
/**
* 自定义日期渲染 `v0.12.6+`
* @since 0.12.6
*/
renderDate?: (date: Date) => React.ReactNode;
} & ({
/**
* 选择模式
*/
selectionMode?: undefined;
/**
* 值
*/
value?: undefined;
/**
* 默认值
*/
defaultValue?: undefined;
/**
* 值变化时触发的回调函数
*/
onChange?: undefined;
} | {
selectionMode: 'single';
value?: Date | null;
defaultValue?: Date | null;
onChange?: (val: Date | null) => void;
} | {
selectionMode: 'range';
value?: [Date, Date] | null;
defaultValue?: [Date, Date] | null;
onChange?: (val: [Date, Date] | null) => void;
} | {
selectionMode: 'range';
panelMode: 'week';
value?: [Date, Date] | null;
defaultValue?: [Date, Date] | null;
onChange?: (val: [Date, Date] | null, weekStr: [string, string] | null) => void;
}) & NativeProps;