獲取當前月日曆

<template>

<div>
  <div style="width:100%;background:rgb(255,255,255);">

    <table cellpadding="0" cellspacing="0" id="1">
      <tr>
          <td>
              <div id="cal">
                <div id="top">{{date}}</div>

                <
 
ul id="wk">
                    <li><b>日</b></li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <
 
li><b>六</b></li>
                </ul>

                <ul id="wk" v-for="item in arr" :key="item.id">
                    <li ><span :class="item[0].day == date.substring(8) ? 'choose' :''">{{item[0].day}}</span>&nbsp;</li>
                    <
 
li><span :class="item[1].day == date.substring(8) ? 'choose' :''">{{item[1].day}}</span>&nbsp;</li>
                    <li><span :class="item[2].day == date.substring(8) ? 'choose' :''">{{item[2].day}}</span>&nbsp;</li>
                    <li><span :class="item[3].day == date.substring(8) ? 'choose' :''">{{item[3].day}}</span>&nbsp;</li>
                    <li><span :class="item[4].day == date.substring(8) ? 'choose' :''">{{item[4].day}}</span>&nbsp;</li>
                    <li><span :class="item[5].day == date.substring(8) ? 'choose' :''">{{item[5].day}}</span>&nbsp;</li>
                    <li><span :class="item[6].day == date.substring(8) ? 'choose' :''">{{item[6].day}}</span>&nbsp;</li>
                </ul>
                <div id="bm"></div>

              </div>
          </td>
      </tr>
    </table>
  </div>

</div>


</template>

<script>

  import moment from 'moment'
  export default {
    data() {
        return{
           currentMonthDays:'',
           currentWeekday:'',
           lastMonthDays:'',
           date:'2019-06-06',
           arr:[],
        }
    },
    methods: {
      getData(){
      this.currentWeekday = moment(this.date).date(1).weekday(); // 獲取當月1日為星期幾
      console.log(this.currentWeekday);
      this.lastMonthDays = moment(this.date).subtract(1, 'month').daysInMonth(); // 獲取上月天數
      console.log(this.lastMonthDays);
      this.currentMonthDays = moment(this.date).daysInMonth(); // 獲取當月天數
      console.log(this.currentMonthDays);
      //總天數是31，1號是週五或者週六6個[]
        //總天數是30，1號是週六6個[]
      if((this.currentMonthDays == '31' && this.currentWeekday == '5' || this.currentWeekday == '6' ) || (this.currentMonthDays == '30' && this.currentWeekday == '6')){
          var daysArr = [[], [], [], [], [], []];
        }else{
          var daysArr = [[], [], [], [], []];
        }
      // const getDay = day => (day <= this.lastMonthDays ? day : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : day - (this.lastMonthDays + this.currentMonthDays)); // 日期處理       
      const getDay = day => (day <= this.lastMonthDays ? '' : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : ''); // 日期處理
      
      for (let i = 0; i < 7; i += 1) {
        let virtualDay = (this.lastMonthDays - this.currentWeekday) + i + 1;
        for (let j = 0; j < daysArr.length; j += 1) {
          daysArr[j][i] = {'day':getDay(virtualDay + (j * 7))};
        }
      }
    console.table(daysArr);
    this.arr = daysArr

      }
    },
    mounted () {
      this.getData()
    }

}

</script>

<style>
*{margin:0;padding:0;  list-style:none }
.choose{
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  background: #429e6c;
  color: #fff;
  border-radius: 50%;
}

#cal {
    width: 99%;
    font-size: 12px;
    margin: 8px 0 0 15px;position: relative;
}

#cal #top {
    height: 40px;
    line-height: 40px;
    background: #429e6c;
    border: 1px solid #429e6c;
    color: #fff;
    padding: 0 10px;
    clear: both;
}
#cal ul#wk {
    margin: 0;
    padding: 0;
    height:50px;
    color: #888;
    font-size: 14px;
    border-left: 1px solid #429e6c;
    border-right: 1px solid #429e6c;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#cal ul#wk li {
  width: 48px;
}
#cal ul#wk li span {
  color: black;
  font-weight: bold;
}
#cal ul#wk li b {
    font-weight: normal;
    color: #429e6c;
}
#cal #bm {
    text-align: right;
    height: 30px;
    line-height: 30px;
    padding: 0 13px 0 0;
    border-bottom:1px solid #429e6c;
    border-left:1px solid #429e6c;border-right:1px solid #429e6c;
    clear: both;
    padding: 0 10px;
    font-size: 14px;
}
</style>

 這個是隻取當前月份：const getDay = day => (day <= this.lastMonthDays ? '' : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : ''); // 日期處理

效果如圖

也可以取上個月和下個月的值：

const getDay = day => (day <= this.lastMonthDays ? day : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : day - (this.lastMonthDays + this.currentMonthDays)); // 日期處理
如圖
注：但是呢這個還沒有完善好，當前天的選中會和上個月和下個月的日期重合，比如當前日期是6月29，就會選中兩個呢，需要的小夥伴可以自己完善一下