Vue DateRange Filter

A customizable date range filter component for Vue 3 applications with preset options and custom date selection.

Features

• 🗓️ Predefined date ranges (3 months, 6 months, 12 months)
• 📅 Custom date range selection
• 🎨 Customizable via slots and props
• 📱 Responsive design
• 🚀 Lightweight and easy to integrate

Installation

npm install vue-date-range-filter
# or
yarn add vue-date-range-filter
# or
pnpm add vue-date-range-filter

Usage

Global Registration

import { createApp } from 'vue'
import App from './App.vue'
import DateRangeFilter from 'vue-date-range-filter'

const app = createApp(App)
app.use(DateRangeFilter)
app.mount('#app')

Individual Component Registration

import { DateRangeFilter } from 'vue-date-range-filter'

export default {
  components: {
    DateRangeFilter
  }
}

In Template

<DateRangeFilter 
  @date-range-selected="handleDateRange"
  @reset-date-filter="handleReset"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialRangeType | String | '' | Initial range type ('past_3m', 'past_6m', 'past_12m', 'custom') | | initialStartDate | String | '' | Initial start date (YYYY-MM-DD format) | | initialEndDate | String | '' | Initial end date (YYYY-MM-DD format) |

Events

| Event | Parameters | Description | |-------|------------|-------------| | date-range-selected | { startDate, endDate, rangeType } | Emitted when date range is applied | | reset-date-filter | - | Emitted when filter is reset |

Slot

Slot Description icon Custom icon for the filter button label Custom label for the filter button

Example with custom slot

html <template #icon> <template #label> Select Date Range