javascript - 如何填充第一个日期和最后一个日期之间的日期？

Question

现在怎么办: jsffidle

Vue代码

new Vue({
el: '#calendar',
data() {
return {
  date: new Date(),
  daysOfWeek: ['pn', 'vt', 'sr', 'cht', 'pt', 'sb', 'vs']
 }
},
computed: {
days() {
  const date = this.date;

  let days = []
  let amountDays = this.daysInMonth(this.date.getFullYear(), this.date.getMonth() + 1) // TODO fix 
  for (let i = 1; i <= amountDays; i++) {
    days.push(i)
  }
  return days;
 }
},
methods: {
daysInMonth(year, month) {
  return new Date(year, month, 0).getDate()
  }
 }
})

我想要什么:

在该月的第一个和最后一个日期之后，我需要填充单元格，这样这些日子就不会从星期一开始。

此外，我想用每个月最后一天之后的天数填充单元格。

Answer 1

您需要先计算出当月的第一天是星期几。

然后计算出日历面板的第一天。

查看下面的演示:

Vue.config.productionTip = false
new Vue({
  el: '#calendar',
  data() {
    return {
      date: new Date(),
      daysOfWeek: ['pn', 'vt', 'sr', 'cht', 'pt', 'sb', 'vs']
    }
  },
  computed: {
    days() {
      const date = this.date;
      let days = []
      let amountDays = this.daysInMonth(this.date.getFullYear(), this.date.getMonth() + 1) // TODO fix 
      
      // get the first day of current month
      let firstDay = new Date(this.date.getFullYear(), this.date.getMonth(), 1)
      // get the day of week (default Montday is 1)
      let dayOfWeek = firstDay.getDay()
      let addDays = function (current, days) {
      	let temp = new Date(current)
        temp.setDate(current.getDate()+days)
        return temp
      }
      // get first day of the calendar panel
      let targetDate = addDays(firstDay, -dayOfWeek)
      // loop 7*5 at here, you can optimize it based on your real demand.
      for(let i = 0; i < 7*5; i++) {
        let calendarDay = addDays(targetDate, i)
      	days.push([calendarDay, calendarDay.getDate()])
      }
      return days;
    }
  },
  methods: {
    daysInMonth(year, month) {
      return new Date(year, month, 0).getDate()
    }
  }
})

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.calendar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.calendar__wrapper {
  width: 450px;
  height: 400px;
  padding: 20px;
  background: gray;
}

.calendar__days {
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
  flex-wrap: wrap;
 
}

.calendar__footer {
  display: flex;
  justify-content: center;
}



.calendar__header {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgba(255, 255, 255, 0.6);
}

.calendar__day {
  width: 14.2857%;
  height: 30px;
  color: black;
  font-size: 18px;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="calendar">
  <div class="calendar">
    <div class="calendar__wrapper">
      <div class="calendar__header">
        <span v-for="day in daysOfWeek" class="calendar__day">{{ day }}</span>
      </div>
      <div class="calendar__days">
      <p class="calendar__day" v-for="day in days" :title="day[0]">{{ day[1] }}</p>
      </div>
      <footer>
        <div class="calendar__footer">
        <a href="https://stackoverflow.com" target="_blank">Special for answer on StackOverflow</a>
        </div>
      </footer>
    </div>
  </div>
</div>