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

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