FilterDateRange 日期范围选择

用于筛选条件中的快捷日期范围选择器，支持预定义快捷按钮和自定义日期范围选择。通常作为 HxFilterPanel 的子组件使用，也支持独立使用。

独立使用

展示 FilterDateRange 的三种使用场景：默认快捷日期、自定义快捷日期、自定义日期格式

默认快捷日期（7/30/90天）

日期

-

当前值：（未选择）

自定义快捷日期

周期

-

当前值：（未选择）

自定义格式

日期

-

当前值：（未选择）

<template>
  <div class="demo-section">
    <p class="demo-title">默认快捷日期（7/30/90天）</p>
    <HxFilterDateRange
      v-model="range1"
      label="日期"
      @change="onChange1"
    />
    <p class="demo-value">当前值：{{ displayValue(range1) }}</p>

    <p class="demo-title" style="margin-top: 28px">自定义快捷日期</p>
    <HxFilterDateRange
      v-model="range2"
      label="周期"
      :shortcuts="customShortcuts"
      @change="onChange2"
    />
    <p class="demo-value">当前值：{{ displayValue(range2) }}</p>

    <p class="demo-title" style="margin-top: 28px">自定义格式</p>
    <HxFilterDateRange
      v-model="range3"
      label="日期"
      format="YYYY/MM/DD"
      @change="onChange3"
    />
    <p class="demo-value">当前值：{{ displayValue(range3) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HxFilterDateRange } from '@whhx/ui'
import type { FilterDateRangeShortcut } from '@whhx/ui'

const range1 = ref('')
const range2 = ref('')
const range3 = ref('')

const customShortcuts: FilterDateRangeShortcut[] = [
  { label: '最近3天', days: 3 },
  { label: '最近7天', days: 7 },
  { label: '最近15天', days: 15 },
  { label: '最近60天', days: 60 },
]

function displayValue(val: unknown): string {
  if (!val || val === '') return '（未选择）'
  if (Array.isArray(val) && val.length === 2) {
    return `${val[0]} ～ ${val[1]}`
  }
  return String(val)
}

function onChange1(val: unknown) { console.log('日期变化1:', val) }
function onChange2(val: unknown) { console.log('日期变化2:', val) }
function onChange3(val: unknown) { console.log('日期变化3:', val) }
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
.demo-value {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--el-text-color-regular);
}
</style>

展示 dropdownPlacement 属性，控制自定义日期选择器的弹出位置

弹出位置 - 下方（默认）

日期

-

当前值：（未选择）

弹出位置 - 右侧

周期

-

当前值：（未选择）

<template>
  <div class="demo-section">
    <p class="demo-title">弹出位置 - 下方（默认）</p>
    <HxFilterDateRange
      v-model="range1"
      label="日期"
      dropdown-placement="bottom"
    />
    <p class="demo-value">当前值：{{ displayValue(range1) }}</p>

    <p class="demo-title" style="margin-top: 28px">弹出位置 - 右侧</p>
 
      <HxFilterDateRange
        v-model="range2"
        label="周期"
        dropdown-placement="right"
      />

    <p class="demo-value">当前值：{{ displayValue(range2) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HxFilterDateRange } from '@whhx/ui'

const range1 = ref('')
const range2 = ref('')

function displayValue(val: unknown): string {
  if (!val || val === '') return '（未选择）'
  if (Array.isArray(val) && val.length === 2) {
    return `${val[0]} ～ ${val[1]}`
  }
  return String(val)
}
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
  min-height: 200px;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
.demo-value {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--el-text-color-regular);
}
</style>

API

HxFilterDateRange Props

参数	说明	类型	默认值
modelValue / v-model	当前选中的日期范围，值为 ''（未选择）或 [start, end] 字符串元组	FilterValueType	—
label	左侧标签文本	string	''
shortcuts	快捷区间按钮列表，省略时为默认近 7 / 30 / 90 天	FilterDateRangeShortcut[]	—
format	日期输出与展示格式	string	'YYYY-MM-DD'
dropdownPlacement	自定义日期选择器弹出位置	'bottom' | 'right'	'right'

HxFilterDateRange Emits

事件名	说明	参数
update:modelValue	日期范围变化	(value: FilterValueType)
change	日期范围变化（与 update:modelValue 同时触发）	(value: FilterValueType)

FilterDateRangeShortcut

参数	说明	类型
label	按钮文案	string
days	结束为今天、开始为今天往前推的天数	number

类型定义

import type {
  FilterDateRangeProps,
  FilterDateRangeShortcut,
  FilterValueType,
} from '@whhx/ui'

功能说明

• 快捷选择：点击预设快捷按钮（如「最近7天」）可直接选择对应日期范围，再次点击可取消选中。
• 自定义选择：点击「自定义」按钮展开 el-date-picker 日期范围选择器，支持任意起止日期。
• 选中态切换：点击不同的快捷按钮或切换到自定义模式会自动切换选中态，且日期显示与选中状态保持一致。
• 可清空：再次点击已激活的快捷按钮可取消选中；自定义日期选择器支持 clearable 清空。
• 双向绑定：支持 v-model，值为 ''（未选择）或 [start, end] 字符串元组。