element日期选择器掌控时间范围，更好地满足你的需求

水星记_

已于 2025-04-18 16:19:18 修改

阅读量2.6k

点赞数 1

分类专栏： element 文章标签：前端 vue

于 2021-11-23 19:00:19 首次发布

本文链接：https://blog.youkuaiyun.com/Shids_/article/details/121500161

版权

element 专栏收录该内容

38 篇文章

订阅专栏

前言

日期选择器作为重要的时间控件，可以大大提高用户体验。而在控制选择时间范围方面，element 日期选择器更是具有独特的优势。本文将介绍如何利用 element 日期选择器控制时间范围，为用户提供更好的交互体验。

需求：

选择类型为“年”，时间范围最大跨度为五年数据
选择类型为“月”，时间范围最大跨度为一年数据
选择类型为“日”，时间范围最大跨度为30天数据

完整代码

<template>
  <div>
    <div class="searchSeek">
      <div>
        <el-select v-model="gather.deathdate" placeholder="请选择类型" @change="control">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!--年-->
      <div v-if="this.command == '0'">
        <el-date-picker v-model="gather.timeDate1" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionOne">
        </el-date-picker>
      </div>
      <!--月-->
      <div v-if="this.command == '1'">
        <el-date-picker v-model="gather.timeDate2" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionTwo">
        </el-date-picker>
      </div>
      <!--日-->
      <div v-if="this.command == '2'">
        <el-date-picker v-model="gather.timeDate3" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionTherr">
        </el-date-picker>
      </div>
      <div>
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        gather: {
          deathdate: "", //年月日类型model
          timeDate1: [], //年model
          timeDate2: [], //月model
          timeDate3: [], //日model
        },
        command: "", //控制年月日显示隐藏
        options: [{//年月日下拉数据
          value: '0',
          label: '年'
        }, {
          value: '1',
          label: '月'
        }, {
          value: '2',
          label: '日'
        }], 
        pickerOptionOne: {
          disabledDate(time) {//只能选择5年数据
            let curDate = (new Date()).getTime();
            let three = 5 * 12 * 30 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          }
        }, 
        pickerOptionTwo: {//只能选择12个月数据
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 12 * 30 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          }
        }, 
        pickerOptionTherr: {//只能选择30天数据
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 30 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          }
        }, 
      }
    },
    methods: {
      control(e) {
        this.gather.timeDate1 = []//每次点击清空日期框
        this.gather.timeDate2 = []//每次点击清空日期框
        this.gather.timeDate3 = []//每次点击清空日期框
        this.command = e//通过选择的状态控制日期选择范围
      },
    }
  }
</script>

<style scoped>
.searchSeek{
  display: flex;
}
</style>