java月历组件-凯发k8官方网
---恢复内容开始---
1.日历组件
1.分析功能：日历基本功能，点击事件改变日期，样式的改变
1.结构分析：html
1.分为上下两个部分
2.上面分为左按钮，中间内容展示，右按钮
下面分为周几展示和日期展示
3.基本结构页面html书写
2019年8月9日v-for="item in ['日','一','二','三','四','五','六']"
:key= item
>{{ item }}
class="every-day"
v-for="item in 42"
:key="item"
>{{ item }}
*{
margin: 0px;
border: 0px;
list-style: none;
}
.calender2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height:380px;
width:420px;
border: 1px solid #ccc;
}
.date-header{
margin-left: 10px;
height: 40px;
width: 350px;
line-height: 40px;
text-align: center;
}
.pre-month{
position: absolute;
display: inline-block;
height: 0px;
width:0px;
border:20px solid ;
border-color: transparent rgb(35, 137, 206) transparent transparent;
}
.next-month{
position: absolute;
display: inline-block;
height: 0px;
width:0px;
border:20px solid ;
border-color: transparent transparent transparent rgb(35, 137, 206);
}
.show-date{
margin-left: 40px;
margin-top: 0px;
display: inline-block;
line-height: 40px;
text-align: center;
width: 310px;
color: rgb(35, 137, 206);
}
.week-header{
background: rgb(35, 137, 206);
color: #fff;
font-size: 14px;
text-align: center;
line-height: 20px;
}
.week-header div{
margin: 0;
padding: 0;
display: inline-block;
height: 20px;
width: 60px;
}
.every-day{
display: inline-block;
height: 50px;
width: 60px;
text-align: center;
line-height: 50px;
}
.other-day{
color: #ccc;
}
.now-day{
background: rgb(35, 137, 206);
}
.active-day{
/* padding: 2px */
/* border-sizing:content-box; */
border: 2px solid rgb(35, 137, 206);
}
4.一些事件以及逻辑
1.使得当前的日期为今天的日期
{{ year }}年{{ month }}月{{ day }}日data(){
return{
year:null,
month:null,
day:null
}
},
created(){
this.getinitdate();
},
methods:{
getinitdate(){
const date = new date();
this.year = date.getfullyear();
this.month = date.getutcmonth() 1;
this.day = date.getdate();
}
}
2.设置该月日期起始值(找到一号是在哪里)
beginday(){
return new date(this.year, this.mounth - 1, 1).getday();
}
3.当月天数字体正常显示
v-if="item - beginday >= 0 && item - beginday <= curdays"
>{{ item - beginday }}
4.当月天数之前的部分变灰，外加正常显示日期
注意几个数学问题：
1.当前月天数日期
2.上月剩余天数
3.此月显示的下月天数
v-if="item - beginday > 0 && item - beginday <= curdays"
>{{ item - beginday }}
class="other-day"
v-else-if="item - beginday <= 0"
>{{ item - beginday prevdays }}
class="other-day"
v-else>{{ item - beginday -curdays }}
5.能知道当前日期，能点击其他日期，并且会有相应的变化
知道当前日期：
this.curdate = `${this.year}-${this.month}-${this.day}`
判断今天是不是当前日期，并且给一个样式：
'now-day':`${year}-${month}-${item - begindays}` == curdate
当点击当月有的日期的时候会根据你的点击显示的日期发生变化
判断是点击的那一天：
'active-day':`${year}-${month}-${item - beginday}` === `${year}-${month}-${day}`
点击这一天，绑定点击事件
@click="handleclickday(item - beginday)"
handleclickday(day){
this.day = day
}
6.前后两个按钮的功能
handleprev(){
if(this.month == 1){
this.month = 12
this.year--
}else{
this.month--
}
},
handlenext(){
if(this.month == 12){
this.month = 1
this.year
}else{
this.month
}
}
7.判断点击的是否为当月的最后一天
computedday(){
const allday = new date(this.year, this.month, 0).getdate();
if(this.day > allday){
this.day = allday;
}
}
将这个函数分别在handleprev(),handlenext()里面执行-------注意是this.computedday();
完成
---恢复内容结束---
1.日历组件
1.分析功能：日历基本功能，点击事件改变日期，样式的改变
1.结构分析：html
1.分为上下两个部分
2.上面分为左按钮，中间内容展示，右按钮
下面分为周几展示和日期展示
3.基本结构页面html书写
2019年8月9日v-for="item in ['日','一','二','三','四','五','六']"
:key= item
>{{ item }}
class="every-day"
v-for="item in 42"
:key="item"
>{{ item }}
*{
margin: 0px;
border: 0px;
list-style: none;
}
.calender2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height:380px;
width:420px;
border: 1px solid #ccc;
}
.date-header{
margin-left: 10px;
height: 40px;
width: 350px;
line-height: 40px;
text-align: center;
}
.pre-month{
position: absolute;
display: inline-block;
height: 0px;
width:0px;
border:20px solid ;
border-color: transparent rgb(35, 137, 206) transparent transparent;
}
.next-month{
position: absolute;
display: inline-block;
height: 0px;
width:0px;
border:20px solid ;
border-color: transparent transparent transparent rgb(35, 137, 206);
}
.show-date{
margin-left: 40px;
margin-top: 0px;
display: inline-block;
line-height: 40px;
text-align: center;
width: 310px;
color: rgb(35, 137, 206);
}
.week-header{
background: rgb(35, 137, 206);
color: #fff;
font-size: 14px;
text-align: center;
line-height: 20px;
}
.week-header div{
margin: 0;
padding: 0;
display: inline-block;
height: 20px;
width: 60px;
}
.every-day{
display: inline-block;
height: 50px;
width: 60px;
text-align: center;
line-height: 50px;
}
.other-day{
color: #ccc;
}
.now-day{
background: rgb(35, 137, 206);
}
.active-day{
/* padding: 2px */
/* border-sizing:content-box; */
border: 2px solid rgb(35, 137, 206);
}
4.一些事件以及逻辑
1.使得当前的日期为今天的日期
{{ year }}年{{ month }}月{{ day }}日data(){
return{
year:null,
month:null,
day:null
}
},
created(){
this.getinitdate();
},
methods:{
getinitdate(){
const date = new date();
this.year = date.getfullyear();
this.month = date.getutcmonth() 1;
this.day = date.getdate();
}
}
2.设置该月日期起始值(找到一号是在哪里)
beginday(){
return new date(this.year, this.mounth - 1, 1).getday();
}
3.当月天数字体正常显示
v-if="item - beginday >= 0 && item - beginday <= curdays"
>{{ item - beginday }}
4.当月天数之前的部分变灰，外加正常显示日期
注意几个数学问题：
1.当前月天数日期
2.上月剩余天数
3.此月显示的下月天数
v-if="item - beginday > 0 && item - beginday <= curdays"
>{{ item - beginday }}
class="other-day"
v-else-if="item - beginday <= 0"
>{{ item - beginday prevdays }}
class="other-day"
v-else>{{ item - beginday -curdays }}
5.能知道当前日期，能点击其他日期，并且会有相应的变化
知道当前日期：
this.curdate = `${this.year}-${this.month}-${this.day}`
判断今天是不是当前日期，并且给一个样式：
'now-day':`${year}-${month}-${item - begindays}` == curdate
当点击当月有的日期的时候会根据你的点击显示的日期发生变化
判断是点击的那一天：
'active-day':`${year}-${month}-${item - beginday}` === `${year}-${month}-${day}`
点击这一天，绑定点击事件
@click="handleclickday(item - beginday)"
handleclickday(day){
this.day = day
}
6.前后两个按钮的功能
handleprev(){
if(this.month == 1){
this.month = 12
this.year--
}else{
this.month--
}
},
handlenext(){
if(this.month == 12){
this.month = 1
this.year
}else{
this.month
}
}
7.判断点击的是否为当月的最后一天
computedday(){
const allday = new date(this.year, this.month, 0).getdate();
if(this.day > allday){
this.day = allday;
}
}
将这个函数分别在handleprev(),handlenext()里面执行-------注意是this.computedday();
完成
总结
以上是凯发k8官方网为你收集整理的java月历组件_vue之手把手教你写日历组件的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：