基于vue的时间选择插件

个人博客：http://kingsman96.top  欢迎来访！！！

一、效果展示

二、代码片段

1、子组件代码

<template>
  <div id = "myDate" >
    <el-select v-model="yearsModel" @change="dateChange(1)" placeholder="请选择" >
        <el-option
          v-for="item in years"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        <el-select v-model="monthsModel" @change="dateChange(2)" placeholder="请选择" >
        <el-option
          v-for="item in months"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        <el-select v-model="daysModel" @change="dateChange(3)" placeholder="请选择" >
        <el-option
          v-for="item in days"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
  </div>
</template>
 
<script>
import {mapMutations} from 'vuex'
export default {
  props: {
  },
  data() {
    return {
        yearsModel:null,
        years:[],
        monthsModel:null,
        months:[],
        daysModel:null,
        days:[],
    }
  },
  created() {
    this.init();
  },
  methods: {
    ...mapMutations('app',['changeDate']),
    init(){
      var myDate = new Date;
      var year = myDate.getFullYear();//获取当前年
      var month = myDate.getMonth()+1;//获取当前月
      var day = myDate.getDate();//获取当前日

      this.initSelectYear(year)
      this.initSelectMonth();
      this.initSelectDay(year,month);
      this.yearsModel = year;
      this.monthsModel = month;
      this.daysModel = day;
      let obj ={year:this.yearsModel,month:this.monthsModel,day:this.daysModel }
      this.$parent.dateChange(obj);
    },
    initSelectYear(year){
          this.years = [];
          for(let i=0;i<30;i++){
          this.years.push({value:(year - i),label:(year - i)+ "年"});
          }
    },
    initSelectMonth(){
        this.months = [];
        this.months.push({value:0,label:"全部"});
          for(let i=1;i<=12;i++){
          this.months.push({value:i,label:i+ "月"});
          }
    },
    initSelectDay(year,month){
        var maxDay = this.getMaxDay(year,month);
        this.days = [];
        this.days.push({value:0,label:"全部"});
        for(var i=1;i<=maxDay;i++){
            this.days.push({value:i,label:i+ "日"});
        }
    },
    dateChange(type){
      //1年 2月 3日
      if(type == 1||type == 2){
          if(this.monthsModel == 0){
            this.daysModel = 0;
            this.initSelectDay(this.yearsModel,1);
          }else{
            this.initSelectDay(this.yearsModel,this.monthsModel);
          }
      }
      let obj ={year:this.yearsModel,month,day:day }
      this.$parent.dateChange(obj);
    },
    getMaxDay(year,month){
      var new_year = year;  //取当前的年份
      var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
      if(month>12)      //如果当前大于12月，则年份转到下一年
      {
          new_month -=12;    //月份减
          new_year++;      //年份增
      }
      var new_date = new Date(new_year,new_month,1);//取当年当月中的第一天
      return (new Date(new_date.getTime()-1000*60*60*24)).getDate();//获取当月最后一天日期
    }
  }
}
</script>

<style lang="scss">
#myDate{
  .el-select{
    margin-right: 15px;
    .el-input__inner{
      font-size: 16px;
      width: 149px;
	    height: 35px;
      background-image: linear-gradient(90deg, 
        #0d3d4e 0%, 
        #102b3f 43%, 
        #121930 100%), 
      linear-gradient(
        #00ffff, 
        #00ffff);
      background-blend-mode: normal, 
        normal;
      border-radius: 5px;
      border: solid 1px #087381; 
    }
  }
}
</style>

2、父组件代码片段

 <dateSelect/>

//methods方法获取子元素的时间
dateChange(obj){
    this.selectDate=obj
},

具体情况可以根据自己项目进行改动