前端小白一枚，废了老大劲折腾出来的日历组件，大神求轻喷。
用vue的脚手架搭建起来的目录结构
components文件夹里面的showCalendar.vue是我们的业务组件(父组件)，
base文件夹里面的calendar.vue 是基础组件(子组件)
showCalendar.vue中
<template>
<div id="search">
<div class="left-side-box">
<label for="calendar-value">日期:</label>
<input
v-model="calendarInitDay"
id="calendar-value"
type="text"
@click="calendarShow=!calendarShow"
style="cursor:pointer;"
readonly placeholder="点击我显示日历"
<div v-show="calendarShow" class="calendar-box">
<calendar v-on:changeDate="getDate" :initDay="calendarInitDay">
</calendar>
</div>
</div>
</div>
</template>
<script>
import calendar from '@/tools/calendar'
export default {
name: 'search',
data () {
return {
calendarInitDay: '2017-12-12',
calendarShow: true
}
},
components: {'calendar':calendar},
methods: {
getDate: function(d){//获取组件返回的日期
this.calendarInitDay = d;
}
},
}
</script>
<style scoped>
search{
padding-top: 100px;
}
.left-side-box{
width: 400px;
height: 400px;
margin: 0 auto;
}
.calendar-box{
width: 300px;
position: relative;
top: 15px;
left: 100px;
}
</style>
calendar.vue中
<template>
<div id="calendar" onselectstart="return false;">
<div class="chead">
<span class="tle">{{ curY +"/"+ curM }}</span>
<div class="mbtn">
<span @click="preMonth()"><i>?</i></span>
<span @click="nextMonth()"><i>?</i></span>
</div>
</div>
<div class="cweek">
<ul>
<li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>
</ul>
</div>
<div class="cbody">
<ul>
<li v-for="day,index in days" :key="day.index">
<span v-text="day.num" :title="day.date"
:class="{otherMonth: day.otherMonth, today:day.date===today,checkday: day.date===checkDay}"
@click="pick(day.date)">
</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "calendar",
data() {
return {
checkDay: "", //选中日期
today: "", //今日
curY: 0, //check年份
curM: 0, //check月份
days: [
]
};
},
props: ["initDay"], //默认选中日期
methods: {
formatDate: function(year, month, day) {
// 返回 类似 2016-01-02 格式的字符串(在input输入框里面的值)
let y = year,
m = month;
if (m < 10) m = "0" + m;
let d = day;
if (d < 10) d = "0" + d;
return y + "/" + m + "/" + d;
},
initDate: function(markDate) {
console.log(markDate)
//初始化
let that = this,
today = new Date(), //当前的日期对象
cur = markDate ? new Date(markDate) : today, //初始日期(如果初始日期存在，我们就使用初始日期，如果不存在我们就使用当前日期)
cday = cur.getDate(), //当前号数
cmon = cur.getMonth() + 1, //当前月份
cyear = cur.getFullYear(); //当前年份
this.today = this.formatDate( //当前的日期
today.getFullYear(),
today.getMonth() + 1,
today.getDate()
);
//调用了render函数
return this.render(cyear, cmon);
},
render: function(y, m) {
//渲染内容 m=1~12
this.curY = y;
this.curM = m;
this.days = [];
let cur = new Date(y, m-1, 1),
sumDay = new Date(y, m, 0).getDate(), //当月总天数
lastSumDay = new Date(y, m - 1, 0).getDate(), //上月总天数
week = cur.getDay(), //本月1号周几
total = sumDay + week + 1 > 35 ? 42 : 35; //适应最大展示数量
for (let i = 0; i < total; i++) {
if (i < week) {
this.days.push({
//上月 (i是从0开始的)
num: lastSumDay - week + i + 1,
date: this.formatDate(y, m - 1, lastSumDay - week + i + 1),
otherMonth: true
});
} else if (i - week < sumDay) {
this.days.push({
//本月 (i从5开始的)
num: i - week + 1,
date: this.formatDate(y, m, i - week + 1),
otherMonth: false
});
} else {
this.days.push({
//下月 (i是从36开始的，i不会走到42)
num: i - sumDay - week + 1,
date: this.formatDate(y, m + 1, i - sumDay - week + 1),
otherMonth: true
});
}
}
},
pick: function(date) {
//选中日期并传出
this.checkDay = date;
let cur = new Date(date),
cy = cur.getFullYear(),
cm = cur.getMonth() + 1;
this.render(cy, cm);
return this.sentToFather(this.checkDay);
},
preMonth: function() {
let nd = new Date(this.curY, Number(this.curM) - 1, 1),
y = nd.getFullYear(),
m = nd.getMonth();
if (m === 0) {
y = y - 1;
m = 12;
}
return this.render(y, m);
},
nextMonth: function() {
let nd = new Date(this.curY, Number(this.curM) + 1, 1),
y = nd.getFullYear(),
m = nd.getMonth();
if (m === 0) {
y = y - 1;
m = 12;
}
return this.render(y, m);
},
sentToFather: function(d) {
console.log(d)
d = d.replace(///g, "-");
this.$emit("changeDate", d);
}
},
created: function() {},
mounted: function() {
let d = this.initDay;
d = d.replace(/-/g, "/");
this.checkDay = d;
this.initDate(d);
}
};
</script>
<style scoped>
- {
box-sizing: border-box;
}
calendar{
width: 100%;
position: relative;
font-size: 14px;
color: #000;
padding: 20px 15px 25px 15px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
ul {
list-style: none;
}
ul li {
display: inline-block;
position: relative;
width: 13%;
margin: 5px 0;
}
.chead {
position: relative;
width: 100%;
margin-bottom: 35px;
}
.chead .tle {
font-size: 19px;
position: absolute;
left: 16px;
}
.chead .mbtn {
display: flex;
justify-content: space-between;
width: 50px;
font-size: 18px;
position: absolute;
right: 30px;
color: #888;
}
.chead .mbtn span:hover {
color: rgb(0, 189, 255);
}
.chead .mbtn span:active {
font-size: 17px;
color: rgb(0, 189, 255);
}
.chead span {
cursor: pointer;
}
.cweek {
margin-top: 25px;
border-bottom: 1px solid rgb(0, 189, 255);
}
.cbody {
position: relative;
}
.cbody span {
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
}
.today {
background-color: #eee;
}
.checkday {
background-color: rgb(0, 189, 255);
color: #fff;
}
.otherMonth {
color: #aaa;
}
</style>
