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