PrimeVue 4 Datepicker是否支持预设？如何添加日期范围预设？

不用切换到Calendar组件，基于DatePicker就能搞定你要的本周、上周、上月这类日期范围预设功能，具体做法如下：

1. 开启范围选择模式 #

先给DatePicker设置range属性，启用日期范围选择：

<DatePicker v-model="dateRange" range />

2. 编写日期范围计算逻辑 #

写几个方法分别计算不同预设的起止日期，直接赋值给绑定的dateRange变量：

// 本周范围：从周一到周日（若需从周日开始，调整getDay计算逻辑即可）
const setThisWeek = () => {
  const now = new Date();
  const start = new Date(now.setDate(now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)));
  const end = new Date(now.setDate(start.getDate() + 6));
  dateRange.value = [start, end];
};

// 上周范围
const setLastWeek = () => {
  const now = new Date();
  const start = new Date(now.setDate(now.getDate() - now.getDay() + (now.getDay() === 0 ? -13 : -6)));
  const end = new Date(now.setDate(start.getDate() + 6));
  dateRange.value = [start, end];
};

// 上月范围：当月第一天到最后一天
const setLastMonth = () => {
  const now = new Date();
  const start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
  const end = new Date(now.getFullYear(), now.getMonth(), 0);
  dateRange.value = [start, end];
};

3. 嵌入预设按钮到组件面板 #

利用DatePicker的panel插槽，把预设按钮加到弹出的日期选择面板顶部，点击后自动赋值并关闭面板：

<DatePicker v-model="dateRange" range>
  <template #panel="{ close }">
    <div class="p-3 border-b mb-2 flex gap-2">
      <button @click="setThisWeek(); close()" class="p-button p-button-text">本周</button>
      <button @click="setLastWeek(); close()" class="p-button p-button-text">上周</button>
      <button @click="setLastMonth(); close()" class="p-button p-button-text">上月</button>
    </div>
  </template>
</DatePicker>

这样就能实现你预期的预设效果，完全不需要更换组件，DatePicker的插槽和范围模式足够满足需求。

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