封装日期控件，分别以日、月、季度、年查询

日、月、年可以直接使用element现成的，只有对选择日期的限制需要根据需求自定义。主要是对季度的封装。

我这里限制【日】当天及以后不可选，【月】当月及以后不可选，【季】本季度及以后不可选，【年】本年及以后不可以选。

<el-radio-group @change="onTypeChange" class="mr-10" v-model="state.type">
    <el-radio-button label="DAY">日</el-radio-button>
    <el-radio-button label="MONTH">月</el-radio-button>
    <el-radio-button label="QUARTER">季</el-radio-button>
    <el-radio-button label="YEAR">年</el-radio-button>
</el-radio-group>

日/月/年 

这个就不用多说了，直接按照官方文档的修改type之类的就行，以‘日’举例：

 <el-date-picker
    v-if="state.type === 'DAY'"
    v-model="dataObj.day"
    type="date"
    @change="onChange"
    value-format="YYYY-MM-DD"
    :disabled-date="disabledDate"
    clearable
  />

季度

<ElQuarterPicker v-else-if="state.type === 'QUARTER'" @onChange="onChange" />

单独封装了一个组件

这个直接上代码吧，大家都看的懂。下次弄git，这代码粘的我都难受。

<template>    <div>        <mark            style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"            v-show="state.showSeason"            @click.stop="state.showSeason=false"        ></mark>        
<el-input placeholder="" v-model="state.season" style="width:220px;" @focus="state.showSeason=true" :prefix-icon="Calendar">        </el-input>        <el-card          class="box-card"          style="width:324px;padding: 0 3px;margin-top:10px;position:fixed;z-index:9999;background-color: white !important;"          v-show="state.showSeason"        >          
<div slot="header" class="clearfix flex" style="text-align:center;padding-bottom:10px;justify-content: space-between;          align-items: center;border-bottom:1px solid #ebeef5;">            <el-icon @click="prev" style="cursor: pointer;"><DArrowLeft /></el-icon>            <span role="button" class="el-date-picker__header-label">{{ state.year }}年</span>            
<el-icon @click="next" style="cursor: pointer;"><DArrowRight /></el-icon>          </div>          <div class="flex mt-30">            <el-button              v-for="item in state.showData"              :key="item.value"              type="text"              :disabled="state.currentYear==state.year&&item.flag"                         
:class="{'self-quarter-picker-button' : true, 'self-active': state.year==state.year&&state.currentSeason==item.name?true:false}"              @click="selectSeason(item)"            >{{item.name}}            </el-button>          </div>        </el-card>      </div>  </template>  
 <script setup>import { reactive,defineEmits,onMounted } from 'vue';import { DArrowLeft,DArrowRight,Calendar } from "@element-plus/icons-vue"const emits = defineEmits(['onChange'])const state = reactive({    showData:[    {        name:'Q1',        value:'01',        flag:false    },    {        name:'Q2',        value:'02',        flag:false    },
    {        name:'Q3',        value:'03',        flag:false    },    {        name:'Q4',        value:'04',        flag:false    },    ],    showSeason: false,       season: '',    currentSeason:'',    year: new Date().getFullYear(),    currentYear:''})const prev=()=> {  state.year = state.year - 1}const next=()=> {  state.year = state.year + 1}
const selectSeason=(item)=> {  state.currentSeason=item.name;  state.season = `${state.year}`+'-'+item.name;  state.showSeason=false;  const data = `${state.year}`+'-'+item.value;  emits('onChange', data)}//设置禁用项const setLimit = ()=>{  let date = new Date();  state.currentYear = date .getFullYear();   //获取当前季度  const currMonth= new Date().getMonth()+1;
  const currQuarter = Math.floor( ( currMonth % 3 == 0 ? ( currMonth / 3 ) : ( currMonth / 3 + 1 ) ) );  console.log(currQuarter);  state.showData.map((item,index)=>{    if(index+1>=currQuarter){      return item.flag=true    }  })}onMounted(() => {  setLimit()})</script>   <style>.el-quarter-picker {  width: 220px;  display: inline-block;}
.self-quarter-picker-button{  width:40%;  color: #606266;  float:left;}.self-quarter-picker-button.self-active{  color: #409eff;}.self-quarter-picker-button:hover{  color:#409eff!important;}.self-quarter-picker-button.el-button--text.is-disabled{  background-color: #f5f7fa;  color:#a8abb2;}.self-quarter-picker-button.el-button--text.is-disabled:hover{  color:#a8abb2!important;}</style>

添加选择日期限制

const disabledDate = (time) => {
  let myDate = new Date();
  let nonYear = myDate.getFullYear(); // 获取当年
  let beforeYear = nonYear - 1;//上一年
  let dateLimt = new Date(`${beforeYear}/01/01 23:59:59`).getTime();//当前日期之前不可选
  let strDate = myDate.getDate(); // 获取当前是几号
  if(state.type=== 'DAY'){
    return time.getTime() > Date.now() - 8.64e7
   }else if(state.type=== 'MONTH'){
    return time.getTime() > (Date.now() - 8.64e7 * strDate);
   }else if(state.type=== 'YEAR'){
    return  time.getTime() > dateLimt
  }}

父组件调用拿值

const onChange = (date) => {
  emits('change', { type: state.type, date })
}