vue实现日期范围选择

使用 Vue 实现日期范围选择

安装依赖

使用 vue2-datepicker 或 element-ui 的日期选择组件，安装对应的库：

npm install vue2-datepicker --save
# 或
npm install element-ui --save

基本实现（vue2-datepicker）

在组件中引入 vue2-datepicker 并配置日期范围选择：

<template>
  <date-picker
    v-model="dateRange"
    range
    type="date"
    placeholder="选择日期范围"
  />
</template>

<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';

export default {
  components: { DatePicker },
  data() {
    return {
      dateRange: [],
    };
  },
};
</script>

使用 Element-UI 的日期范围选择

如果项目基于 Element-UI，可以直接使用其内置的日期范围组件：

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  />
</template>

<script>
export default {
  data() {
    return {
      dateRange: [],
    };
  },
};
</script>

自定义日期范围限制

可以通过 picker-options 限制可选日期范围，例如禁止选择今天之后的日期：

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

<script>
export default {
  data() {
    return {
      dateRange: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
};
</script>

处理日期范围数据

获取日期范围后，通常需要格式化或提交到后端：

methods: {
  submitRange() {
    const [start, end] = this.dateRange;
    const formattedStart = start.toISOString().split('T')[0];
    const formattedEnd = end.toISOString().split('T')[0];
    console.log('提交范围:', formattedStart, formattedEnd);
  },
},

响应式更新

监听日期范围变化并触发操作：

watch: {
  dateRange(newVal) {
    if (newVal && newVal.length === 2) {
      console.log('日期范围变化:', newVal);
    }
  },
},

注意事项

• 日期库的时区问题需注意，建议使用 moment.js 或 day.js 处理格式化。
• 移动端适配可能需要额外样式调整或使用专用移动端日期组件（如 vant）。
• 清空日期范围时，v-model 绑定的数组会变为空，需做好边界判断。