一、效果图,这是当前年的,具体根据需求来改
二、html以及css代码
<div class="box">
<div><button type="button" @click="getReduce">-</button></div>
<div class="time"><span>{{upYear}}.{{upMonth}}</span></div>
<div><button type="button" @click="getplus">+</button></div>
</div>
<div class="box">
<div><button type="button" @click="getReduce1">-</button></div>
<div class="time"><span>{{weekStart}} - {{weekEnd}}</span></div>
<div><button type="button" @click="getplus1">+</button></div>
</div>
.box{
border: 1px solid #000000;
width: 40%;
height: 200px;
margin: 100px auto;
display: flex;
align-items: center;
justify-content: center;
}
.time{
margin: 0 20px;
}
三、js代码
data() {
return {
upYear:'',//当前年(可变)
upMonth:'',//当前月(可变)
year:'',//当前年(不可变)
month:'',//当前月(不可变)
nowYear: '', //当前年(可变)
weekStart: '', //当前日期一周开始(可变)
weekEnd: '', //当前日期一周结束(可变)
newDay: '', //当前日期一周结束(不可变)
newYear: '', //当前年(不可变)
}
},
mounted() {
this.formatNewDate()
},
methods: {
getReduce() { //月减
this.upMonth--;
if (this.upMonth < 1) {
this.upYear--;
this.upMonth = 12;
}
},
getplus() { //月加
this.upMonth++;
if (this.upMonth > 12) {
this.upYear++;
this.upMonth = 1;
}
if (this.upYear == this.year && this.upMonth > this.month) {
alert("不能查看未来")
this.upYear = this.year;
this.upMonth = this.month;
return
}
},
getReduce1() { //周减
let nowYear = this.nowYear,
weekStart = this.weekStart,
weekEnd = this.weekEnd;
let val = nowYear + '/' + weekStart.replace(/\./, '/');
val = this.formatDate(new Date(((new Date(val)).getTime()) - (86400000 * 7)), 'yyyy-MM-dd');
let getNew = this.getWeekStartAndEnd(val)
this.weekStart = getNew.weekStart;
this.weekEnd = getNew.weekEnd;
this.nowYear = getNew.nowYear;
this.getQuery1()
},
getplus1() { //周加
let nowYear = this.nowYear,
weekStart = this.weekStart,
weekEnd = this.weekEnd,
newDay = this.newDay,
newYear = this.newYear;
let val = nowYear + '/' + this.weekStart.replace(/\./, '/');
val = this.formatDate(new Date(((new Date(val)).getTime()) + (86400000 * 7)), 'yyyy-MM-dd');
let theDate = nowYear + weekEnd;
let theDate1 = newYear + newDay;
if (theDate == theDate1) {
alert("不能查看未来")
return
}
let getNew = this.getWeekStartAndEnd(val)
this.weekStart = getNew.weekStart;
this.weekEnd = getNew.weekEnd;
this.nowYear = getNew.nowYear;
this.getQuery1(val)
},
getQuery1() {
let stime, etime, that = this;
stime = that.nowYear + '/' + that.weekStart.replace(/\./, '/');
etime = that.nowYear + '/' + that.weekEnd.replace(/\./, '/');
},
formatNewDate() {
let date = new Date();
let year = date.getFullYear(); // 年
let month = date.getMonth() + 1; // 月
let months = date.getMonth(); // 月
let day = date.getDate(); // 日
day = day < 10 ? "0" + day : day; // 如果只有一位,则前面补零
this.year = year;
this.upYear = year;
this.month = month;
this.upMonth = month;
this.day = day;
let nowData = year + '-' + month + '-' + day
let getNew = this.getWeekStartAndEnd(nowData)
this.weekStart = getNew.weekStart;
this.weekEnd = getNew.weekEnd;
this.nowYear = getNew.nowYear;
this.newDay = getNew.weekEnd;
this.newYear = getNew.nowYear;
},
// 获取指定日期的那一周的开始、结束日期
getWeekStartAndEnd(val) {
let now = '';
if (val) {
val = val.replace(/-/g, '/')
now = new Date(val); // 日期
} else {
now = new Date(); // 日期
}
let nowDayOfWeek = now.getDay(); // 本周的第几天
let nowDay = now.getDate(); // 当前日
let nowMonth = now.getMonth(); // 当前月
let nowYear = now.getYear(); // 当前年
let weekStart = this.getWeekStartDate(nowYear, nowMonth, nowDay, nowDayOfWeek)
let weekEnd = this.getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek)
let newList = {
weekStart: weekStart,
weekEnd: weekEnd,
nowYear: nowYear + 1900
}
return newList
},
// 获得某一周的开始日期
getWeekStartDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
let weekStartDate = new Date(nowYear, nowMonth, nowDay - (nowDayOfWeek - 1))
return this.formatNewDates(weekStartDate)
},
// 获得某一周的结束日期
getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
let weekEndDate = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek))
return this.formatNewDates(weekEndDate)
},
// 日期格式化
formatNewDates(date) {
var myyear = date.getFullYear();
var mymonth = date.getMonth() + 1;
var myweekday = date.getDate();
if (mymonth < 10) {
mymonth = "0" + mymonth;
}
if (myweekday < 10) {
myweekday = "0" + myweekday;
}
return mymonth + "." + myweekday
},
formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
}
}
return fmt;
},
padLeftZero(str) {
return ('00' + str).substr(str.length);
},
},
四、以上就是全部内容,欢迎给出不同见解,有更好的插件也可以推荐一下,有不足的也希望可以指出