关于自定义v-date-picker并添加“今日”“最近7天”快捷选项的可行性咨询

当然可以实现这个“今日”“最近7天”的快捷选择功能啦！下面是结合你现有代码的完整修改方案，风格和Vuetify组件保持统一：

完整代码示例 #

<template>
  <v-row align="center">
    <v-checkbox v-model="landscape" label="Landscape"></v-checkbox>
    <!-- 新增快捷选择按钮组 -->
    <v-btn-group class="mx-3">
      <v-btn size="small" @click="pickToday">今日</v-btn>
      <v-btn size="small" @click="pickLast7Days">最近7天</v-btn>
    </v-btn-group>
    <v-date-picker 
      v-model="picker" 
      :landscape="landscape"
      range <!-- 如果需要范围选择就保留，单个日期则去掉 -->
    ></v-date-picker>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      landscape: false,
      picker: null
    };
  },
  methods: {
    pickToday() {
      const today = new Date().toISOString().split('T')[0];
      // 范围选择赋值为数组，单个日期直接赋值today即可
      this.picker = [today, today];
    },
    pickLast7Days() {
      const endDate = new Date().toISOString().split('T')[0];
      const startDate = new Date();
      startDate.setDate(startDate.getDate() - 6); // 往前推6天，包含今天共7天
      this.picker = [startDate.toISOString().split('T')[0], endDate];
    }
  }
};
</script>

关键细节说明 #

• 我默认按范围选择来实现（毕竟“最近7天”是时间段），如果你的需求是单个日期选择，只需要去掉v-date-picker上的range属性，然后把pickToday里的赋值改成this.picker = today就行。
• 用v-btn-group包裹按钮，既能和Vuetify的组件风格统一，也能让按钮布局更紧凑美观。
• 日期格式处理：Vuetify日期选择器默认使用YYYY-MM-DD的ISO格式，所以通过toISOString().split('T')[0]来提取正确的日期字符串，避免格式不匹配的问题。
• 最近7天的计算逻辑：因为要包含当天，所以是当前日期减去6天，这样起始日到当日正好是7天的区间。

如果之后需要扩展更多快捷选项（比如“最近30天”“本月”），只需要新增按钮和对应的日期处理方法就可以啦～

内容的提问来源于stack exchange，提问作者Johnny