vue日曆，可展示當天到後面一年的日期
效果
html 程式碼
<div id="calendar" class="lt">
<ul class="weekdays">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li style="color:red">六</li>
<li style="color:red">日</li>
</ul>
<div class="arrDays">
<div v-for="dayList in arrDays" class="calendarData">
<div style="" class="years">
{{dayList.year}}年{{dayList.moth}} 月
<span style="display: none;">
<span class="timeHide" v-if="dayList.moth>9">
{{dayList.year}}-{{dayList.moth}}
</span>
<span v-else class="timeHide">{{dayList.year}}-0{{dayList.moth}}</span>
</span>
</div>
<ul class="days">
<li v-for="(day,index) in dayList.days"><
<!--今天-->
<span v-if="day!=''">
<span v-if="day.getFullYear() == new Date().getFullYear()
&& day.getMonth() == new Date().getMonth()
&& day.getDate() == new Date().getDate()" class="curDay active">{{day.getDate()}}</span>
<span v-else class="curDay">{{ day.getDate() }}</span>
</span>
</li>
</ul>
</div>
</div>
</div>
css 程式碼
#calendar{
border: 1px solid #dfe6ec;
width: 440px;
}
.month {
width: 420px;
background: #eef1f6;
}
.month ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
color: #374453;
}
.year-month {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
/*.year-month:hover {
background: rgba(150, 2, 12, 0.1);
}*/
.choose-year {
padding-left: 20px;
padding-right: 20px;
}
.choose-month {
text-align: center;
font-size: 16px;
}
.arrow {
padding: 30px;
}
.month ul li {
color: #374453;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 3px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background: #eef1f6;
display: flex;
flex-wrap: wrap;
color: #FFFFFF;
justify-content: space-around;
width:100%;
color: #374453;
padding-right: 17px;
background: #eef1f6;
}
.weekdays li {
display: inline-block;
width: 13.6%;
text-align: center;
}
.days {
padding: 0;
background: #FFFFFF;
margin: 0;
display: flex;
flex-wrap: wrap;
height: 100%;
width: 420px;
}
.days li {
list-style-type: none;
display: inline-block;
width: 14.2%;
text-align: center;
font-size: 1rem;
}
.days li span{
display: inline-block;
color: #000;
cursor: pointer;
vertical-align: middle;
height: 50px;
line-height: 50px;
width: 50px;
border-radius: 25px;
}
.days li span .active {
width: 50px;
border-radius: 25px;
background: #0097FF;
color: #fff;
display: inline-block;
}
.days li .other-month {
padding: 5px;
color: darkgrey;
}
.days li span:hover {
background: #0097FF;
color: #FFFFFF;
}
.arrDays{
height:458px;
overflow-y: auto;
}
.years{
height: 30px;
line-height: 30px;
text-align: left;
padding: 0 10px;
color: #0097FF;
}
js 程式碼
data(){
return{
currentDay: '',
currentMonth: '',
currentYear: '',
currentWeek: '',
days: [],
thisYear:null,
thisMonth:null,
arrDays:[],
}
},
mounted(){
var date=new Date()
self.currentDay = date.getDate();
self.currentYear = date.getFullYear();
self.currentMonth = date.getMonth() + 1;
self.currentWeek = date.getDay(); // 1...6,0
this.days=[]
var month=date.getMonth() + 1;
var year=date.getFullYear();
for(var i=0;i<12;i++){
console.log(month)
if(i==0){
this.initData(date);//獲取當前時間
}else{
if(month>12){
this.initData(this.formatDate(year+1,month-12,1));
}else{
this.initData(this.formatDate(year,month,1));
}
}
month+=1
}
$('#calendar').on('click','.curDay',function(){
console.log(123)
$(this).addClass('active')
console.log($(this).text())
console.log($(this).parents('.days').siblings('.years').find('.timeHide').text().replace(/(^\s*)|(\s*$)/g, ""))
$(this).parents('li').siblings().find('.curDay').removeClass('active')
$(this).parents('.calendarData').siblings().find('.curDay').removeClass('active')
})
},
methods:{
addInfo(){//
this.isShow=!this.isShow
},
closeModel(){
this.isShow=!this.isShow
},
initData(cur){
var self=this
var date = new Date(cur);
var currentDay = date.getDate();
var currentYear = date.getFullYear();
var currentMonth = date.getMonth() + 1;
var currentWeek = date.getDay(); // 1...6,0
if (currentWeek == 0) {//星期天
currentWeek = 7;
}
var str = this.formatDate(currentYear , currentMonth, currentDay);
var arr=[]
var str = this.formatDate(currentYear , currentMonth, currentDay);
this.days.length = 0;
// 今天是週日，放在第一行第7個位置，前面6個
for (var i = currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate()-i);
if(i==0){
arr.push(d);
}else{
arr.push('');
}
}
for (var i = 1; i <= 42 - currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
if(currentMonth==(d.getMonth()+1)){
arr.push(d);
}
}
var obj={}
obj.moth=currentMonth
obj.days=arr
obj.year=currentYear
self.arrDays.push(obj)
},
formatDate(year,month,day){
var y = year;
var m = month;
if(m<10) m = "0" + m;
var d = day;
if(d<10) d = "0" + d;
return y+"-"+m+"-"+d
},
}