注:因Element_Ul DatePicker里的日期选择器不能满足实际功能的开发,因此,利用vue,JS,CSS重新封装了一个日历,用做一个时间的展示,并用来给后端传递时间,这里包括年份的切换,月份的切换,仅供参考!
1、效果图
2、点击日历上的日期,打印对应的日期
3、代码
<template>
<div class="timeBox">
<!-- 切换年月头部 -->
<div class="timeHead">
<i class="el-icon-caret-top" @click="previousYear"></i>
<i class="el-icon-caret-bottom" @click="nextYear"></i>
<el-select v-model="nowYear" size="mini">
<el-option
v-for="item in yearArr"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select><span>年</span>
<el-input v-model="nowMonth" size="mini" readonly="readonly" class="monthInput"></el-input><span>月</span>
<i class="el-icon-arrow-right" @click="nextMonth"></i>
<i class="el-icon-arrow-left" @click="previousMonth"></i>
</div>
<!-- 显示周部分 -->
<div class="weekBox">
<ul>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
</div>
<!-- 显示日期部分 -->
<div class="dayBox">
<ul>
<li v-for="item in nowWeek" :key="item + '1'"></li>
<li v-for="item in nowDays" :key="item + '2'" @click="getNowDataFun(item)" :class="{'colorData': (colorYear + '-' + colorMonth + '-' + nowDate == nowYear + '-' + nowMonth + '-' + item) ? true : false}">
{
{ item }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
monthDays: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 每月的天数
yearArr: [], // 年份下拉框的数据
nowYear: 2022, // 当前年份
nowMonth: 8, // 当前月份
nowDate: 24, // 当前日期
nowWeek: 1, // 当月第一天对应的星期
nowDays: 30, // 当月天数
colorYear: 2022, // 今天对应的年份
colorMonth: 8, // 今天对应的月份
}
},
watch: {
// 监听年份变化
nowYear () {
this.getNowMonthData();
},
// 监听月份变化
nowMonth () {
this.getNowMonthData();
}
},
mounted () {
const timeObj = new Date();
this.nowYear = timeObj.getFullYear();
this.nowMonth = timeObj.getMonth() + 1;
this.getYearArr();
this.getColorData();
this.getNowMonthData();
},
methods: {
// 设定年份下拉框的数据
getYearArr () {
for (let i = 0; i < 5; i++) {
let yearNum = ++this.nowYear;
this.yearArr.push({value: yearNum, label: yearNum});
}
this.nowYear = new Date().getFullYear();
},
// 获取到今天的日期
getColorData () {
// 获取到今天对应的年份,如2022.08.24拿到的就是2022
this.colorYear = new Date().getFullYear();
// 获取到今天对应的月份,如2022.08.24拿到的就是7
this.colorMonth = new Date().getMonth() + 1;
// 获取到今天对应的日期,如2022.08.24拿到的就是24
this.nowDate = new Date().getDate();
},
// 上一年
previousYear () {
if (this.nowYear > 0) {
this.nowYear -= 1;
}
},
// 下一年
nextYear () {
this.nowYear += 1;
},
// 上一月
previousMonth () {
if (this.nowMonth > 1) {
this.nowMonth -= 1;
}
},
// 下一月
nextMonth () {
if (this.nowMonth < 12) {
this.nowMonth += 1;
}
},
// 获取到当月的日历数据
getNowMonthData () {
// 当月天数
this.nowDays = this.getNowDaysFun(Number(this.nowYear), Number(this.nowMonth));
//console.log(this.nowDays);
// 当月第一天对应的星期
this.getNowWeekFun();
},
// 获取当月的天数
getNowDaysFun (year, month) {
if (month === 2) {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
} else {
return this.monthDays[month - 1];
}
},
// 获取当月第一天对应的星期
getNowWeekFun () {
this.nowWeek = new Date(this.nowYear + '-' + this.nowMonth).getDay();
//console.log(this.nowWeek);
},
// 获取到当前鼠标点击的日期
getNowDataFun (data) {
let nowData = this.nowYear + '-' + this.nowMonth + '-' + data;
console.log(nowData);
// 要传递日期的接口
// 这部分省略
}
}
}
</script>
<style lang="less" scoped>
.timeBox {
width: 344px;
height: 280px;
background-color: #fdfdfd;
padding: 20px 10px 0 10px;
box-sizing: border-box;
// 头部
.timeHead {
width: 100%;
height: 30px;
margin-bottom: 5px;
background-color: #fdfdfd;
position: relative;
// 三角图标
.el-icon-caret-top, .el-icon-caret-bottom {
font-size: 16px;
color: #555555;
}
.el-icon-caret-top {
position: absolute;
left: 15px;
top: 3px;
cursor:pointer;
}
.el-icon-caret-top:hover {
color: #009dd9;
}
.el-icon-caret-bottom {
position: absolute;
left: 15px;
top: 10px;
cursor:pointer;
}
.el-icon-caret-bottom:hover {
color: #009dd9;
}
// 消除下拉框自带的图标
/deep/.el-icon-arrow-up:before {
display: none;
}
.el-select {
margin: 6px 2px 0 30px;
width: 30px;
}
.el-input {
width: 14px;
}
/deep/.el-input__inner {
width: 30px;
height: 20px;
padding: 0;
text-align: center;
border-radius: 0;
border: none;
background-color: #fdfdfd;
color: #6e6e6e;
}
.monthInput {
width: 14px;
/deep/.el-input__inner {
width: 14px !important;
}
}
span {
font-size: 12px;
color: #6e6e6e;
}
// 左箭头
.el-icon-arrow-left {
font-size: 14px;
float: right;
margin-top: 7px;
margin-right: 10px;
font-weight: 1000;
cursor:pointer;
}
.el-icon-arrow-left:hover {
color: #009dd9;
}
// 右箭头
.el-icon-arrow-right {
font-size: 14px;
float: right;
margin-top: 7px;
margin-right: 15px;
font-weight: 1000;
cursor:pointer;
}
.el-icon-arrow-right:hover {
color: #009dd9;
}
}
// 周
.weekBox {
width: 100%;
height: 35px;
line-height: 35px;
background-color: #fdfdfd;
li {
width: 14.2%;
font-size: 12px;
color: #6e6e6e;
float: left;
text-align: center;
}
}
// 天
.dayBox {
width: 100%;
height: 100%;
background-color: #fdfdfd;
li {
width: 14.2%;
height: 40px;
line-height: 40px;
color: #333333;
font-size: 12px;
float: left;
text-align: center;
}
li:hover {
color: #009dd9;
cursor:pointer;
}
// 设定今天日期显示的样式
.colorData {
color: #fff;
background-color: #009dd9;
border-radius: 50%;
}
.colorData:hover {
color: #fff;
}
}
}
</style>