按照日历形式展示数据的容器。
何时使用
日历组件是一个偏向于展示与受控的基础组件,可用于日程、课表、价格日历、农历展示等。
日期值的多语言
由于 Calendar 组件内部使用 moment 对象来设置日期(请使用最新版 moment),部分 Locale 读取自 moment,因此用户需要在外部使用时正确的设置 moment 的 locale 。
最简单的日历用法,用户可以切换年/月。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
defaultValue | 默认选中的日期(moment 对象) | custom | - |
shape | 展现形态 可选值: 'card', 'fullscreen', 'panel' | Enum | 'fullscreen' |
value | 选中的日期值 (moment 对象) | custom | - |
mode | 面板模式 | Enum | - |
showOtherMonth | 是否展示非本月的日期 | Boolean | true |
defaultVisibleMonth | 默认展示的月份 签名: Function() => void | Function | - |
onSelect | 选择日期单元格时的回调 签名: Function(value: Object) => void 参数: value: {Object} 对应的日期值 (moment 对象) | Function | func.noop |
onModeChange | 面板模式变化时的回调 签名: Function(mode: String) => void 参数: mode: {String} 对应面板模式 date month year | Function | func.noop |
onVisibleMonthChange | 展现的月份变化时的回调 签名: Function(value: Object, reason: String) => void 参数: value: {Object} 显示的月份 (moment 对象) reason: {String} 触发月份改变原因 | Function | func.noop |
dateCellRender | 自定义日期渲染函数 签名: Function(value: Object) => ReactNode 参数: value: {Object} 日期值(moment对象) 返回值: {ReactNode} null | Function | value => 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 | - |