element时间选择器可以左右切换以及点击日期出弹框

 可以左右切换，以及中间筛选时间，默认是显示当前月

效果如下：

 <div class="top_date">
        <img src="../../assets/img/rightArrow.png" class="img_left" @click="reduce_picker">
        <div class="top_date_font">
          <el-date-picker v-model="sel_year" value-format="yyyy-MM" format="yyyy 年 MM 月" :picker-options="{
						disabledDate(time) { // 设置当月之后日期不可选
							return time.getTime() > Date.now();
						}
				}" type="month" @change="date_picker" :clearable="false" align="center" class="dadaPicker">
          </el-date-picker>
        </div>
        <img src="../../assets/img/rightArrow.png" class="img_right" @click="add_picker">
      </div>

 

  data() {
    return {
      sel_year: '', //选中的年月
     }
  methods: {
  date_picker() {
      console.log(this.sel_year, 'sel_year');
    },
    checkMonth(i) {
      if (i < 10) {
        i = '0' + i;
      }
      return i;
    },
    // 日期加1月
    add_picker() {
      var currentDate = new Date(this.sel_year);
      let nextDate = currentDate.setMonth(currentDate.getMonth() + 1); // 输出日期格式为毫秒形式1556668800000
      nextDate = new Date(nextDate);
      let nextYear = nextDate.getFullYear();
      let nextMonth = this.checkMonth(nextDate.getMonth() + 1); // 因日期中的月份表示为0-11，所以要显示正确的月份，需要 + 1
      nextDate = nextYear + '-' + nextMonth; // "2019-05"
      this.sel_year = nextDate;
      console.log(this.sel_year, 'this.sel_year');
    },
 // 日期减1月
    reduce_picker() {
      // 减
      var currentDate = new Date(this.sel_year);
      let lastDate = currentDate.setMonth(currentDate.getMonth() - 1); // 输出日期格式为毫秒形式1551398400000
      lastDate = new Date(lastDate);
      let lastYear = lastDate.getFullYear();
      let lastMonth = this.checkMonth(lastDate.getMonth() + 1); // 因日期中的月份表示为0-11，所以要显示正确的月份，需要 + 1
      lastDate = lastYear + '-' + lastMonth; // "2022-08"
      this.sel_year = lastDate;
      console.log(this.sel_year, 'this.sel_year');
    },
  }

<style lang="scss" scoped>

.top_date {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.top_date_font {
  font-size: 32px;
  margin: 0 10px;
}
.img_left {
  height: 18px;
  width: 18px;
  transform: rotate(180deg);
}
.img_right {
  height: 18px;
  width: 18px;
}
.mar_t30 {
  margin-top: 30px;
}
//修改原生样式
/deep/.dadaPicker .el-input__prefix {
  display: none;
}
/deep/.el-date-editor.el-input {
  width: 205px;
}
/deep/.dadaPicker .el-input__inner {
  color: black;
  font-size: 32px;
  border: none;
  // width: 80px;
  padding: 0px;
}
</style>

tips:

disabledDate设置了当月日期之后不可选，去掉默认都能选 

value-format="yyyy"设置只有年

value-format="yyyy-MM"设置只有年月

value-format="yyyy-MM-dd"设置年月日

format="yyyy 年 MM 月"  选中后显示带文字年月日期，结果如： 2022年8月, 也可format="yyyy - MM " 

结果如： 2022-8，

format="yyyy 年 MM 月dd日"  选中后显示带文字年月日期，如2022年8月9日，也可format="yyyy - MM-dd "   结果如： 2022-8-9