useDateRangePresets

A composable to manage common date range presets for filters and date pickers. Supports presets like "today", "last week", "this month", and custom ranges. Can optionally include time information in ISO strings.

Usage

const { getDateRange, resolvePresets, getFilterValue } = useDateRangePresets({ withTime: true })

const selectedPreset = ref('today')
const filterValue = getFilterValue(selectedPreset.value)
const customPresets = resolvePresets([
  'today',
  'last-week',
  {
    label: 'Custom range',
    value: ['2023-01-01', '2023-01-15'],
  }
])

Type identifier

function useDateRangePresets(options?: { withTime?: boolean }): {
  getDateRange: (identifier: PresetIdentifier) => PresetDate | undefined
  defaultPresets: ComputedRef<PresetDate[]>
  resolvePresets: (presets: PresetDateProp[]) => PresetDate[]
  getFilterValue: (preset: PresetIdentifier, noOperator?: boolean) => 
    { operator: typeof BETWEEN_OPERATOR, value: string[] } | string[] | undefined
  PRESET_IDENTIFIERS: readonly PresetIdentifier[]
}

type PresetIdentifier =
  | 'today'
  | 'yesterday'
  | 'this-week'
  | 'last-week'
  | 'this-month'
  | 'last-month'
  | 'this-year'
  | 'last-year'
  | 'last-7-days'
  | 'last-30-days'
  | 'last-90-days'

interface PresetDate {
  label: string
  value: string[]
}

type PresetDateProp = PresetIdentifier | PresetDate

Parameters

options

Parameter	Type	Description
options	{ withTime?: Boolean}	Optional. Whether to include time in the ISO string. Default false

Return Value

Property	Type	Description
getDateRange	(identifier: PresetIdentifier) => PresetDate | undefined	Returns the label and ISO string values for a preset
defaultPresets	ComputedRef<PresetDate[]>	Computed list of commonly used presets
resolvePresets	(presets: PresetDateProp[]) => PresetDate[]	Converts mixed custom presets and preset identifiers to a list of PresetDate objects
getFilterValue	(preset: PresetIdentifier, noOperator?: boolean) => { operator: string, value: string[] } | string[] | undefined	Returns the filter value for a preset, optionally without the operator
getFilterValue	readonly PresetIdentifier[]	List of all supported preset identifiers

Examples

Basic Date Filter

const todayRange = getDateRange('today')
console.log(todayRange)
// { label: "Today", value: ["2026-01-28T00:00:00", "2026-01-28T23:59:59"] }

const lastWeekFilter = getFilterValue('last-week')
console.log(lastWeekFilter)
// { operator: 'between', value: ["2026-01-19", "2026-01-25"] }

Using Custom and Preset Ranges Together

const ranges = resolvePresets([
  'today',
  'this-week',
  { label: 'Custom', value: ['2023-01-01', '2023-01-15'] }
])
console.log(ranges)

/*
 [
  {
    label: "Today",
    value: ["2026-01-28", "2026-01-28"]
  },
  {
    label: "This week",
    value: ["2026-01-26", "2026-02-01"]  // week from Monday to Sunday
  },
  {
    label: "Custom",
    value: ["2023-01-01", "2023-01-15"]
  }
] 
*/

Using in a Filter Component (Vue)

<template>
  <WeDtDaterangeFilter
    v-model="filters.date"
    :preset-dates="resolvePresets(['today', 'last-week'])"
    with-time
  />
</template>

<script setup>
/*
[
  {
    label: "Today",
    value: ["2026-01-28T00:00:00", "2026-01-28T23:59:59"]
  },
  {
    label: "Last week",
    value: ["2026-01-19T00:00:00", "2026-01-25T23:59:59"]
  }
]
*/
</script>