2018-03-17 13:38:29 +00:00
|
|
|
<cn>
|
|
|
|
#### 定制日期单元格
|
2018-03-15 13:40:34 +00:00
|
|
|
使用 `dateRender` 可以自定义日期单元格的内容和样式。
|
2018-03-17 13:38:29 +00:00
|
|
|
</cn>
|
2018-03-15 13:40:34 +00:00
|
|
|
|
2018-03-17 13:38:29 +00:00
|
|
|
<us>
|
|
|
|
#### Customized Date Rendering
|
2018-03-15 13:40:34 +00:00
|
|
|
We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.
|
2018-03-17 13:38:29 +00:00
|
|
|
</us>
|
2018-03-15 13:40:34 +00:00
|
|
|
|
2018-03-17 13:38:29 +00:00
|
|
|
```html
|
|
|
|
<template>
|
2018-03-15 13:40:34 +00:00
|
|
|
<div>
|
2018-03-17 13:38:29 +00:00
|
|
|
<a-date-picker>
|
|
|
|
<template slot="dateRender" slot-scope="current, today">
|
|
|
|
<div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
|
|
|
|
{{current.date()}}
|
|
|
|
</div>
|
2018-05-15 01:52:44 +00:00
|
|
|
</template>
|
2018-03-17 13:38:29 +00:00
|
|
|
</a-date-picker>
|
|
|
|
<a-range-picker>
|
|
|
|
<template slot="dateRender" slot-scope="current">
|
|
|
|
<div class="ant-calendar-date" :style="getCurrentStyle(current)">
|
|
|
|
{{current.date()}}
|
|
|
|
</div>
|
2018-05-15 01:52:44 +00:00
|
|
|
</template>
|
2018-03-17 13:38:29 +00:00
|
|
|
</a-range-picker>
|
|
|
|
<a-week-picker>
|
|
|
|
<template slot="dateRender" slot-scope="current">
|
|
|
|
<div class="ant-calendar-date" :style="getCurrentStyle(current)">
|
|
|
|
{{current.date()}}
|
|
|
|
</div>
|
2018-05-15 01:52:44 +00:00
|
|
|
</template>
|
2018-03-17 13:38:29 +00:00
|
|
|
</a-week-picker>
|
2018-03-15 13:40:34 +00:00
|
|
|
</div>
|
2018-03-17 13:38:29 +00:00
|
|
|
</template>
|
|
|
|
<script>
|
2019-09-28 12:45:07 +00:00
|
|
|
export default {
|
|
|
|
methods: {
|
|
|
|
getCurrentStyle(current, today) {
|
|
|
|
const style = {};
|
|
|
|
if (current.date() === 1) {
|
|
|
|
style.border = '1px solid #1890ff';
|
|
|
|
style.borderRadius = '50%';
|
|
|
|
}
|
|
|
|
return style;
|
|
|
|
},
|
2018-05-15 01:52:44 +00:00
|
|
|
},
|
2019-09-28 12:45:07 +00:00
|
|
|
};
|
2018-03-17 13:38:29 +00:00
|
|
|
</script>
|
|
|
|
```
|