文章来源地址https://www.toymoban.com/news/detail-647163.html
组件：
<!--
* @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(),
// 开始年度和结束年度 添加限制
// startDatePicker: {
// disabledDate: (time) => {
// if (this.startDatePicker) {
// return (
// time.getTime() > this.startDatePicker ||
// time.getTime() > Date.now()
// );
// }
// },
// },
// endDatePicker: {
// disabledDate: (time) => {
// return (
// time.getTime() < this.endDatePicker ||
// time.getTime() > Date.now()
// );
// },
// },
};
},
created() {},
watch: {
// dateList(v) {
// this.$emit("input", v);
// },
},
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(self.oldTime).getTime()
// return time.getTime() < fixedTime
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__icon {
// display: none;
// }
.el-input__inner {
border: none;
text-align: center;
}
}
}
</style>
使用：
<YearYear @getTime="getTime"></YearYear>
// 获取传过来的时间
getTime(val) {},
文章来源：https://www.toymoban.com/news/detail-647163.html
到了这里，关于年之年的选择，组装版的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
