<template>
<div class="bg">
<div class="dateTitle">
<div>
<div @click="proYear"><</div>
<div class="ym">{{year}}</div>
<div @click="nextYear">></div>
</div>
<div>
<div @click="pro"><</div>
<div class="ym">{{month > 9 ? month : '0' + month}}</div>
<div @click="next">></div>
</div>
</div>
<div class="title">
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>日</div>
</div>
<div class="box">
<div @click="dateClick(item.main,i)" v-for="(item,i) in list" :class="{main:item.flag,today:item.today,}">{{item.main}}</div>
</div>
{{this.select}}
<myDate :obj="calenderObj" v-on:calendarDate="next"></myDate>
</div>
</template>
<script>
// @ is an alias to /src
import common from '../assets/js/common.js'
// import myDate from '../components/myDate.vue'
export default {
name: 'home',
components: {
// myDate
},
data() {
return {
date:'',
t:'',
list:[],
years:[],
year:0,
month:0,
day:0,
select:0,
calenderObj:{
calendarType:false,
},
calendarDate:new Date(),
}
},
created() {
},
mounted() {
this.date = new Date();
this.year = this.date.getFullYear();
this.month = this.date.getMonth()+1;
this.day = this.date.getDate();
this.nowDay = common.formatDate(new Date(),'yyyy/MM/dd')
this.showDay = this.nowDay
this.get()
},
methods: {
dateClick(d,i) {
if (!this.list[i].flag) {
return
}
this.list.forEach(item => {
item.today = false;
})
this.list[i].today = true;
d = d < 9 ? `0${d}` : d;
let month = this.month < 9 ? `0${this.month}` : this.month;
this.select = `${this.year}-${month}-${d}`;
},
proYear() {
this.year--;
this.get();
},
nextYear() {
this.year++;
this.get();
},
pro() {
this.month--;
if(this.month == 0) {
this.year= this.year - 1;
this.month = 12;
}
this.get();
},
next() {
this.month++;
if(this.month > 12) {
this.year= parseInt(this.year+this.month/12)
this.month = this.month%12
}
this.get();
},
get() {
this.list=[]
// 本月第一天是星期几
let firstDayWeekday = new Date(`${this.year}/${this.month}/1`).getDay();
firstDayWeekday = firstDayWeekday == 0 ? 7 : firstDayWeekday;
let proMonthDays =0;
if(this.month != 1){
proMonthDays = new Date(this.year,this.month-1,0).getDate();
}else {
proMonthDays = new Date(this.year-1,12,0).getDate();
}
for(var i = 0;i<firstDayWeekday-1;i++){
this.list.push({main:proMonthDays-i,flag:false,})
}
this.list.reverse()
// 本月天数进数组
let nowMonthDays = new Date(this.year,this.month,0).getDate();
for(var i = 1;i<=nowMonthDays;i++){
this.list.push({main:i,flag:true,today:new Date(this.nowDay).getTime() == new Date(`${this.year}/${this.month}/${i}`).getTime()})
}
// 本月最后一天是星期几
var lastDayWeekday = new Date(`${this.year}/${this.month}/${nowMonthDays}`).getDay();
lastDayWeekday = lastDayWeekday == 0 ? 7 : lastDayWeekday;
for(var i = 1;i<=7-lastDayWeekday;i++){
this.list.push({main:i,flag:false})
}
}
}
}
</script>
<style lang="scss" scoped>
.dateTitle {
font-size: 24px;
display: flex;
justify-content: space-around;
&>div {
display: flex;
justify-content: space-around;
.ym {
padding: 0 10px;
}
}
}
.main {
color:black !important;
}
.today {
border-radius: 50%;
background:red !important;
}
.title {
display: flex;
justify-content: space-around;
flex-wrap:wrap;
border-bottom: 1px solid #eee;
div {
width: 14%;
font-size: 25px;
text-align: center;
}
}
.box {
margin-top: 20px;
display: flex;
justify-content: space-between;
flex-wrap:wrap;
div {
width: 14%;
text-align: center;
font-size: 25px;
color:#666;
}
}
</style>
这个是common.formatDate()
function formatDate(date, format) {
var v = "";
if (typeof date == "string" || typeof date != "object") {
return;
}
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var weekDay = date.getDay();
var ms = date.getMilliseconds();
var weekDayString = "";
if (weekDay == 1) {
weekDayString = "星期一";
} else if (weekDay == 2) {
weekDayString = "星期二";
} else if (weekDay == 3) {
weekDayString = "星期三";
} else if (weekDay == 4) {
weekDayString = "星期四";
} else if (weekDay == 5) {
weekDayString = "星期五";
} else if (weekDay == 6) {
weekDayString = "星期六";
} else if (weekDay == 7) {
weekDayString = "星期日";
}
v = format;
//Year
v = v.replace(/yyyy/g, year);
v = v.replace(/YYYY/g, year);
v = v.replace(/yy/g, (year+"").substring(2,4));
v = v.replace(/YY/g, (year+"").substring(2,4));
//Month
var monthStr = ("0"+month);
v = v.replace(/MM/g, monthStr.substring(monthStr.length-2));
//Day
var dayStr = ("0"+day);
v = v.replace(/dd/g, dayStr.substring(dayStr.length-2));
//hour
var hourStr = ("0"+hour);
v = v.replace(/HH/g, hourStr.substring(hourStr.length-2));
v = v.replace(/hh/g, hourStr.substring(hourStr.length-2));
//minute
var minuteStr = ("0"+minute);
v = v.replace(/mm/g, minuteStr.substring(minuteStr.length-2));
//Millisecond
v = v.replace(/sss/g, ms);
v = v.replace(/SSS/g, ms);
//second
var secondStr = ("0"+second);
v = v.replace(/ss/g, secondStr.substring(secondStr.length-2));
v = v.replace(/SS/g, secondStr.substring(secondStr.length-2));
//weekDay
v = v.replace(/E/g, weekDayString);
return v;
}
网友评论