element日期选择器根据不同状态展示对应时间范围的搜索条件

Posted 2021-12-18 水星记_

需求：

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

实现

html

<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>

data

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;;
          
        , 
      
    ,

js

methods: 
      control(e) 
        this.gather.timeDate1 = []//每次点击清空日期框
        this.gather.timeDate2 = []//每次点击清空日期框
        this.gather.timeDate3 = []//每次点击清空日期框
        this.command = e//通过选择的状态控制日期选择范围
      ,
    

完整代码

<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>

效果