Vue日历
Posted ermao的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue日历相关的知识，希望对你有一定的参考价值。
Vue生成日历，根据返回值将日期标红
html：
<h1>CSS 日历</h1>
<div id="calendar">
<div class="month">
<ul>
<!-- <li class="arrow" @click="pickPre(currentYear,currentMonth)">?</li> -->
<li class="year-month" @click="pickYear(currentYear,currentMonth)">
<span class="choose-year">{{ currentYear +‘/‘+currentMonth}}</span>
<!-- <span class="choose-month">{{ currentMonth }}</span> -->
</li>
<!-- <li class="arrow" @click="pickNext(currentYear,currentMonth)">?</li> -->
</ul>
</div>
<ul class="weekdays">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li style="color:red">六</li>
<li style="color:red">日</li>
</ul>
<ul class="days">
<li @click="pick(day)" v-for="day in days">
<!--今天-->
<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
<span v-else>
<!--今天-->
<span :class="{active:j(day.getFullYear(),day.getMonth()+1,day.getDate())}">{{ day.getDate() }}</span>
<!-- <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span> -->
<!-- <span v-else>{{ day.getDate() }}</span> -->
</span>
</li>
</ul>
</div>
css:
<style type="text/css">
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
background: #E8F0F3;
}
#calendar {
width: 560px;
height: 400px;
margin: 0 auto;
border: 2px solid #000;
background: #fafafa;
}
.month {
width: 100%;
height: 60px;
}
.year-month {
height: 60px;
text-align: center;
line-height: 60px;
font-size: 26px;
}
.weekdays {
margin: 0;
padding: 6px 20px;
background-color: #f2f2f2;
display: flex;
color: #333;
justify-content: space-around;
}
.weekdays li {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 18px;
font-weight: bold;
}
.days {
padding: 15px 20px;
background: #FFFFFF;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.days li {
list-style-type: none;
display: inline-block;
width: 14.2%;
text-align: center;
padding: 4px 0;
font-size: 16px;
color: #000;
}
.days li .active {
border-radius: 50%;
background: red;
color: #fff;
}
.days li span {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
font-weight: bold;
}
.days li .other-month {
color: gainsboro;
}
.days li:hover {
background: #e1e1e1;
}
</style>
<script type="text/javascript">
new Vue({
el: ‘#calendar‘,
data: {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
addDay: [],
},
created: function() {
this.initData(null);
var $this = this;
//请求数据
$.ajax({
url: "这里填接口名称",
type: "POST",
data: {
name: ‘‘,
params: ‘‘
},
dataType: "json",
async: false,
success: function(data) {
console.log(data);
$this.addDay = data;
},
error: function(xhr) {
console.log(xhr);
}
});
},
methods: {
j: function(y, m, d) {
//将传入的参数转换成字符串，作比较
var Y = y.toString();
var M = m < 10 ? ‘0‘ + m : m.toString();
var D = d < 10 ? ‘0‘ + d : d.toString();
//判断日历日期跟数据返回日期做对比
for (var i = 0; i < this.addDay.length; i++) {
if (toData(this.addDay[i][‘日历日期‘]) == (Y + M + D)) {
return true
}
}
function toData(date) { //将时间戳转化成标准的日期格式
if (date == null) {
return "";
}
var ndate = new Date(date);
var Y = ndate.getFullYear();
var M = (ndate.getMonth() + 1 < 10 ? ‘0‘ + (ndate.getMonth() + 1) : ndate.getMonth() + 1);
var D = (ndate.getDate() < 10 ? ‘0‘ + (ndate.getDate()) : ndate.getDate());
ndate = Y + M + D;
return ndate;
}
},
initData: function(cur) {
var date;
if (cur) {
date = new Date(cur);
} else {
date = new Date();
}
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); // 1...6,0
if (this.currentWeek == 0) {
this.currentWeek = 7;
}
var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
// console.log("today:" + str + "," + this.currentWeek);
this.days.length = 0;
// 今天是周日，放在第一行第7个位置，前面6个
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
// console.log("y:" + d.getDate());
this.days.push(d);
}
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
this.days.push(d);
}
},
pick: function(date) {
alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
},
pickPre: function(year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
pickNext: function(year, month) {
var d = new Date(this.formatDate(year, month, 1));
d.setDate(35);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
pickYear: function(year, month) {
alert(year + "," + month);
},
// 返回 类似 2016-01-02 格式的字符串
formatDate: function(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
},
}
});
</script>
以上是关于Vue日历的主要内容，如果未能解决你的问题，请参考以下文章