在 Vue 2.x 中使用 iView（现在叫 View UI）或 Element UI 的日期选择器时，如果你想在弹出的日历面板上显示额外的信息，比如节日或事件，你可以使用自定义的渲染函数或自定义的日期单元格来实现这一点。

在 Element UI 中自定义日期选择器
Element UI 提供了 picker-options 属性，你可以用它来定制日期选择器的显示。通过自定义日期单元格渲染，你可以在日期上显示额外的信息。

以下是一个如何在 Element UI 中实现此功能的示例：

安装 Element UI，如果你还没有安装的话：

bash
Copy code
npm install element-ui
在你的 Vue 组件中：

vue
Copy code
<template>
<div id="app">
<el-date-picker
v-model="value"
type="date"
placeholder="Select date"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</template>

<script>
import { DatePicker } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
name: 'App',
components: {
'el-date-picker': DatePicker
},
data() {
return {
value: '',
pickerOptions: {
// 自定义日期单元格
cellClassName({ date, dataIndex }) {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
if (month === 12 && day === 25) {
// 添加圣诞节样式
return 'holiday christmas';
}
if (month === 1 && day === 1) {
// 添加新年样式
return 'holiday new-year';
}
return '';
}
}
};
}
};
</script>

<style>
.holiday {
background-color: #f0f0f0;
color: red;
}
.holiday.christmas::before {
content: '🎄';
margin-right: 5px;
}
.holiday.new-year::before {
content: '🎉';
margin-right: 5px;
}
</style>
在 View UI（iView）中自定义日期选择器
iView 也允许你通过 render 函数来定制日期选择器中的日期单元格。以下是一个实现自定义日期单元格的示例：

安装 iView，如果你还没有安装的话：

bash
Copy code
npm install view-design
在你的 Vue 组件中：

vue
Copy code
<template>
<div id="app">
<DatePicker
v-model="value"
type="date"
format="yyyy-MM-dd"
:options="options"
></DatePicker>
</div>
</template>

<script>
import { DatePicker } from 'view-design';
import 'view-design/dist/styles/iview.css';

export default {
name: 'App',
components: {
DatePicker
},
data() {
return {
value: '',
options: {
disabledDate(date) {
// 自定义禁用日期逻辑
return false;
},
renderCell(date) {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
if (month === 12 && day === 25) {
// 自定义渲染圣诞节
return <div style="color: red;">🎄 ${day}</div>;
}
if (month === 1 && day === 1) {
// 自定义渲染新年
return <div style="color: red;">🎉 ${day}</div>;
}
return <div>${day}</div>;
}
}
};
}
};
</script>
总结
通过以上示例，你可以在 Element UI 和 View UI（iView）中自定义日期选择器的日期单元格，以显示节日和其他事件的信息。你可以根据需要调整 cellClassName 或 renderCell 函数中的逻辑，以显示更多的自定义内容。