vue 实现日期年月日下拉选择

代码仅供参考，本人vue打酱油水平，喷子绕行

 

 

---

子组件代码 DateSelect.vue

<!-- 日期搜索框 -->
<template>
  <div id = "myDate" >
     <el-button icon="el-icon-caret-left"  @click="dateChange(4)" ></el-button>
    <el-select v-model="yearsModel" @change="dateChange(1)" placeholder="请选择" style="width:100px;">
        <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="请选择" style="width:100px;">
        <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="请选择" style="width:100px;">
        <el-option
          v-for="item in days"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button icon="el-icon-caret-right"   @click="dateChange(5)"  ></el-button>

  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
        yearsModel:null,
        years:[],
        monthsModel:null,
        months:[],
        daysModel:null,
        days:[],
    }
  },
  
  created() {
    this.init();
  },
  methods: {
     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日 4 左 5右
        if(type == 1||type == 2){
            if(this.monthsModel == 0){
              this.daysModel = 0;
              this.initSelectDay(this.yearsModel,1);
            }else{
              this.initSelectDay(this.yearsModel,this.monthsModel);
            }
        }
        if(type == 4){
          this.dayleft();
        }
        if(type == 5){
          this.dayright();
        }

        //操作父组件方法
        let obj ={year:this.yearsModel,month:this.monthsModel,day:this.daysModel }
        this.$parent.dateChange(obj);
        
      },
      dayleft(){
        
        var tmpYear = this.yearsModel;
        var tmpMonth =  this.monthsModel;
        var tmpDay = this.daysModel;
        if(tmpYear ==null){ 
          var myDate = new Date;
          var year = myDate.getFullYear();//获取当前年
          var month = myDate.getMonth()+1;//获取当前月
          var day = myDate.getDate();//获取当前日
           this.yearsModel = year;
           this.monthsModel = month;
           this.daysModel = day;
           return;
        }
        if(tmpMonth ==null){ tmpMonth = 0}
        if(tmpDay ==null){ tmpDay = 0}

        var yearV = tmpYear;
        var monthV = tmpMonth ;
        var dayV = tmpDay;
     
       if((tmpMonth == 0||tmpMonth == 1) && (tmpDay == 0||tmpDay == 1)){
           yearV = tmpYear  - 1; monthV = 12;
           dayV = this.getMaxDay(tmpYear,tmpMonth);
       }
        if(!(tmpMonth == 0||tmpMonth == 1) && (tmpDay == 0||tmpDay == 1)){
            monthV = tmpMonth - 1;
            dayV = this.getMaxDay(tmpYear,tmpMonth);
        }
         if((tmpMonth == 0||tmpMonth == 1) && !(tmpDay == 0||tmpDay == 1)){
            dayV = tmpDay - 1;
        }
        if(!(tmpMonth == 0||tmpMonth == 1) && !(tmpDay == 0||tmpDay == 1)){
            dayV = tmpDay - 1;
        }
        this.yearsModel = yearV;
        this.monthsModel = monthV;
        this.daysModel = dayV;
      },
      dayright(){

        var myDate = new Date;
        var year = myDate.getFullYear();//获取当前年
        var month = myDate.getMonth()+1;//获取当前月
        var day = myDate.getDate();//获取当前日

        var tmpYear = this.yearsModel;
        var tmpMonth =  this.monthsModel;
        var tmpDay = this.daysModel;
 
        if(tmpYear ==null){ 
          var myDate = new Date;
          var year = myDate.getFullYear();//获取当前年
          var month = myDate.getMonth()+1;//获取当前月
          var day = myDate.getDate();//获取当前日
          this.yearsModel = year;
          this.monthsModel = month;
          this.daysModel = day;
          return;
        }
      
        if(tmpMonth ==null){ tmpMonth = 0}
        if(tmpDay ==null){ tmpDay = 0}
        if(tmpYear>year){
           this.yearsModel = year;
           this.monthsModel = month;
           this.daysModel = day;
           return;
        }
         if(tmpYear == year){
           if((tmpMonth > month || tmpMonth ==0 )||(tmpMonth == month )&&(tmpDay >= day || tmpDay ==0)){
            this.yearsModel = year;
            this.monthsModel = month;
            this.daysModel = day;
             return;
           }
         }
           
         var maxDay = this.getMaxDay(tmpYear,tmpMonth);
         var yearV = tmpYear;
         var monthV = tmpMonth ;
         var dayV = tmpDay;

         if((tmpMonth == 0 || tmpMonth == 12) && (tmpDay == 0 || tmpDay == maxDay)){
             yearV = tmpYear  + 1; monthV = 1;
             dayV = 1;
         }
         if(!(tmpMonth == 0 || tmpMonth == 12) && (tmpDay == 0 || tmpDay == maxDay)){
             monthV = tmpMonth + 1;
             dayV = 1;
         }
         if(!(tmpMonth == 0 || tmpMonth == 12) && !(tmpDay == 0 || tmpDay == maxDay)){
             dayV = tmpDay + 1;
         }
        
        this.yearsModel = yearV;
        this.monthsModel = monthV;
        this.daysModel = dayV;

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

父页面代码

  引用日期组件
  <template>
  <div id = "demo" >
		<DateSelect   /> 
  </div>
  </template>
  <script>
  import DateSelect from './components/DateSelect'
  export default {
    components: { DateSelect },
    methods:{
   // 父页面添加 日期改变的方法
      dateChange(obj){
        console.log(obj.year+'-'+obj.month+'-'+obj.day);
      }
    }}
   </script>