如何在vue.js中设置使用v日历范围选择的最大天数？

created() {
  Vue.directive('max-date', {
    bind(el, binding, vnode) {
      el.addEventListener('keydown', (event) => {
        event.preventDefault(); // 阻止默认的键盘事件
      });

      el.addEventListener('input', (event) => {
        const { value } = event.target;
        const maxDays = parseInt(binding.value);

        if (value && maxDays > 0) {
          const selectedDate = new Date(value);
          const currentDate = new Date();

          // 计算日期差值
          const timeDiff = Math.abs(selectedDate.getTime() - currentDate.getTime());
          const diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

          if (diffDays > maxDays) {
            // 超过最大天数，清空选择的日期
            vnode.componentInstance.$emit('input', null);
          }
        }
      });
    }
  });
}

<template>
  <div>
    <v-calendar v-model="selectedDate" v-max-date="30"></v-calendar>
  </div>
</template>