vue+js纯手写日历（包含农历，节假日）
使用的js 地址 dataChange.js 插件使用了elementui
//完整代码
<template>
<div>
<div class="dateBox">
<!-- 存放日期选择器和返回按钮 -->
<div>
<span class="checkDateBox">
<el-date-picker
v-model="dateData"
format="yyyy-MM"
value-format="yyyy-MM"
type="month"
placeholder="选择月"
@change="dateChange"
>
</el-date-picker>
</span>
<span class="backBtn">
<el-button type="primary" @click="currentTime"
>返回当前时间</el-button
>
</span>
</div>
<div class="faceplate">
<!-- 存放星期的容器 -->
<div class="box">
<div
class="timeBox"
v-for="(item, index) in weekList"
:key="index"
:style="index == 5 || index == 6 ? 'color:#dc9514' : 'color:#fff'"
>
{{ item.tit }} <span>{{ item.en }}</span>
</div>
</div>
<!-- 存放日历面板的容器 -->
<div class="box">
<div
class="timeBoxNum"
v-for="(item, index) in dataList"
:key="index"
:style="
item.type == 2
? 'background: #e4e7ed;'
: intraday == item.day && item.nowYear == 1&&item.type ==1
? 'background: pink'
: 'background: #fff'
"
@click="timeClick(index)"
>
<div class="tiemStr">{{ item.day }}</div>
<div class="tiemStr" style="margin-bottom:5px" v-if="item.ChineseCalendar.Term !=null">{{item.ChineseCalendar.Term}}</div>
<div class="tiemStr" style="margin-bottom:5px" v-else-if="item.ChineseCalendar.IDayCn == '初一'">{{item.ChineseCalendar.IMonthCn}}</div>
<div class="tiemStr" style="margin-bottom:5px" v-else>{{item.ChineseCalendar.IDayCn}}</div>
<div class="tiemStr">{{ item.pullText }}</div>
<div class="tiemStr">{{ item.explain }}</div>
</div>
</div>
</div>
</div>
<el-dialog
title="编辑日历"
:visible.sync="dialogVisible"
width="50%"
:before-close="handleClose"
>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
:label-position="labelPosition"
>
<el-form-item label="选择当前日期类型" prop="selectValue">
<el-select
v-model="ruleForm.selectValue"
placeholder="请选择活动区域"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="请输入需要说明的内容" prop="details">
<el-input type="textarea" v-model="ruleForm.details"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="tijiao">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import calendarFormatter from "@/utils/dataChange";
export default {
data() {
return {
intraday: "", //当天
intraMonth: "", //当月
nowYear: "", //当年
activeIndex: null, //点击了哪个日期，在她上面添加信息
labelPosition: "top", //表单标题对其方式
dialogVisible: false,
options: [
{
value: "工作日",
label: "工作日",
},
{
value: "休息日",
label: "休息日",
},
],
ruleForm: {
selectValue: "", //下拉选中的值
details: "", //多行输入框的数据
}, //表单数据
dateData: "", //选择的具体日期
dataList: [], //日历面板数据
weekList: [
{
tit: "星期一",
en: "MON",
},
{ tit: "星期二", en: "TUN" },
{ tit: "星期三", en: "WEN" },
{ tit: "星期四", en: "THU" },
{ tit: "星期五", en: "FRI" },
{ tit: "星期六", en: "SAT" },
{ tit: "星期日", en: "SUN" },
],
rules: {
selectValue: [
{ required: true, message: "请选择当前日期类型", trigger: "blur" },
],
},
};
},
methods: {
// 确定处理数据事件
submitForm() {
this.dialogVisible = false;
this.dataList[this.activeIndex].pullText = this.ruleForm.selectValue;
this.dataList[this.activeIndex].explain = this.ruleForm.details;
},
// 表单的提交
tijiao() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
this.submitForm();
} else {
return false;
}
});
},
// 点击日期弹层出现
timeClick(index) {
this.activeIndex = index;
this.dialogVisible = true;
},
//时间的切换
dateChange() {
this.dataList = [];
this.getDays(this.dateData);
},
// 获取某年某月的天数
getDays(indate) {
// let indate = "2022-07";
var timeData = indate + "-01";
var year = parseInt(indate.split("-")[0]);
var month = parseInt(indate.split("-")[1]);
//run nian
var isrun = false;
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) isrun = true;
switch (month) {
case 2:
if (isrun) {
this.returnDetialDay(timeData, 29);
return 29;
} else {
this.returnDetialDay(timeData, 28);
return 28;
}
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
this.returnDetialDay(timeData, 31);
return 31;
default:
this.returnDetialDay(timeData, 30);
return 30;
}
},
// 返回某天是星期几 --- 前面需要加几天
returnDetialDay(val, day) {
var y = val.substring(0, 4),
m = val.substring(5, 7),
newM = m >= 10 ? m - 1 : val.substring(6, 7) - 1; //为了获取前一个月的最后一天数据 小于10月的会有补0需要判断处理
var lastDay = new Date(y, newM, 0); //某年月的最后一天 中国标准时间格式
var newlastDay = lastDay.getDate(); //转化为具体数字格式
// val 传入的格式： 2022-07-06
let timeArr = val.split("-");
var myDate = new Date();
myDate.setFullYear(timeArr[0], Number(timeArr[1]) - 1, timeArr[2]);
var week = myDate.getDay();
let obj = {
year: y, //选中的年份
month:m,//选中的月份
text: "", // 选中月第一天是周几
start: null, //选中月前面展示上月的天数
end: null, // 选中月后面展示下月的天数
time: val.substring(0, 7), //选中的年月格式
lastDay: newlastDay, //选中月 上一个月份的最后一天
day: day,
};
if (week == 0) {
obj.text = "周日";
obj.start = 6;
obj.end = 42 - 6 - day;
} else if (week == 1) {
obj.text = "周一";
obj.start = 0;
obj.end = 42 - 0 - day;
} else if (week == 2) {
obj.text = "周二";
obj.start = 1;
obj.end = 42 - 1 - day;
} else if (week == 3) {
obj.text = "周三";
obj.start = 2;
obj.end = 42 - 2 - day;
} else if (week == 4) {
obj.text = "周四";
obj.start = 3;
obj.end = 42 - 3 - day;
} else if (week == 5) {
obj.text = "周五";
obj.start = 4;
obj.end = 42 - 4 - day;
} else if (week == 6) {
obj.text = "周六";
obj.start = 5;
obj.end = 42 - 5 - day;
}
this.panelDate(obj);
},
panelDate(textobj) {
// 上一月展示的天数
let minnum = textobj.lastDay - textobj.start + 1;
for (var i = minnum; i <= textobj.lastDay; i++) {
let obj = {
year:textobj.month == '01'? textobj.year -1:textobj.year,//展示日期的年
month:textobj.month == '01'?12:textobj.month-1,//展示日期的月
pullText: "", //下拉选中 例如工作日
explain: "", //说明
day: i, //多少号
type: 2, //是否是本月 1为是 2为上个月或下个月 3为不是本月
nowYear: 2,
};
this.dataList.push(obj);
}
// 本月展示的天数
for (var j = 1; j <= textobj.day; j++) {
let obj = {
year:textobj.year,//展示日期的年
month:textobj.month,//展示日期的月
pullText: "", //下拉选中 例如工作日
explain: "", //说明
day: j, //多少号
type: this.intraMonth == textobj.month?1:3, //是否是本月 1为是 2为上个月或下个月 3为不是本月
nowYear: this.nowYear == textobj.year ? 1 : 2,
};
this.dataList.push(obj);
}
// 下月展示的天数
for (var t = 1; t <= textobj.end; t++) {
let obj = {
year:textobj.month == '12'? textobj.year*1 +1 : textobj.year,//展示日期的年
month:textobj.month == '12'?'01':textobj.month*1+1,//展示日期的月
pullText: "", //下拉选中 例如工作日
explain: "", //说明
day: t, //多少号
type: 2, //是否是本月 1为是 2为上个月或下个月 3为不是本月
nowYear: 2,
};
this.dataList.push(obj);
}
// console.log("时间数据", textobj, this.dataList);
for(var f = 0 ; f < this.dataList.length; f++){
let item = this.dataList[f]
this.dataList[f].ChineseCalendar = calendarFormatter.solar2lunar(item.year, item.month, item.day)
}
console.log("时间数据", this.dataList);
},
// 监测弹出层是否关闭
handleClose() {
this.dialogVisible = false;
this.$refs["ruleForm"].resetFields();
this.ruleForm = {
selectValue: "", //下拉选中的值
details: "", //多行输入框的数据
};
},
currentTime() {
var date = new Date();
let year = date.getFullYear(); //获取完整的年份(4位)
let m = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
this.intraday = new Date().getDate(); // 当前天
this.nowYear = year;
this.dataList = [];
let newM = m < 10 ? "0" + m : m;
this.dateData = year + "-" + newM;
this.intraMonth = newM //当月
this.getDays(this.dateData);
},
},
mounted() {
this.currentTime();
},
};
</script>
<style lang="less" scoped>
.dateBox {
width: 80%;
border: 1px solid #ccc;
margin: 0 auto;
}
.checkDateBox {
display: inline-block;
width: 200px;
}
.backBtn {
float: right;
}
.faceplate {
margin-top: 20px;
}
.box {
text-align: center;
margin: 0 auto;
}
.timeBox {
display: inline-block;
width: 13%;
background: blue;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
border-left: 1px solid pink;
box-sizing: border-box;
vertical-align: text-top;
}
.timeBox:nth-child(7) {
border-right: 1px solid pink;
}
.timeBoxNum {
display: inline-block;
width: 13%;
background: #fff;
height: 150px;
text-align: center;
color: black;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0px 10px;
box-sizing: border-box;
cursor: pointer;
vertical-align: text-top;
}
.timeBoxNum:nth-child(7n) {
border-right: 1px solid #ccc;
}
.tiemStr {
display: block;
text-align: left;
color: black;
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
