WeDtDaterangeFilter

A date-range selection filter using the WeDatePicker component. It supports preset ranges, raw value output and direct integration with WeDataTable filter.

The date picker is configured in range mode and displays two calendars. When closed, the chip shows the selected range, or a preset label if it matches one of the predefined ranges.

<template>
  <WeDtDateRangeFilter
    v-model="filters.date"
    label="Date Range"
  />
</template>

<script setup>
const filters = ref({
  date: [],
})
</script>

Modes

The component can work in two modes:

1. Structured filter mode (default)

Emits an object like:

{
  operator: 'between',
  value: ['2024-01-01', '2024-01-31']
}

This mode is designed to integrate directly with WeDataTable and backend range filtering.

2. Raw value mode

By enabling emitRawValue = true, it emits only the date array

['2024-01-01', '2024-01-31']

Preset Dates

When configured, it will provide a sidebar with a configured range / date that the user can select

Click here to see the documentation in detail VueDatePicker presetDates

<template>
  <WeDtDateRangeFilter
    v-model="filters.date"
    label="Date Range"
    :preset-dates="presetDates"
  />
</template>

<script setup>
const filters = ref({
  date: [],
})

const presetDates = ref([
  {
    "value": [
      "2025-11-04",
      "2025-11-04"
    ],
    "label": "Today"
  },
  {
    "value": [
      "2025-11-03",
      "2025-11-03"
    ],
    "label": "Yesterday"
  },
  {
    "value": [
      "2025-10-27",
      "2025-11-02"
    ],
    "label": "Last week"
  }
])
</script>

Props

Prop	Type	Default	Description
label	String	null	Allows you to change the default title of the component: "Filter date"
presetDates	Array	[]	Optional custom preset definitions
emitRawValue	Boolean	false	When true, v-model returns only the raw value instead of the filter object