日历组件 日期筛选

效果图：

组件部分

<template>
  <div class="div_dateBlueSky">
    <div class="arrow_dateBlueSky" @click="left"></div>
    <div class="font_dateBlueSky">{{this.date.format('YYYY年M月')}}</div>
    <div class="arrow_dateBlueSky1" @click="right"></div>
  </div>
</template>

<script>
  import dayjs from 'dayjs'
  export default {
    name: "dateBlueSky",
    data(){
      return{
        date:'',
        i:0
      }
    },
    methods: {
      left() {
        // console.log("左");
        this.i=this.i-1;
        this.date=dayjs().add(this.i, 'months');
        this.$emit('saveDate',this.date);
      },
      right() {
        this.i=this.i+1;
        // console.log("右");
        this.date=dayjs().add(this.i, 'months');
        this.$emit('saveDate',this.date);
      }
    },
    created(){
      // console.log(dayjs().format('YYYY年MM月'));
      this.date=dayjs();
    }
  }
</script>

<style scoped>
  .div_dateBlueSky {
    display: flex;
    flex-direction: row;
    width: 136px;
    justify-content: center;
    align-content: center;
  }

  .font_dateBlueSky {
    width: 105px;
    margin-left: 8px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: #FFFFFF;
    padding: 0px 0px 0px 0px;
    text-align: center;
  }

  .arrow_dateBlueSky {
    margin-top: 1px;
    width: 14px;
    height: 16px;
    background-image: url("../img/leftDark.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 1px 2px 1px 2px;
    cursor: pointer;
  }

  .arrow_dateBlueSky1 {
    margin-top: 1px;
    margin-left: 8px;
    width: 14px;
    height: 16px;
    background-image: url("../img/rightDark.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 1px 2px 1px 2px;
    cursor: pointer;
  }
</style>

需要安装 dayjs 插件

引用方法：

Dayjs使用教程_npm install dayjs_小胖梅前端的博客-CSDN博客