var vue = new Vue({
el : "#box",
data : {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
pickDay : null,
currentMemo : null,
memo_list :["2020-07-24","2020-07-31","2020-08-01"], //时间格式必须为xxxx-xx-xx;
text:[],
inputHtml: '<textarea id="duohang" name="a" style="width:114px;height:80px;display: none"></textarea>',
isShow: false
},
created: function() {
this.initCalendar(null);
},
methods:{
initCalendar: function(cur){
if (cur) {
var date = new Date(cur);
} else {
var date = new Date();
this.pickDay = date.getDate();
}
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
var str = this.formatDate(this.currentYear , this.currentMonth, 1);
this.currentWeek = new Date(str).getDay() == 0 ? 7 : new Date(str).getDay();
this.days.length = 0;//初始化数组
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
var memo_type = false;
d.setDate(d.getDate() - i);
for (var j = 0; j < this.memo_list.length; j++) {
var memoTime = new Date(this.memo_list[j]).getTime();
if( d.getTime() == memoTime){
memo_type = true;
}
}
this.days.push({day:d,memo_type:memo_type});
}
for (var i = 1; i <= 35 - this.currentWeek; i++){
var d = new Date(str);
d.setDate(d.getDate() + i);
var memo_type = false;
for (var j = 0; j < this.memo_list.length; j++) {
var memoTime = new Date(this.memo_list[j]).getTime()
if( d.getTime() == memoTime){
memo_type = true;
}
}
this.days.push({day:d,memo_type:memo_type});
}
},
pick: function(date){
this.pickDay = date.getDate();
this.initCalendar(this.formatDate(date.getFullYear() , date.getMonth() + 1, 1));
var curPickDay = this.formatDate(date.getFullYear() , date.getMonth() + 1, date.getDate())
// 数据发送请求拿回即可,这里我就写死了,随便写两个样例
if(curPickDay == "2020-07-24"){
this.currentMemo = [{
cont :"吃饭睡觉"
},{
cont :"打豆豆"
}]
}else if(curPickDay == "2020-07-31"){
this.currentMemo = [{
cont :"老和尚正在讲故事"
},{
cont :"赤水,青鸾殿"
}]
}else if(curPickDay == "2020-08-01"){
this.currentMemo = [
{cont :"思索库房内工大困难狗"},
{cont : "珠穆朗玛峰修地铁"}
]
}else{
this.currentMemo= null;
}
},
addTextDate: function(){
},
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.initCalendar(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.initCalendar(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
},
// 返回 类似 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
},
/*update: _.debounce(function(e) {
this.input = e.target.value;
}, 300),*/
/*compiledMarkdown: function() {
return marked(this.input, { sanitize: true });
}*/
toggleIsShow:function(e){
//console.log(e.currentTarget.lastElementChild);
//console.log(e.isShow)
this.isShow = !this.isShow;
/*this.isShow = !this.isShow;*/
},
blur:function (e) {
var obj = document.getElementById("txtdemo");
obj.innerText = e.target.value;
this.isShow = !this.isShow;
}
}
})