ant-design-vue/components/date-picker/demo/date-render.md

52 lines
1.3 KiB
Markdown
Raw Normal View History

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>
```