53 lines
1.3 KiB
Markdown
53 lines
1.3 KiB
Markdown
|
|
<cn>
|
|
#### 定制日期单元格
|
|
使用 `dateRender` 可以自定义日期单元格的内容和样式。
|
|
</cn>
|
|
|
|
<us>
|
|
#### Customized Date Rendering
|
|
We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.
|
|
</us>
|
|
|
|
```html
|
|
<template>
|
|
<div>
|
|
<a-date-picker>
|
|
<template slot="dateRender" slot-scope="current, today">
|
|
<div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
|
|
{{current.date()}}
|
|
</div>
|
|
</template>
|
|
</a-date-picker>
|
|
<a-range-picker>
|
|
<template slot="dateRender" slot-scope="current">
|
|
<div class="ant-calendar-date" :style="getCurrentStyle(current)">
|
|
{{current.date()}}
|
|
</div>
|
|
</template>
|
|
</a-range-picker>
|
|
<a-week-picker>
|
|
<template slot="dateRender" slot-scope="current">
|
|
<div class="ant-calendar-date" :style="getCurrentStyle(current)">
|
|
{{current.date()}}
|
|
</div>
|
|
</template>
|
|
</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>
|
|
```
|