PrimeVue 4 支持 Datepicker 预设吗？

Question

我正在使用最新的 PrimeVue，并希望使用日期范围预设来扩展 DatePicker，例如：本周、上周、上个月等。

组件链接：https://primevue.org/datepicker/

查看我想要做的示例：https://i.sstatic.net/DaTrezA4.png

如何做到这一点？

我尝试过使用插槽，但找不到任何适合我的东西。 或者也许我应该使用日历组件？

Answer 1

我认为您可以通过使用 #footer slot 组件的

DatePicker

来实现此目的：

示例片段

。

看下面的代码：

  <DatePicker v-model="dataRange" selectionMode="range" :manualInput="false">
  <template #footer>
    <Select
      :options="presets"
      optionLabel="label"
      optionValue="value"
      placeholder="Select Preset"
      v-model="selectedPreset"
      @change="setPresetRange"
    />
  </template>
    </DatePicker>

在

<script setup>

中你必须写下：

<script setup lang="ts">
import DatePicker from 'primevue/datepicker'
import { ref } from 'vue'
import { startOfWeek, endOfWeek, startOfMonth, endOfMonth, subDays } from 'date-fns'
import Select from 'primevue/select'

const presets = ref([
  { label: 'This Week', value: 'thisWeek' },
  { label: 'Last Week', value: 'lastWeek' },
  { label: 'Last Month', value: 'lastMonth' }
])

const selectedPreset = ref()
const dataRange = ref()
const range = ref([])

const setPresetRange = () => {
  const today = new Date()
  if (selectedPreset.value === 'thisWeek') {
    range.value = [startOfWeek(today), endOfWeek(today)]
  } else if (selectedPreset.value === 'lastWeek') {
    range.value = [subDays(startOfWeek(today), 7), subDays(endOfWeek(today), 7)]
  } else if (selectedPreset.value === 'lastMonth')
    range.value = [subDays(startOfMonth(today), 30), subDays(endOfMonth(today), 30)]
  else range.value = []

  dataRange.value = range.value
}
</script>

我希望这能帮助您达到想要的结果。