---
nav:
path: /components
group:
title: 数据展示
order: 8
toc: 'content'
---
# Calendar 日历
日历组件
## 引入
在 `index.json` 中引入组件
```json
"usingComponents": {
#if ALIPAY
"ant-calendar": "antd-mini/es/Calendar/index"
#endif
#if WECHAT
"ant-calendar": "antd-mini/Calendar/index"
#endif
}
```
## 代码示例
### 基本使用
```xml
```
### 自定义顶部
```xml
自定义顶部
```
### 自定义日期单元格
```xml
```
```js
import dayjs from 'dayjs';
function demoFormatter(cell) {
const isOdd = dayjs(cell.time).date() % 2 === 1;
const isNotBeginEnd = !cell.isSelectedBegin && !cell.isSelectedEnd;
const isWeekend = dayjs(cell.time).day() > 4;
let topClassName;
if (isNotBeginEnd) {
topClassName = isOdd ? 'odd' : 'even';
}
return {
top: {
className: topClassName,
label: isOdd ? '奇数' : '偶数',
},
bottom: {
label: isWeekend ? '周末' : '',
},
};
}
function demoMonthFormatter(month) {
return {
...month,
};
}
```
### 动态控制，只允许选择前后三天
```xml
```
```js
import dayjs from 'dayjs';
function demoFormatter(cell, value) {
if (Array.isArray(value) && value.length == 1) {
const current = value[0];
return {
disabled: dayjs(cell.time).diff(dayjs(current), 'days') > 3,
bottom:
dayjs(cell.time).diff(dayjs(current), 'days') > 3
? {
label: '不可选',
}
: undefined,
};
}
return {};
}
```
### 受控模式
```xml
上一天
下一天
滚动到指定日期
```
```js
Page({
data: {
demo9: {
visible: true,
value: nowDate,
},
demo9HandleChange(value) {
this.setData({
'demo9.value': value,
});
},
demo9HandlePreviousDay() {
this.setData({
'demo9.value': this.data.demo9.value - 1000 * 24 * 3600,
});
},
demo9HandleNextDay() {
this.setData({
'demo9.value': this.data.demo9.value + 1000 * 24 * 3600,
});
},
demo9HandleScrollIntoView() {
this.ref.scrollIntoView(nowDate);
},
},
});
```
### Demo 代码
#f8f8f8
| #f8f8f8
| 日历星期名称背景颜色 |
| --calendar-default-color | #333333
| #c5cad1
| 日历默认颜色 |
| --calendar-selected-color | rgba(22, 119, 255, 0.1)
| rgba(22, 119, 255, 0.1)
| 日历选中颜色 |
| --calendar-assist-color | #999999
| #616161
| 日历辅助颜色 |
| --calendar-selected-end-color | #ffffff
| #ffffff
| 日历选中结束颜色 |
| --calendar-selected-color | #1677ff
| #3086ff
| 日历选中颜色 |
## FAQ
### 如何设置默认的开始与结束时间？
通过 `defaultValue` 可以设置默认的时间。`defaultValue` 的类型是 `CalendarValue`。
`CalendarValue` 的类型是 `number | [number, number]`，代表单选或者连续区间的日期。它是一个时间戳，单位是毫秒。
例如，如果我们想设置默认的开始时间为今天，结束时间为七天后，我们可以在 `defaultValue` 中传入以下代码：
```ts
[dayjs().startOf('date'), dayjs().add(7, 'days').startOf('date')];
```
### 通过 `onFormatter` 设置单元格的自定义数据
我们可以通过 `onFormatter` 方法设置单元格的自定义数据，`onFormatter` 的格式是 `(cell: CellState, currentValue: CalendarValue) => CellState`。
这个函数会获取每个单元格的状态以及当前的值。通过返回新的单元格数据，我们可以自定义单元格的状态。
以下是一些常见的使用场景：
#### 如何让当天之前的时间不可选？
在支付宝小程序中，我们可以通过页面上的方法设置，需要在 axml 文件中传入一个方法名字符串。
axml 文件：
```xml
```
ts 文件：
```ts
import dayjs from 'dayjs';
Page({
handleFormat(cell: CellState) {
// 如果单元格代表的时间早于今天的开始时间，则禁止选择
return {
disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')),
};
},
});
```
在微信小程序，我们也可以通过 data 中的函数来设置，此时在 wxml 文件中需要传入一个变量名。
wxml 文件：
```xml
```
ts 文件：
```ts
import dayjs from 'dayjs';
Page({
data: {
handleFormat: (cell: CellState) => {
// 如果单元格代表的时间早于今天的开始时间，则禁止选择
return {
disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')),
};
},
},
});
```