日期切换

组件：

<template><div class="time-picker"><el-radio-group size="small" v-model="timeType" @change="changePickerType"><el-radio-button label="hour" v-if="isShow">时</el-radio-button><el-radio-button label="day">日</el-radio-button><el-radio-button label="month">月</el-radio-button><el-radio-button label="quarter">季</el-radio-button><el-radio-button label="year">年</el-radio-button></el-radio-group><el-date-picker v-if="timeType != 'year' && timeType != 'quarter'" v-model="timeList" :type="pickerType[timeType].type" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 300px" value-format="timestamp" :clearable="false" :format="pickerType[timeType].format" @change="changeDatePicker" class="select-time" popper-class="time-popper" :default-time="['00:00:00', '23:00:00']"></el-date-picker><YearYear1 v-if="timeType == 'year'" style="width:300px" :initYear="dateValue2" @updateTimeRange="updateStatisticYear" /><QuarterTime v-if="timeType == 'quarter'" @getQuarter="getQuarter"></QuarterTime></div>
</template><script>
import YearYear1 from "@/components/YearYear1";
import QuarterTime from "@/components/QuarterTime";
export default {model: {prop: "times",event: "updatetimes",},props: {times: {type: Array,},isShow: {type: Boolean,default: true,},},components: {YearYear1,QuarterTime,},data() {return {timeType: "hour",timeList: [],yearTime: [],dateValue2: [],pickerType: {hour: {type: "datetimerange",format: "yyyy-MM-dd HH时",},day: {type: "daterange",},month: {type: "monthrange",},quarter: {type: "quarter",},year: {type: "year",},},};},methods: {changePickerType(type) {let dayType = {month: {type: "years",count: 1,},day: {type: "days",count: 3,},hour: {type: "days",count: 3,},quarter: {type: "quarter",count: 1,},year: {type: "years",count: 2,},};//   var moment = require("moment");//   const startDay = moment()//     .subtract(dayType[type].count, dayType[type].type)//     .format("YYYY-MM-DD HH:00:00");//   const endDay = moment().format("YYYY-MM-DD HH:00:00");//   this.timeList = [//     new Date(startDay).getTime(),//     new Date(endDay).getTime(),//   ];this.timeList = [];this.yearTime = this.timeList;//   this.$emit("updatetimes", this.timeList);},isNull(value) {if (value) {return false;}return true;},//获取季度子组件传回的数据getQuarter(val) {console.log("季节：", val);},// 选择年updateStatisticYear(val) {console.log("年", val);},changeDatePicker(e) {console.log("选择：", e);this.$emit("updatetimes", e);},},
};
</script><style lang="scss" scoped>
.time-picker {display: flex;
}.time-popper {.el-time-spinner {display: flex;justify-content: center;& > :nth-child(2) {display: none;}}.el-picker-panel__footer {& > :first-child {display: none;}}
}
.el-radio-group {margin-right: 10px;
}
.year-picker {line-height: 28px;
}
::v-deep .el-radio-button--small .el-radio-button__inner {height: 36px;line-height: 18px;
}
::v-deep .el-range-editor--small.el-input__inner {height: 36px;line-height: 18px;
}
::v-deep .el-range-editor--small .el-range__icon {line-height: 30px;
}
</style>

里面的年（YearYear1）和季度（QuarterTime）组件是前面分享的文章：
标题：年至年的选择仿elementui的样式、仿真elementUI的时间选择的季度选择
引入即可

使用：

<SelectTimePicker :isShow="false" @updatetimes="updatetimes"></SelectTimePicker>import SelectTimePicker from "@/components/SelectTimePicker/index.vue";
components: { SelectTimePicker },updatetimes(val) {console.log("点击：", val);
},