vue3+ts+antdesign 清空a-range-picker日期选择框

在Vue 3和Ant Design Vue中，你可以使用v-model来双向绑定a-range-picker的值，并通过设置为null或者特定的初始值来清空日期选择框。

以下是一个简单的例子，展示了如何清空日期选择框：

<template>
  <a-range-picker v-model:value="dateRange" @calendarChange="clearDates" />
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { RangePickerValue } from 'ant-design-vue/es/date-picker/interface';
 
export default defineComponent({
  setup() {
    const dateRange = ref<RangePickerValue>(null); // 初始值设置为null
 
    // 清空日期的方法
    const clearDates = () => {
      dateRange.value = null; // 清空日期
    };
 
    return {
      dateRange,
      clearDates,
    };
  },
});
</script>

在这个例子中，dateRange是一个响应式引用，它被初始化为null。当用户更改日期选择器时，calendarChange事件会触发clearDates方法，该方法将dateRange的值设置回null，从而清空日期选择框。