Calendar

按照日历形式展示数据的容器。

何时使用 #

日历组件是一个偏向于展示与受控的基础组件，可用于日程、课表、价格日历、农历展示等。

如何使用 #

日期值的多语言设置：由于 Calendar 组件内部使用 moment 对象来设置日期（请使用最新版 moment），部分 Locale 读取自 moment，因此用户需要在外部使用时正确的设置 moment 的 locale 。

import moment from 'moment';

moment.locale('zh-cn');

代码演示 #

全屏日历 #

最简单的日历用法，用户可以切换年/月。

农历 #

农历

日历卡片 #

可以将 card 形态的日历组件嵌套在宽高受限的容器中。

禁用日期 #

可以通过 disabledDate 属性禁止用户选择某些日期。

定制日历内容 #

通过 dateCellRender 和 monthCellRender 用户可以在日历中添加自定义内容。

日历默认展示月份 #

日历组件默认使用当前月作为展示的月份，用户可以可以通过 defaultVisibleMonth 属性进行定制。并可以通过 onVisibleMonthChange 属性监听面板可视月份的变化。

日历面板 #

日历面板通用用于嵌套在弹层容器中。

多语言 #

日期时间的多语言来源于 moment ，可以通过 moment.locale('zh-cn') 来设置显示中文。

API #

Calendar #

参数 说明 类型 默认值 是否必填
defaultValue 默认选中的日期（moment 对象） Moment | null -
shape 展现形态 'card' | 'fullscreen' | 'panel' 'fullscreen'
value 选中的日期值 (moment 对象) Moment | null -
mode 面板模式 CalendarMode -
showOtherMonth 是否展示非本月的日期 boolean true
defaultVisibleMonth 默认展示的月份 () => Moment | null -
onModeChange 面板模式变化时的回调

签名:
参数:
mode: 对应面板模式 date, month, year		 (mode: CalendarMode) => void -
onSelect 选择日期单元格时的回调 (value: Moment) => void -
onVisibleMonthChange 展现的月份变化时的回调 (value: Moment, reason: VisibleMonthChangeType) => void -
dateCellRender 自定义日期渲染函数 (value: Moment) => React.ReactNode value => value.date()
monthCellRender 自定义月份渲染函数 (calendarDate: Moment) => React.ReactNode -
disabledDate 不可选择的日期 (calendarDate: Moment, view: CalendarMode) => boolean -
modes 面板可变化的模式列表，仅初始化时接收一次 CalendarMode[] ['date', 'month', 'year']
format 日期值的格式（用于日期 title 显示的格式） string 'YYYY-MM
yearRange 年份范围，[START_YEAR, END_YEAR] (只在 shape 为‘card’, 'fullscreen' 下生效) [start: number, end: number] -

Calendar.RangeCalendar #

参数 说明 类型 默认值 是否必填
mode 面板模式 CalendarMode 'date'
format 日期值的格式（用于日期 title 显示的格式） string 'YYYY-MM
dateCellRender 自定义日期渲染函数 (value: Moment) => React.ReactNode value => value.date()
onSelect 选择日期单元格时的回调 (value: Moment) => void -
onVisibleMonthChange 展现的月份变化时的回调 (value: Moment, reason: VisibleMonthChangeType) => void -
showOtherMonth 是否展示非本月的日期 boolean true
startValue 开始日期（moment 对象） Moment | null -
endValue 结束日期（moment 对象） Moment | null -
defaultStartValue 默认的开始日期（moment 对象） Moment | null -
defaultEndValue 默认的结束日期（moment 对象） Moment | null -
monthCellRender 自定义月份渲染函数 (calendarDate: Moment) => React.ReactNode -
defaultVisibleMonth 默认展示的月份 () => Moment | null -
disabledDate 不可选择的日期 (calendarDate: Moment, view: CalendarMode) => boolean -
shape 展现形态 'card' | 'fullscreen' | 'panel' -
yearRange 年份范围，[START_YEAR, END_YEAR] (只在 shape 为‘card’, 'fullscreen' 下生效) [number, number] -

CalendarMode #

export type CalendarMode = 'date' | 'month' | 'year';

VisibleMonthChangeType #

export type VisibleMonthChangeType = 'cellClick' | 'buttonClick' | 'yearSelect' | 'monthSelect';