You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

2.7 KiB

category type subtitle cols title cover
Components 数据展示 日历 1 Calendar https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg

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

何时使用

当数据是日期或按照日期划分时,例如日程、课表、价格日历等,农历等。目前支持年/月切换。

API

<Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
  onPanelChange={onPanelChange}
  onSelect={onSelect}
/>
参数 说明 类型 默认值 版本
dateCellRender 自定义渲染日期单元格,返回内容会被追加到单元格 function(date: Moment): ReactNode -
dateFullCellRender 自定义渲染日期单元格,返回内容覆盖单元格 function(date: Moment): ReactNode -
defaultValue 默认展示的日期 moment -
disabledDate 不可选择的日期,参数为当前 value,注意使用时不要直接修改 (currentDate: Moment) => boolean -
fullscreen 是否全屏显示 boolean true
headerRender 自定义头部内容 function(object:{value: Moment, type: string, onChange: f(), onTypeChange: f()}) -
locale 国际化配置 object (默认配置)
mode 初始模式 month | year month
monthCellRender 自定义渲染月单元格,返回内容会被追加到单元格 function(date: Moment): ReactNode -
monthFullCellRender 自定义渲染月单元格,返回内容覆盖单元格 function(date: Moment): ReactNode -
validRange 设置可以显示的日期 [moment, moment] -
value 展示日期 moment -
onChange 日期变化回调 function(date: Moment) -
onPanelChange 日期面板变化回调 function(date: Moment, mode: string) -
onSelect 点击选择日期回调 function(date: Moment) -

FAQ

如何在 Calendar 中使用自定义日期库(如 dayjs )

参考 如何在 Calendar 中使用自定义日期库(如 dayjs )

如何给日期类组件配置国际化?

参考 如何给日期类组件配置国际化

为什么时间类组件的国际化 locale 设置不生效?

参考 FAQ 为什么时间类组件的国际化 locale 设置不生效?