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

},

}

});

總結

以上是生活随笔為你收集整理的vue打卡日历_Vue日历的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。