Ant Design Vue DatePicker 定制日期单元格

Ant Design Vue 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> 
  </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>

在线试一试