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

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