标签:flex vue name color 日历 month let year js
直接上代码
<template>
<div class="calender">
<div class="top">
<div class="preDate">
<button class="preYear" @click="getMyDate(year-parseInt(1,10),month)"><<</button>
<button class="preMonth" @click="getMyDate(year,month-parseInt(1,10))"><</button>
</div>
<div>{{year}}年{{month}}月</div>
<div class="nextDate">
<button class="nextMonth" @click="getMyDate(year,month+parseInt(1,10))">></button>
<button class="nextYear" @click="getMyDate(year+parseInt(1,10),month)">>></button>
</div>
</div>
<div class="bottom">
<table>
<thead>
<tr>
<th v-for="item in weeks">
{{item.name}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in all">
<th v-for="item2 in item" v-if="item2===day" class="active">{{item2}}</th>
<th v-else-if="item2>0">{{item2}}</th>
<th v-else></th>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name: "calender",
data(){
return {
year:2019, // 设置当前年份
month:8, // 设置当前月份
day:1, // 设置当前号数
all:[], // 日历表格数组
weeks:[
{id:0,name:"日"},
{id:1,name:"一"},
{id:2,name:"二"},
{id:3,name:"三"},
{id:4,name:"四"},
{id:5,name:"五"},
{id:6,name:"六"},
]
}
},
beforeMount() {
this.getMyDate();
},
methods:{
getMyDate(year=false,month=false){
let obj; // 初始化的时间对象
let first=[]; // 第1排的数据
let second=[]; // 第2-6排的数据
let firstDay; // 判断当月第一天是周几,作为日期对象的开头
if(year&&month){
// 处理月份越界问题
if(month<1){
this.year-=1;
this.month=12;
}
else if(month>12){
this.year+=1;
this.month=1;
}
else {
this.month=month;
this.year=year;
}
obj=new Date(this.year,month,this.day);
this.all=[]; // 每次请求时把日期数组清空
}
else {
obj=new Date();
this.year=obj.getFullYear(); // 查询年份
this.month=obj.getMonth()+1; // 查询月份
this.day=obj.getDate(); // 查询多少号
}
let s=this.year+'/'+this.month+'/'+1;
firstDay=new Date(s).getDay(); // 查询当月的第一天是周几
let days=new Date(this.year, this.month, 0).getDate(); // 判断当前月份有多少天
// 生成日历表格
// 生成第一排的数据
let index;
let data1=[7,1,2,3,4,5,6];
data1.forEach((i,item)=>{
if(item===firstDay){
index=i;
}
});
for(let i=0;i<7;i++){
if(i<index){
first.push(0)
}
else {
first.push(i-index+1)
}
}
// 生成第2-6排数据
let index2=first[first.length-1];
for(let i=0;i<5;i++){
let d=[];
for(let j=1;j<8;j++){
if(i*7+index2+j>days){
d.push(0)
}
else{
d.push(i*7+index2+j)
}
}
second.push(d)
}
// 将第1排和第2-6排数据合到一起
this.all.push(first);
second.forEach(x=>this.all.push(x));
}
}
}
</script>
<style scoped>
.calender{
width: 283px;
height: auto;
box-shadow: 0 0 1px #9E9C9C;
display: flex;
flex-flow: column;
margin-left: 10px;
}
.top{
flex: 1;
border-bottom: solid 1px #E0DEDE;
text-align: center;
line-height: 40px;
color: #696868;
display: flex;
}
.bottom{
flex: 7;
}
table{
width: 100%;
height: 100%;
}
th{
color: #6B6A6A;
font-weight: normal;
transition: all 0.5s;
border-radius: 50%;
height: 36px;
}
tbody>tr>th:hover{
background-color: #E5E6E6;
}
.active,.active:hover{
background-color: #FB4023;
color: white;
}
.top>div:nth-child(2){
width: 100px;
height: 100%;
margin: 0 auto;
}
.preDate,.nextDate{
flex: 1;
display: flex;
}
.preYear,.nextYear{
flex: 2;
}
.preMonth,.nextMonth{
flex: 1;
}
.preDate>button,.nextDate>button{
border: none;
background-color: white;
font-size: 17px;
color: #999999;
transition: color 0.8s;
font-weight: 100;
outline: none;
}
.preMonth{
text-align: left;
}
.nextMonth{
text-align: right;
}
.preMonth:hover,.nextMonth:hover,.preYear:hover,.nextYear:hover{
color: red;
cursor: pointer;
}
</style>
效果如下:
标签:flex,vue,name,color,日历,month,let,year,js 来源: https://blog.csdn.net/qq_42402381/article/details/100017019
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。