Does PrimeVue 4 supports Datepicker presets?

I am using latest PrimeVue and want to extend DatePicker with presets for date ranges, like: This Week, Last Week, Last Month, etc.

Component link: https://primevue.org/datepicker/

See example of what I want to do: https://i.sstatic.net/DaTrezA4.png

How to do that?

I've tried using slots but can't find anything that works for me. Or maybe should I use Calendar component?

I think you can achieve this: example snippet by using the #footer slot of the DatePicker component.

Look at the code below:

  <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>

And in the <script setup> you have to write this:

<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>

I hope this will help you achieve the desired result.