1.3 KiB
1.3 KiB
#### 定制日期单元格
使用 `dateRender` 可以自定义日期单元格的内容和样式。
#### Customized Date Rendering
We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.
<template>
<div>
<a-date-picker>
<template slot="dateRender" slot-scope="current, today">
<div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
{{current.date()}}
</div>
</tempalte>
</a-date-picker>
<a-range-picker>
<template slot="dateRender" slot-scope="current">
<div class="ant-calendar-date" :style="getCurrentStyle(current)">
{{current.date()}}
</div>
</tempalte>
</a-range-picker>
<a-week-picker>
<template slot="dateRender" slot-scope="current">
<div class="ant-calendar-date" :style="getCurrentStyle(current)">
{{current.date()}}
</div>
</tempalte>
</a-week-picker>
</div>
</template>
<script>
export default {
methods: {
getCurrentStyle(current, today) {
const style = {};
if (current.date() === 1) {
style.border = '1px solid #1890ff';
style.borderRadius = '50%';
}
return style
}
}
}
</script>