vue-pure-admin日期选择器：DatePicker日期范围选择-优快云博客

vue-pure-admin日期选择器：DatePicker日期范围选择

【免费下载链接】vue-pure-admin 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin

还在为后台管理系统中复杂的日期范围筛选而头疼吗？vue-pure-admin基于Element Plus的DatePicker组件，提供了强大而灵活的日期范围选择功能，让时间筛选变得简单高效。

日期范围选择的核心功能

vue-pure-admin的日期范围选择器支持多种时间范围类型，满足不同业务场景的需求：

1. 日期范围选择（daterange）

日期范围选择是最常用的功能，支持选择起始和结束日期：

<el-date-picker
  v-model="dateRange"
  type="daterange"
  class="w-[240px]!"
  unlink-panels
  range-separator="至"
  start-placeholder="开始时间"
  end-placeholder="结束时间"
  :shortcuts="shortcuts"
  :size="dynamicSize"
/>

关键属性说明：

属性	说明	类型	默认值
`type`	选择器类型	string	`daterange`
`unlink-panels`	是否取消左右面板联动	boolean	`false`
`range-separator`	范围分隔符	string	`至`
`start-placeholder`	开始日期占位符	string	-
`end-placeholder`	结束日期占位符	string	-

2. 月份范围选择（monthrange）

对于需要按月统计的场景，月份范围选择器是理想选择：

<el-date-picker
  v-model="monthRange"
  type="monthrange"
  unlink-panels
  range-separator="至"
  start-placeholder="开始月份"
  end-placeholder="结束月份"
  :shortcuts="monthShortcuts"
/>

3. 日期时间范围选择（datetimerange）

需要精确到时分秒的场景，可以使用日期时间范围选择器：

<el-date-picker
  v-model="datetimeRange"
  type="datetimerange"
  range-separator="至"
  start-placeholder="开始日期时间"
  end-placeholder="结束日期时间"
  :shortcuts="datetimeShortcuts"
/>

智能快捷选项配置

vue-pure-admin内置了丰富的快捷选项，提升用户体验：

const shortcuts = [
  {
    text: "上周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "上个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "三个月前",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

日期禁用与验证

通过disabled-date属性可以实现复杂的日期禁用逻辑：

const disabledDate = (time: Date) => {
  // 禁用未来日期
  return time.getTime() > Date.now();
  
  // 或者禁用周末
  // return time.getDay() === 0 || time.getDay() === 6;
  
  // 或者禁用特定日期范围
  // const today = new Date();
  // const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
  // return time < oneMonthAgo || time > today;
};

日期格式处理

vue-pure-admin支持灵活的日期格式配置：

<el-radio-group v-model="dateFormat">
  <el-radio value="">Date对象</el-radio>
  <el-radio value="YYYY-MM-DD">年月日格式</el-radio>
  <el-radio value="x">时间戳格式</el-radio>
</el-radio-group>

<el-date-picker
  v-model="formattedDate"
  type="daterange"
  format="YYYY/MM/DD"
  :value-format="dateFormat"
/>

实际应用场景

场景一：数据统计报表

<template>
  <el-form :model="queryParams" inline>
    <el-form-item label="统计时间">
      <el-date-picker
        v-model="queryParams.dateRange"
        type="daterange"
        :shortcuts="reportShortcuts"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-button type="primary" @click="handleQuery">查询</el-button>
  </el-form>
</template>

<script setup>
const queryParams = reactive({
  dateRange: []
});

const reportShortcuts = [
  { text: '今日', value: [new Date(), new Date()] },
  { text: '昨日', value: () => {
    const date = new Date();
    date.setDate(date.getDate() - 1);
    return [date, date];
  }},
  { text: '近7天', value: () => {
    const end = new Date();
    const start = new Date();
    start.setDate(start.getDate() - 6);
    return [start, end];
  }},
  { text: '近30天', value: () => {
    const end = new Date();
    const start = new Date();
    start.setDate(start.getDate() - 29);
    return [start, end];
  }}
];
</script>

场景二：日志查询系统

<template>
  <el-date-picker
    v-model="logTimeRange"
    type="datetimerange"
    :shortcuts="logShortcuts"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    value-format="YYYY-MM-DD HH:mm:ss"
    :disabled-date="disableFutureDates"
  />
</template>

<script setup>
const logTimeRange = ref('');

const logShortcuts = [
  { text: '最近1小时', value: () => {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000);
    return [start, end];
  }},
  { text: '最近24小时', value: () => {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24);
    return [start, end];
  }}
];

const disableFutureDates = (time) => {
  return time.getTime() > Date.now();
};
</script>

高级配置技巧

1. 面板位置控制

<el-date-picker
  v-model="dateRange"
  type="daterange"
  :popper-options="{
    placement: 'bottom-start' // 可选值: auto, top, bottom, left, right等
  }"
/>

2. 自定义前缀图标

<el-date-picker
  v-model="dateRange"
  type="daterange"
  :prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
/>

3. 响应式尺寸控制

<template>
  <el-radio-group v-model="size">
    <el-radio value="large">大尺寸</el-radio>
    <el-radio value="default">默认尺寸</el-radio>
    <el-radio value="small">小尺寸</el-radio>
  </el-radio-group>

  <el-date-picker
    v-model="dateRange"
    type="daterange"
    :size="dynamicSize"
  />
</template>

<script setup>
const size = ref('default');
const dynamicSize = ref('default');

watch(size, (val) => {
  dynamicSize.value = val;
});
</script>

最佳实践建议

统一格式规范：在整个项目中保持日期格式的一致性
合理的默认值：为日期选择器设置合理的默认时间范围
性能优化：对于大数据量的场景，考虑使用防抖处理
移动端适配：确保在移动设备上有良好的用户体验
错误处理：添加必要的验证和错误提示机制

常见问题解决

问题1：时区处理

// 使用dayjs处理时区问题
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';

dayjs.extend(utc);

const localDate = dayjs.utc(selectedDate).local().format('YYYY-MM-DD');

问题2：范围验证

const validateDateRange = (start, end) => {
  if (!start || !end) return false;
  return dayjs(start).isBefore(dayjs(end));
};

问题3：国际化支持

// 在i18n配置中添加日期相关翻译
const messages = {
  zh: {
    datePicker: {
      startDate: '开始日期',
      endDate: '结束日期',
      selectDate: '选择日期'
    }
  }
};

vue-pure-admin的日期范围选择器提供了企业级应用所需的所有功能，结合Element Plus的强大基础和vue-pure-admin的优化封装，让日期处理变得简单而高效。无论是简单的日期选择还是复杂的业务场景，都能找到合适的解决方案。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考