javascript - 如何填充第一个日期和最后一个日期之间的日期?
问题描述
现在做什么: 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()
}
}
})
我想要的是:
在一个月的第一个和最后一个日期之后,我需要填充单元格,这样日子就不会从星期一开始。
另外,我想用每个月最后一天之后的天数填充单元格。
解决方案
您需要先计算出当月第一天的星期几。
然后计算出日历面板的第一天。
检查下面的演示:
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>
推荐阅读
- android - 是否可以使用 G.Drive 作为存储后端的应用程序?
- ruby-on-rails - 使用上传 quickbook api 上传图片附件
- reactjs - 如何在带有browserHistory的反应路由器v4中使用#重定向路径?(不使用hashhistory)
- c# - 可选参数必须是引用类型 MVC4 C#
- batch-file - 在 for 循环中使用文件名变量
- download - 单击可下载文件后,Web 表单将被忽略
- javascript - Date() 对象中的 UTC 日期在 Safari 中的输出不同
- arduino - Arduino Nano 和模拟操纵杆
- mirth - HTTP Sender 和 REST 约定
- android - ListView 只呈现一项,除非指定高度