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>

 

javascript：

 

<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>