el-date-picker 时间选择器自定义年月日格式

最新推荐文章于 2025-04-25 14:33:25 发布

Roottt_

最新推荐文章于 2025-04-25 14:33:25 发布

阅读量5.6k

点赞数

文章标签：前端 es6 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43896125/article/details/121333984

版权

el-date-picker 时间选择器自定义年月日三种
特殊需求
选择年后，选月份时会默认所选年份，日期一样
当自选日期后，年份月份也会与当前选择一致
在这里插入图片描述
代码

 <div class=''>
  <span>年</span>
    <el-date-picker
        v-model="selectYear"
        size='mini'
        type="year"
        @change='selectYearFun'
        placeholder="选择年">
    </el-date-picker>
</div>
<div class=''>
    <span>月</span>
    <el-date-picker
        size='mini'
        v-model="selectMonth"
        type="month"
        format='MM'
        :default-value='timeDefaultShow'
        @change='selectMonthFun'
        placeholder="选择月">
    </el-date-picker>
</div>
<div class=''>
    <span>日</span>
    <el-date-picker
        size='mini'
        v-model="selectDay"
        type="date"
        format='dd'
        :default-value='timeDefaultShow2'
        @change='selectDayFun'
        placeholder="选择日">
    </el-date-picker>
</div>

data(){
	return{
		 selectYear:'',
         selectMonth:'',
         selectDay:'',
         timeDefaultShow:'',
         timeDefaultShow2:'',
	}
}

 /**
* 选择年份
* */
selectYearFun(year){
   this.selectMonth = '';
   this.selectDay = '';
   this.timeDefaultShow = year
},

//下面方面加了if判断，当清空当前日期或月份时，不会清空前面所选
/**
* 选择月份
* */
selectMonthFun(month){
   console.log(month)
   this.selectDay = '';
   if( month ){
       this.selectYear = month;
       this.timeDefaultShow2 = month
   }
},
/**
* 选择日期
* */
selectDayFun(day){
   console.log(day,'-------------');
   if( day ){
       this.selectYear = day
       this.selectMonth = day
   }

},