组件:
< ! --
* @Author: liuyu liuyu@xizhengtech. com
* @Date: 2023 - 02 - 01 16 : 57 : 27
* @LastEditors: wangping wangping@xizhengtech. com
* @LastEditTime: 2023 - 06 - 30 17 : 25 : 14
* @Description: 时间选择年 - 年
-- >
< template>
< div class = "year-range-picker" >
< el- date- picker v- model= "dateList[0]" : clearable= "false" type= "year" placeholder= "开始年" class = "year-picker" format= "yyyy" value- format= "yyyy" : picker- options= "startDatePicker" @change= "getTime" >
< / el- date- picker>
< span class = "range-word" > 至 < / span>
< el- date- picker v- model= "dateList[1]" prefix- icon= '0' type= "year" placeholder= "结束年" class = "year-picker" value- format= "yyyy" : picker- options= "endDatePicker" @change= "getTime" >
< / el- date- picker>
< / div>
< / template>
< script>
export default {
data ( ) {
return {
dateList : [ ] ,
startDatePicker : this . beginDate ( ) ,
endDatePicker : this . processDate ( ) ,
} ;
} ,
created ( ) { } ,
watch : {
} ,
methods : {
getTime ( val ) {
console. log ( "但:" , this . dateList) ;
if ( val == null ) {
this . dateList = [ ] ;
}
this . $emit ( "getTime" , this . dateList) ;
} ,
beginDate ( ) {
let self = this ;
return {
disabledDate ( time ) {
if ( self. dateList[ 1 ] !== "" && self. dateList[ 1 ] !== null ) {
let fixedTime = new Date ( time) ;
return fixedTime. getFullYear ( ) > self. dateList[ 1 ] ;
} else {
return ;
}
} ,
} ;
} ,
processDate ( ) {
let self = this ;
return {
disabledDate ( time ) {
let fixedTime = new Date ( time) ;
return fixedTime. getFullYear ( ) < self. dateList[ 0 ] ;
} ,
} ;
} ,
} ,
} ;
< / script>
< style lang= "scss" scoped>
. year- range- picker {
width : 260px;
border : 1px solid #dcdfe6;
border- radius: 4px;
display : flex;
align- items: center;
: : v- deep. el- date- editor {
. el- input__inner {
border : none;
text- align: center;
}
}
}
< / style>
使用:
< YearYear @getTime= "getTime" > < / YearYear>
getTime ( val ) { } ,