文档Tags:
dateTime

Calendar 日历

Guide

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

何时使用

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

日期值的多语言

由于 Calendar 组件内部使用 moment 对象来设置日期(请使用最新版 moment),部分 Locale 读取自 moment,因此用户需要在外部使用时正确的设置 moment 的 locale

全屏日历

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

Loading demo...

APIs

Calendar

参数说明类型默认值
defaultValue默认选中的日期(moment 对象)custom-
shape展现形态

可选值:
'card', 'fullscreen', 'panel'
Enum'fullscreen'
value选中的日期值 (moment 对象)custom-
mode面板模式Enum-
showOtherMonth是否展示非本月的日期Booleantrue
defaultVisibleMonth默认展示的月份

签名:
Function() => void
Function-
onSelect选择日期单元格时的回调

签名:
Function(value: Object) => void
参数:
value: {Object} 对应的日期值 (moment 对象)
Functionfunc.noop
onModeChange面板模式变化时的回调

签名:
Function(mode: String) => void
参数:
mode: {String} 对应面板模式 date month year
Functionfunc.noop
onVisibleMonthChange展现的月份变化时的回调

签名:
Function(value: Object, reason: String) => void
参数:
value: {Object} 显示的月份 (moment 对象)
reason: {String} 触发月份改变原因
Functionfunc.noop
dateCellRender自定义日期渲染函数

签名:
Function(value: Object) => ReactNode
参数:
value: {Object} 日期值(moment对象)
返回值:
{ReactNode} null
Functionvalue => value.date()
monthCellRender自定义月份渲染函数

签名:
Function(calendarDate: Object) => ReactNode
参数:
calendarDate: {Object} 对应 Calendar 返回的自定义日期对象
返回值:
{ReactNode} null
Function-
yearRange年份范围,[START_YEAR, END_YEAR] (只在shape 为 ‘card’, 'fullscreen' 下生效)Array<Number>-
disabledDate不可选择的日期

签名:
Function(calendarDate: Object, view: String) => Boolean
参数:
calendarDate: {Object} 对应 Calendar 返回的自定义日期对象
view: {String} 当前视图类型,year: 年, month: 月, date: 日
返回值:
{Boolean} null
Function-

Demo

日历卡片

Loading demo...

禁用日期

Loading demo...

定制日历内容

Loading demo...

日历默认展示月份

Loading demo...

日历面板

Loading demo...

多语言

Loading demo...